Difference between revisions of "Template:Composition bar/doc"

From blackwiki
Jump to navigation Jump to search
imported>Paine Ellsworth
m (update /doc)
imported>Matt Fitzpatrick
(updating parameters and examples)
Line 6: Line 6:
  
 
== Usage ==
 
== Usage ==
  <nowiki>{{</nowiki>Composition bar|''amount''|''total''|''bar-color''|background-color=''background-color''|per=0/1}}
+
  <nowiki>{{</nowiki>Composition bar|''amount''|''total''|''bar-color''|''options...''}}
  
 
; amount
 
; amount
: is the number of sub-units
+
: The first parameter is the number of sub-units.
 
; total
 
; total
: 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 light grey) 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 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.
; 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.
 
  
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.
+
Additional display options:
 +
; background-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
 +
; 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
 +
; per=...
 +
: (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 31: Line 41:
 
| {{Composition bar|50|100|red}}
 
| {{Composition bar|50|100|red}}
 
|-
 
|-
| style="font-size: 95%"| <code><nowiki>{{Composition bar|50|100|red|color=#FFF}}</nowiki></code>
+
| style="font-size: 95%"| <code><nowiki>{{Composition bar|50|100|pink|color=#000|text-shadow=#FFF|background-color=#CCC}}</nowiki></code>
| {{Composition bar|50|100|red|color=#FFF}}
+
| {{Composition bar|50|100|pink|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}}</nowiki></code>
+
| 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}}
+
| {{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>
 
| style="font-size: 95%"| <code><nowiki>{{Composition bar|50|100|{{Green Party (UK)/meta/color}}}}</nowiki></code>
Line 46: Line 53:
 
| {{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=250}}</nowiki></code>
+
| style="font-size: 95%"| <code><nowiki>{{Composition bar|75|100|#FF0|width=80%}}</nowiki></code>
| {{Composition bar|75|100|#FF0|width=250}}
+
| {{Composition bar|75|100|#FF0|width=80%}}
 
|-
 
|-
| style="font-size: 95%"| <code><nowiki>{{Composition bar|40|100|#F00|width=300|per=1}}</nowiki></code>
+
| style="font-size: 95%"| <code><nowiki>{{Composition bar|40|100|#F00|per=1}}</nowiki></code>
| {{Composition bar|40|100|#F00|width=300|per=1}}
+
| {{Composition bar|40|100|#F00|per=1}}
 
|-
 
|-
| style="font-size: 95%"| <code><nowiki>{{Composition bar|90|100|#F0F0F0|width=300|per=2|background-color=#F00}}</nowiki></code>
+
| style="font-size: 95%"| <code><nowiki>{{Composition bar|90|100|#F0F0F0|per=2|background-color=#F00}}</nowiki></code>
| {{Composition bar|90|100|#F0F0F0|width=300|per=2|background-color=#F00}}
+
| {{Composition bar|90|100|#F0F0F0|per=2|background-color=#F00}}
 
|-
 
|-
| style="font-size: 95%"| <code><nowiki>{{Composition bar|90|100|#F0C|width=300|per=1}}</nowiki></code>
+
| style="font-size: 95%"| <code><nowiki>{{Composition bar|90|100|#F0C|per=1}}</nowiki></code>
| {{Composition bar|90|100|#F0C|width=300|per=1|color=#FFF}}
+
| {{Composition bar|90|100|#F0C|per=1|color=#FFF}}
 
|}
 
|}
  

Revision as of 05:40, 23 February 2017

This template displays the numeric composition of a thing in terms of its sub-units. For example, it is frequently used as part of {{Infobox political party}} to show the number of seats a given political party holds in a legislature.

Usage

{{Composition bar|amount|total|bar-color|options...}}
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 very dark grey, nearly black) The third parameter is 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.

Additional display options:

background-color=...
(default is medium-dark grey) is the background color of the right part of the bar - a valid 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
per=...
(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. Snook's Colour Contrast Check may be used to check compliance with WCAG guidelines for contrast.

Examples

Code Result
{{Composition bar|50|100|red}}
50 / 100
<div style="background-color: red; width: Expression error: Unrecognized punctuation character "[".%; height: 100%;">
{{Composition bar|50|100|pink|color=#000|text-shadow=#FFF|background-color=#CCC}}
50 / 100
<div style="background-color: pink; width: Expression error: Unrecognized punctuation character "[".%; height: 100%;">
{{Composition bar|50|100|#99F|color=#000|text-shadow=#FFF|background-color=transparent|border-color=#336}}
50 / 100
<div style="background-color:
  1. 99F; width: Expression error: Unrecognized punctuation character "[".%; height: 100%;">
{{Composition bar|50|100|{{Green Party (UK)/meta/color}}}}
50 / 100
<div style="background-color: #528D6B; width: Expression error: Unrecognized punctuation character "[".%; height: 100%;">
{{Composition bar|50|100|rgb(255,255,16)}}
50 / 100
<div style="background-color: rgb(255,255,16); width: Expression error: Unrecognized punctuation character "[".%; height: 100%;">
{{Composition bar|75|100|#FF0|width=80%}}
75 / 100
<div style="background-color:
  1. FF0; width: Expression error: Unrecognized punctuation character "[".%; height: 100%;">
{{Composition bar|40|100|#F00|per=1}}
40 / 100 (Expression error: Unrecognized punctuation character "[".%)
<div style="background-color:
  1. F00; width: Expression error: Unrecognized punctuation character "[".%; height: 100%;">
{{Composition bar|90|100|#F0F0F0|per=2|background-color=#F00}}
90 / 100 (Expression error: Unrecognized punctuation character "[".%)
<div style="background-color:
  1. F0F0F0; width: Expression error: Unrecognized punctuation character "[".%; height: 100%;">
{{Composition bar|90|100|#F0C|per=1}}
90 / 100 (Expression error: Unrecognized punctuation character "[".%)
<div style="background-color:
  1. F0C; width: Expression error: Unrecognized punctuation character "[".%; height: 100%;">

TemplateData

This is the TemplateData documentation for this template used by VisualEditor and other tools; see the monthly parameter usage report for this template.

TemplateData for Composition bar

Syntax error in JSON.

See also

Template:Progress templates