Difference between revisions of "Template:Composition bar/doc"
imported>Matt Fitzpatrick (updating parameters and examples) |
imported>Matt Fitzpatrick (updated templatedata) |
||
| Line 20: | Line 20: | ||
; color=... | ; color=... | ||
: (default is white) is the color of the text | : (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=... | ; border-color=... | ||
: (default is no border) is the color of a border around the bar | : (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 | ||
| Line 88: | Line 88: | ||
"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": "# | + | "default": "#333", |
"type": "string/line", | "type": "string/line", | ||
"required": false, | "required": false, | ||
| − | "aliases": ["hex"] | + | "aliases": ["hex"] |
}, | }, | ||
| − | " | + | "background-color": { |
| − | "label": " | + | "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": "# | + | "default": "#999", |
| + | "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 | ||
}, | }, | ||
| − | " | + | "width": { |
| − | "label": " | + | "label": "Width", |
| − | "description": "The width of the bar | + | "description": "The width of the bar", |
| − | "default": " | + | "default": "100%", |
"type": "string/line", | "type": "string/line", | ||
"required": false | "required": false | ||
}, | }, | ||
| − | " | + | "per": { |
| − | "label": " | + | "label": "Show percent", |
| − | "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 | ||
Revision as of 05:50, 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
- 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=...
- (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
TemplateData for Composition bar
A composition bar.
| Parameter | Description | Type | Status | |
|---|---|---|---|---|
| 1 | 1 | The number of sub-units. | Line | required |
| 2 | 2 | The total number of sub-units possible. | Line | required |
| 3 | 3 hex | 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.
| Line | optional |
| Background color | background-color | The background color of the right part of the bar - a valid web color.
| Line | optional |
| Text color | color | The color of the overlay text
| Line | optional |
| Text shadow | text-shadow | The color of the contrast shadow around the overlay text
| Line | optional |
| Show border color | border-color | Specify a color to add a border of that color; default state is no border
| Line | optional |
| Width | width | The width of the bar
| Line | optional |
| Show percent | per | When set to 1 (true), adds a percentage to the bar as well
| Line | optional |
| Percent style | perstyle | Style declarations for the percentage text
| Line | optional |
See also