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

From blackwiki
Jump to navigation Jump to search
imported>Matt Fitzpatrick
(updated templatedata)
imported>Matt Fitzpatrick
(updating again, template reverted to 2015 version)
Line 3: Line 3:
 
{{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 version of this template is available at [[Template:Composition bar compact]].
  
 
== 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 {{tld|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 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
 
; 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 100%) is the width of the bar
 
; 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=...
 
: (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 41: Line 31:
 
| {{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|pink|background-color=#333}}</nowiki></code>
| {{Composition bar|50|100|pink|color=#000|text-shadow=#FFF|background-color=#CCC}}
+
| {{Composition bar|50|100|pink|background-color=#333}}
 
|-
 
|-
| 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}}</nowiki></code>
| {{Composition bar|50|100|#99F|color=#000|text-shadow=#FFF|background-color=transparent|border-color=#336}}
+
| {{Composition bar|50|100|#99F}}
 
|-
 
|-
 
| 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 43:
 
| {{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}}
 
|}
 
|}
  
Line 88: Line 78:
 
             "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": "#CCC",
 
             "type": "string/line",
 
             "type": "string/line",
 
             "required": false,
 
             "required": false,
Line 96: Line 86:
 
             "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",
 
            "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
Line 123: Line 92:
 
         "width": {
 
         "width": {
 
             "label": "Width",
 
             "label": "Width",
             "description": "The width of the bar",
+
             "description": "The width of the bar in px (fixed width only, relative widths do not work)",
             "default": "100%",
+
             "default": "100",
 
             "type": "string/line",
 
             "type": "string/line",
 
             "required": false
 
             "required": false
Line 132: Line 101:
 
             "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 04:19, 24 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. A single line version of this template is available at Template:Composition bar compact.

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 medium-dark grey) is the background color of the right part of the bar - a valid web color.
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

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|background-color=#333}}
50 / 100
<div style="background-color: pink; width: Expression error: Unrecognized punctuation character "[".%; height: 100%;">
{{Composition bar|50|100|#99F}}
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%;">

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
#CCC
Lineoptional
Background colorbackground-color

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

Default
transparent
Lineoptional
Widthwidth

The width of the bar in px (fixed width only, relative widths do not work)

Default
100
Lineoptional
Show percentper

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

Default
0
Lineoptional

See also

Template:Progress templates