Template:Composition bar/doc: Difference between revisions

updating parameters and examples
m (update /doc)
(updating parameters and examples)
Line 6:
 
== Usage ==
<nowiki>{{</nowiki>Composition bar|''amount''|''total''|''bar-color''|background-color=''background-coloroptions...''|per=0/1}}
 
; amount
: The first parameter is the number of sub-units.
; total
: The second parameter is the total number of sub-units possible.
; bar-color
: (default is lightvery 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.
; background-color
: (default is very light grey) is the background color of the right part of the bar - a valid [[web colors|web color]].
; width
: is the width of the bar in px.
; per
: (default is false), when set to 1 (true), adds a percentage to the bar as well.
 
Additional display options:
The background colour for the right part of the bar may then be too light to give sufficient contrast, in which case the background-color parameter may be used to provide a dark background for that part of the bar. See the first three 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.
; background-color=...
: (default is very lightmedium-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
; border-color=...
: (default is no border) is the color of a border around the bar
; text-shadow=...
: (default is black) is the color of the shadow around the text
; width=...
: (default is 100%) is the width of the bar in px.
; per=...
: (default is false), when set to 1any value (true), adds a percentage to the bar as well.
; perstyle=...
: (default is none), additional style declarations for the percentage text
 
TheSome backgroundolder colourWeb forbrowsers thedo rightnot partrender oftext-shadows, so the bartext mayshould thenideally behave too light to give sufficientenough contrast, inon whichits caseown. If the background-bar color parameteris maylight, bedarken usedthe tocolor, provideand alighten darkthe background-color forand that part of the bartext-shadow. See the firstsecond and threethird 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 ==
Line 31 ⟶ 41:
| {{Composition bar|50|100|red}}
|-
| style="font-size: 95%"| <code><nowiki>{{Composition bar|50|100|redpink|color=#000|text-shadow=#FFF|background-color=#CCC}}</nowiki></code>
| {{Composition bar|50|100|redpink|color=#000|text-shadow=#FFF|background-color=#CCC}}
|-
| style="font-size: 95%"| <code><nowiki>{{Composition bar|50|100|red|color=#FFF|background-color=#000}}</nowiki></code>
| {{Composition bar|50|100|red|color=#FFF|background-color=#000}}
|-
| style="font-size: 95%"| <code><nowiki>{{Composition bar|50|100|#99F|color=#000|text-shadow=#FFF|background-color=transparent|border-color=#336}}</nowiki></code>
| {{Composition bar|50|100|#99F|color=#000|text-shadow=#FFF|background-color=transparent|border-color=#336}}
|-
| style="font-size: 95%"| <code><nowiki>{{Composition bar|50|100|{{Green Party (UK)/meta/color}}}}</nowiki></code>
Line 46 ⟶ 53:
| {{Composition bar|50|100|rgb(255,255,16)}}
|-
| style="font-size: 95%"| <code><nowiki>{{Composition bar|75|100|#FF0|width=25080%}}</nowiki></code>
| {{Composition bar|75|100|#FF0|width=25080%}}
|-
| style="font-size: 95%"| <code><nowiki>{{Composition bar|40|100|#F00|width=300|per=1}}</nowiki></code>
| {{Composition bar|40|100|#F00|width=300|per=1}}
|-
| style="font-size: 95%"| <code><nowiki>{{Composition bar|90|100|#F0F0F0|width=300|per=2|background-color=#F00}}</nowiki></code>
| {{Composition bar|90|100|#F0F0F0|width=300|per=2|background-color=#F00}}
|-
| style="font-size: 95%"| <code><nowiki>{{Composition bar|90|100|#F0C|width=300|per=1}}</nowiki></code>
| {{Composition bar|90|100|#F0C|width=300|per=1|color=#FFF}}
|}