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

From blackwiki
Jump to navigation Jump to search
imported>Matt Fitzpatrick
(updated templatedata)
imported>Bsherr
m (replacing Template:Tld with Template:Tlc, plus general and typo fixes as found)
 
(8 intermediate revisions by 4 users not shown)
Line 1: Line 1:
 
{{Documentation subpage}}
 
{{Documentation subpage}}
<!-- Categories go where indicated at the bottom of this page, please; interwikis go to Wikidata (see also: [[Wikipedia:Wikidata]]) -->
+
<!-- Add categories where indicated at the bottom of this page and interwikis at Wikidata -->
 
{{high-use| 4913 }}
 
{{high-use| 4913 }}
  
This template displays the numeric composition of a thing in terms of its sub-units. For example, it is frequently used as part of {{tl|Infobox political party}} to show the number of seats a given political party holds in a legislature.
+
This template displays the numeric composition of a thing in terms of its sub-units. For example, it is frequently used as part of {{tl|Infobox political party}} to show the number of seats a given political party holds in a legislature. A single line, flexible width version of this template is available at [[Template:Composition bar compact]]. A textless, single line, flexible width version of this template is available at [[Template:Composition bar textless]].
  
 
== Usage ==
 
== Usage ==
Line 13: Line 13:
 
: The second parameter 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 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.
+
: (default is light grey) 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 {{tlc|political party/meta/color}} templates.
  
 
Additional display options:
 
Additional display options:
 
; background-color=...
 
; background-color=...
: (default is medium-dark grey) is the background color of the right part of the bar - a valid [[web colors|web color]].
+
: (default is transparent) is the background color of the right part of the bar - a valid [[web colors|web color]].
; color=...
+
; border=...
: (default is white) is the color of the text
+
: (default is medium grey) is the color of the border, or "none" for no border
; 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=...
 
; width=...
: (default is 100%) is the width of the bar
+
: (default is 100px) a width value for the bar, such as "100%" or "8em" (unitless numbers are interpreted as px)
 
; per=...
 
; per=...
 
: (default is false), when set to any value (true), adds a percentage to the bar as well
 
: (default is false), when set to any value (true), adds a percentage to the bar as well
; perstyle=...
+
; ref=...
: (default is none), additional style declarations for the percentage text
+
: (default is blank), may be used to add a reference/citation for the numbers.
 
 
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 41: Line 35:
 
| {{Composition bar|50|100|red}}
 
| {{Composition bar|50|100|red}}
 
|-
 
