Difference between revisions of "Template:Composition bar/doc"
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''| | + | <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 | + | : (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. |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | 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| | + | | 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|pink|color=#000|text-shadow=#FFF|background-color=#CCC}} | |
| − | |||
| − | | | ||
| − | | {{Composition bar|50|100| | ||
|- | |- | ||
| − | | 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= | + | | style="font-size: 95%"| <code><nowiki>{{Composition bar|75|100|#FF0|width=80%}}</nowiki></code> |
| − | | {{Composition bar|75|100|#FF0|width= | + | | {{Composition bar|75|100|#FF0|width=80%}} |
|- | |- | ||
| − | | style="font-size: 95%"| <code><nowiki>{{Composition bar|40|100|#F00 | + | | style="font-size: 95%"| <code><nowiki>{{Composition bar|40|100|#F00|per=1}}</nowiki></code> |
| − | | {{Composition bar|40|100|#F00 | + | | {{Composition bar|40|100|#F00|per=1}} |
|- | |- | ||
| − | | style="font-size: 95%"| <code><nowiki>{{Composition bar|90|100|#F0F0F0 | + | | style="font-size: 95%"| <code><nowiki>{{Composition bar|90|100|#F0F0F0|per=2|background-color=#F00}}</nowiki></code> |
| − | | {{Composition bar|90|100|#F0F0F0 | + | | {{Composition bar|90|100|#F0F0F0|per=2|background-color=#F00}} |
|- | |- | ||
| − | | style="font-size: 95%"| <code><nowiki>{{Composition bar|90|100|#F0C | + | | style="font-size: 95%"| <code><nowiki>{{Composition bar|90|100|#F0C|per=1}}</nowiki></code> |
| − | | {{Composition bar|90|100|#F0C | + | | {{Composition bar|90|100|#F0C|per=1|color=#FFF}} |
|} | |} | ||
Revision as of 05:40, 23 February 2017
| 40px | This is a documentation subpage for Template:Composition bar. It contains usage information, categories and other content that is not part of the original template page. |
| 40px | This template is used on approximately 7,700 pages and changes may be widely noticed. Test changes in the template's /sandbox or /testcases subpages, or in your own user subpage. Consider discussing changes on the talk page before implementing them.
Transclusion count updated automatically (see documentation). |
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.
Contents
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:
|
{{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:
|
{{Composition bar|40|100|#F00|per=1}}
|
40 / 100 (Expression error: Unrecognized punctuation character "[".%)
<div style="background-color:
|
{{Composition bar|90|100|#F0F0F0|per=2|background-color=#F00}}
|
90 / 100 (Expression error: Unrecognized punctuation character "[".%)
<div style="background-color:
|
{{Composition bar|90|100|#F0C|per=1}}
|
90 / 100 (Expression error: Unrecognized punctuation character "[".%)
<div style="background-color:
|
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