Difference between revisions of "Template:Composition bar/doc"
Jump to navigation
Jump to search
imported>Paine Ellsworth (update to High use template) |
imported>Izkala (rm colour options) |
||
| Line 6: | Line 6: | ||
== Usage == | == Usage == | ||
| + | <nowiki>{{</nowiki>Composition bar|''amount''|''total''|''bar-color''|background-color=''background-color''|per=0/1}} | ||
| − | : | + | ; amount |
| + | : is the number of sub-units | ||
| + | ; total | ||
| + | : is the total number of sub-units possible | ||
| + | ; 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. | ||
| + | ; 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. | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
== Examples == | == Examples == | ||
| − | |||
{| | {| | ||
|- | |- | ||
| Line 52: | Line 55: | ||
| {{Composition bar|90|100|#F0F0F0|width=300|per=2|background-color=#F00}} | | {{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 | + | | 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}} | | {{Composition bar|90|100|#F0C|width=300|per=1|color=#FFF}} | ||
|} | |} | ||
| Line 60: | Line 63: | ||
<templatedata> | <templatedata> | ||
| − | |||
{ | { | ||
"description": "A composition bar.", | "description": "A composition bar.", | ||
| Line 83: | Line 85: | ||
"required": false, | "required": false, | ||
"aliases": ["hex"], | "aliases": ["hex"], | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
}, | }, | ||
"Background color": { | "Background color": { | ||
| Line 109: | Line 104: | ||
"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", | "type": "string/line", | ||
"required": false | "required": false | ||
| Line 128: | Line 109: | ||
} | } | ||
} | } | ||
| − | |||
</templatedata> | </templatedata> | ||
Revision as of 10:35, 12 August 2015
| 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|background-color=background-color|per=0/1}}
- amount
- is the number of sub-units
- total
- is the total number of sub-units possible
- bar-color
- (default is light grey) 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. - background-color
- (default is very light grey) is the background color of the right part of the bar - a valid 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. 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|red|color=#FFF}}
|
50 / 100
<div style="background-color: red; width: Expression error: Unrecognized punctuation character "[".%; height: 100%;"> |
{{Composition bar|50|100|red|color=#FFF|background-color=#000}}
|
50 / 100
<div style="background-color: red; width: Expression error: Unrecognized punctuation character "[".%; height: 100%;"> |
{{Composition bar|50|100|#99F}}
|
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=250}}
|
75 / 100
<div style="background-color:
|
{{Composition bar|40|100|#F00|width=300|per=1}}
|
40 / 100 (Expression error: Unrecognized punctuation character "[".%)
<div style="background-color:
|
{{Composition bar|90|100|#F0F0F0|width=300|per=2|background-color=#F00}}
|
90 / 100 (Expression error: Unrecognized punctuation character "[".%)
<div style="background-color:
|
{{Composition bar|90|100|#F0C|width=300|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