|-
| style="font-size: 95%"| <code><nowiki>{{Composition bar|50|100|pink|color=#000|text-shadow=#FFF|background-color=#CCC}}</nowiki></code>
+
| style="font-size: 95%"| <code><nowiki>{{Composition bar|50|100|red|background-color=#DDD|border=none}}</nowiki></code>
| {{Composition bar|50|100|pink|color=#000|text-shadow=#FFF|background-color=#CCC}}
+
| {{Composition bar|50|100|red|background-color=#DDD|border=none}}
 
|-
 
|-
| style="font-size: 95%"| <code><nowiki>{{Composition bar|50|100|#99F|color=#000|text-shadow=#FFF|background-color=transparent|border-color=#336}}</nowiki></code>
+
| style="font-size: 95%"| <code><nowiki>{{Composition bar|50|100|#99F|width=85%}}</nowiki></code>
| {{Composition bar|50|100|#99F|color=#000|text-shadow=#FFF|background-color=transparent|border-color=#336}}
+
| {{Composition bar|50|100|#99F|width=85%}}
 
|-
 
|-
 
| 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 53: Line 47:
 
| {{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=80%}}</nowiki></code>
+
| style="font-size: 95%"| <code><nowiki>{{Composition bar|75|100|#FF0}}</nowiki></code>
| {{Composition bar|75|100|#FF0|width=80%}}
+
| {{Composition bar|75|100|#FF0}}
 
|-
 
|-
 
| style="font-size: 95%"| <code><nowiki>{{Composition bar|40|100|#F00|per=1}}</nowiki></code>
 
| style="font-size: 95%"| <code><nowiki>{{Composition bar|40|100|#F00|per=1}}</nowiki></code>
 
| {{Composition bar|40|100|#F00|per=1}}
 
| {{Composition bar|40|100|#F00|per=1}}
 
|-
 
|-
| style="font-size: 95%"| <code><nowiki>{{Composition bar|90|100|#F0F0F0|per=2|background-color=#F00}}</nowiki></code>
+
| style="font-size: 95%"| <code><nowiki>{{Composition bar|90|100|#F0F0F0|per=1|background-color=#F00}}</nowiki></code>
| {{Composition bar|90|100|#F0F0F0|per=2|background-color=#F00}}
+
| {{Composition bar|90|100|#F0F0F0|per=1|background-color=#F00}}
 
|-
 
|-
 
| style="font-size: 95%"| <code><nowiki>{{Composition bar|90|100|#F0C|per=1}}</nowiki></code>
 
| style="font-size: 95%"| <code><nowiki>{{Composition bar|90|100|#F0C|per=1}}</nowiki></code>
| {{Composition bar|90|100|#F0C|per=1|color=#FFF}}
+
| {{Composition bar|90|100|#F0C|per=1}}
 +
|-
 +
| style="font-size: 95%"| <code><nowiki>{{Composition bar|0|26|hex=#00BFFF|per=1}}</nowiki></code>
 +
| {{Composition bar|0|26|hex=#00BFFF|per=1}}
 
|}
 
|}
  
Line 88: Line 85:
 
             "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": "#333",
+
             "default": "#CCCCCC",
 
             "type": "string/line",
 
             "type": "string/line",
 
             "required": false,
 
             "required": false,
Line 96: Line 93:
 
             "label": "Background color",
 
             "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": "#999",
+
             "default": "transparent",
 
             "type": "string/line",
 
             "type": "string/line",
 
             "required": false
 
             "required": false
 
         },
 
         },
         "color": {
+
         "border": {
             "label": "Text color",
+
             "label": "Border color",
             "description": "The color of the overlay text",
+
             "description": "The color of the border, or 'none' for no border",
             "default": "#fff",
+
             "default": "#AAAAAA",
 
             "type": "string/line",
 
             "type": "string/line",
             "required": false
+
             "required": false,
        },
+
             "aliases": ["border-color"]
        "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",
 
            "required": false
 
 
         },
 
         },
 
         "width": {
 
         "width": {
 
             "label": "Width",
 
             "label": "Width",
             "description": "The width of the bar",
+
             "description": "The width of the bar with units, such as 100% or 10em (unitless numbers are interpreted as px)",
             "default": "100%",
+
             "default": "100px",
 
             "type": "string/line",
 
             "type": "string/line",
 
             "required": false
 
             "required": false
Line 132: Line 116:
 
             "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
Line 153: Line 130:
  
 
<includeonly>{{When on basepage
 
<includeonly>{{When on basepage
| <!-- Categories go below this line, please; interwikis go to Wikidata, thank you! -->
+
| <!-- Categories below this line; interwikis at Wikidata -->
 
[[Category:Chart, diagram and graph templates]]
 
[[Category:Chart, diagram and graph templates]]
 
[[Category:Wikipedia progress templates]]
 
[[Category:Wikipedia progress templates]]
 
}}</includeonly>
 
}}</includeonly>

Latest revision as of 22:49, 9 August 2020

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. A single line, flexible width version of this template is available at Template:Composition bar compact. A textless, single line, flexible width version of this template is available at Template:Composition bar textless.

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 light grey) 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 transparent) is the background color of the right part of the bar - a valid web color.
border=...
(default is medium grey) is the color of the border, or "none" for no border
width=...
(default is 100px) a width value for the bar, such as "100%" or "8em" (unitless numbers are interpreted as px)
per=...
(default is false), when set to any value (true), adds a percentage to the bar as well
ref=...
(default is blank), may be used to add a reference/citation for the numbers.

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|background-color=#DDD|border=none}}
50 / 100
<div style="background-color: red; width: Expression error: Unrecognized punctuation character "[".%; height: 100%;">
{{Composition bar|50|100|#99F|width=85%}}
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}}
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=1|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%;">
{{Composition bar|0|26|hex=#00BFFF|per=1}}
0 / 26 (Expression error: Unrecognized punctuation character "[".%)
<div style="background-color:
  1. 00BFFF; 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

A composition bar.

Template parameters

ParameterDescriptionTypeStatus
11

The number of sub-units.

Linerequired
22

The total number of sub-units possible.

Linerequired
33 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.

Default
#CCCCCC
Lineoptional
Background colorbackground-color

The background color of the right part of the bar - a valid web color.

Default
transparent
Lineoptional
Border colorborder border-color

The color of the border, or 'none' for no border

Default
#AAAAAA
Lineoptional
Widthwidth

The width of the bar with units, such as 100% or 10em (unitless numbers are interpreted as px)

Default
100px
Lineoptional
Show percentper

When set to 1 (true), adds a percentage to the bar as well

Default
0
Lineoptional

See also

Template:Progress templates