Template:Composition bar/doc: Difference between revisions

Jump to navigation Jump to search
Content added Content deleted
VisualWikitext
(updated templatedata)
(updating again, template reverted to 2015 version)
Line 3: Line 3:
{{high-use| 4913 }}
{{high-use| 4913 }}


This template displays the numeric composition of a thing in terms of its sub-units. For example, it is frequently used as part of {{tl|Infobox political party}} to show the number of seats a given political party holds in a legislature.
This template displays the numeric composition of a thing in terms of its sub-units. For example, it is frequently used as part of {{tl|Infobox political party}} to show the number of seats a given political party holds in a legislature. A single line version of this template is available at [[Template:Composition bar compact]].


== Usage ==
== Usage ==
Line 13: Line 13:
: The second parameter is the total number of sub-units possible.
: The second parameter is the total number of sub-units possible.
; bar-color
; bar-color
: (default is very dark grey, nearly black) The third parameter is the background color of the left part of the bar - a valid [[web colors|web color]], which can be specified by name, as a [[hex triplet]] (#rrbbgg), or rgb triplet (rgb(0–255,0–255,0–255)).<br />In the case of political parties, most will have their logo color available in {{tld|political party/meta/color}} templates.
: (default is light grey) The third parameter is the background color of the left part of the bar - a valid [[web colors|web color]], which can be specified by name, as a [[hex triplet]] (#rrbbgg), or rgb triplet (rgb(0–255,0–255,0–255)).<br />In the case of political parties, most will have their logo color available in {{tld|political party/meta/color}} templates.


Additional display options:
Additional display options:
; background-color=...
; background-color=...
: (default is medium-dark grey) is the background color of the right part of the bar - a valid [[web colors|web color]].
: (default is medium-dark grey) is the background color of the right part of the bar - a valid [[web colors|web color]].
; color=...
: (default is white) is the color of the text
; text-shadow=...
: (default is black) is the color of the shadow around the text
; border-color=...
: (default is no border) is the color of a border around the bar
; width=...
; width=...
: (default is 100%) is the width of the bar
: (default is 100%) is the width of the bar
; per=...
; per=...
: (default is false), when set to any value (true), adds a percentage to the bar as well
: (default is false), when set to any value (true), adds a percentage to the bar as well
; perstyle=...
: (default is none), additional style declarations for the percentage text

Some older Web browsers do not render text-shadows, so the text should ideally have enough contrast on its own. If the bar color is light, darken the color, and lighten the background-color and text-shadow. See the second and third examples below. [http://snook.ca/technical/colour_contrast/colour.html Snook's Colour Contrast Check] may be used to check compliance with [[WCAG]] guidelines for contrast.


== Examples ==
== Examples ==
Line 41: Line 31:
| {{Composition bar|50|100|red}}
| {{Composition bar|50|100|red}}
|-
|-
| style="font-size: 95%"| <code><nowiki>{{Composition bar|50|100|pink|color=#000|text-shadow=#FFF|background-color=#CCC}}</nowiki></code>
| style="font-size: 95%"| <code><nowiki>{{Composition bar|50|100|pink|background-color=#333}}</nowiki></code>
| {{Composition bar|50|100|pink|color=#000|text-shadow=#FFF|background-color=#CCC}}
| {{Composition bar|50|100|pink|background-color=#333}}
|-
|-
| style="font-size: 95%"| <code><nowiki>{{Composition bar|50|100|#99F|color=#000|text-shadow=#FFF|background-color=transparent|border-color=#336}}</nowiki></code>
| style="font-size: 95%"| <code><nowiki>{{Composition bar|50|100|#99F}}</nowiki></code>
| {{Composition bar|50|100|#99F|color=#000|text-shadow=#FFF|background-color=transparent|border-color=#336}}
| {{Composition bar|50|100|#99F}}
|-
|-
| style="font-size: 95%"| <code><nowiki>{{Composition bar|50|100|{{Green Party (UK)/meta/color}}}}</nowiki></code>
| style="font-size: 95%"| <code><nowiki>{{Composition bar|50|100|{{Green Party (UK)/meta/color}}}}</nowiki></code>
Line 53: Line 43:
| {{Composition bar|50|100|rgb(255,255,16)}}
| {{Composition bar|50|100|rgb(255,255,16)}}
|-
|-
| style="font-size: 95%"| <code><nowiki>{{Composition bar|75|100|#FF0|width=80%}}</nowiki></code>
| style="font-size: 95%"| <code><nowiki>{{Composition bar|75|100|#FF0}}</nowiki></code>
| {{Composition bar|75|100|#FF0|width=80%}}
| {{Composition bar|75|100|#FF0}}
|-
|-
| style="font-size: 95%"| <code><nowiki>{{Composition bar|40|100|#F00|per=1}}</nowiki></code>
| style="font-size: 95%"| <code><nowiki>{{Composition bar|40|100|#F00|per=1}}</nowiki></code>
| {{Composition bar|40|100|#F00|per=1}}
| {{Composition bar|40|100|#F00|per=1}}
|-
|-
| style="font-size: 95%"| <code><nowiki>{{Composition bar|90|100|#F0F0F0|per=2|background-color=#F00}}</nowiki></code>
| style="font-size: 95%"| <code><nowiki>{{Composition bar|90|100|#F0F0F0|per=1|background-color=#F00}}</nowiki></code>
| {{Composition bar|90|100|#F0F0F0|per=2|background-color=#F00}}
| {{Composition bar|90|100|#F0F0F0|per=1|background-color=#F00}}
|-
|-
| style="font-size: 95%"| <code><nowiki>{{Composition bar|90|100|#F0C|per=1}}</nowiki></code>
| style="font-size: 95%"| <code><nowiki>{{Composition bar|90|100|#F0C|per=1}}</nowiki></code>
| {{Composition bar|90|100|#F0C|per=1|color=#FFF}}
| {{Composition bar|90|100|#F0C|per=1}}
|}
|}


Line 88: Line 78:
"label": "3",
"label": "3",
"description": "The background color of the left part of the bar - a valid web color, which can be specified by name, as a hex triplet (#rrbbgg), or rgb triplet (rgb(0–255,0–255,0–255)). In the case of political parties, most will have their logo color available in {{political party/meta/color}} templates.",
"description": "The background color of the left part of the bar - a valid web color, which can be specified by name, as a hex triplet (#rrbbgg), or rgb triplet (rgb(0–255,0–255,0–255)). In the case of political parties, most will have their logo color available in {{political party/meta/color}} templates.",
"default": "#333",
"default": "#CCC",
"type": "string/line",
"type": "string/line",
"required": false,
"required": false,
Line 96: Line 86:
"label": "Background color",
"label": "Background color",
"description": "The background color of the right part of the bar - a valid web color.",
"description": "The background color of the right part of the bar - a valid web color.",
"default": "#999",
"default": "transparent",
"type": "string/line",
"required": false
},
"color": {
"label": "Text color",
"description": "The color of the overlay text",
"default": "#fff",
"type": "string/line",
"required": false
},
"text-shadow": {
"label": "Text shadow",
"description": "The color of the contrast shadow around the overlay text",
"default": "#000",
"type": "string/line",
"required": false
},
"border-color": {
"label": "Show border color",
"description": "Specify a color to add a border of that color; default state is no border",
"default": "",
"type": "string/line",
"type": "string/line",
"required": false
"required": false
Line 123: Line 92:
"width": {
"width": {
"label": "Width",
"label": "Width",
"description": "The width of the bar",
"description": "The width of the bar in px (fixed width only, relative widths do not work)",
"default": "100%",
"default": "100",
"type": "string/line",
"type": "string/line",
"required": false
"required": false
Line 132: Line 101:
"description": "When set to 1 (true), adds a percentage to the bar as well",
"description": "When set to 1 (true), adds a percentage to the bar as well",
"default": "0",
"default": "0",
"type": "string/line",
"required": false
},
"perstyle": {
"label": "Percent style",
"description": "Style declarations for the percentage text",
"default": "",
"type": "string/line",
"type": "string/line",
"required": false
"required": false
Retrieved from "https://civwiki.org/wiki/Template:Composition_bar/doc"