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

From blackwiki
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}}
  
:<code><nowiki>{{</nowiki>Composition bar|''amount''|''total''|''bar-color''|color=''color''|background-color=''background-color''|per=0/1<nowiki>}}</nowiki></code>
+
; 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.
  
* ''amount'' is the number of sub-units
+
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.
* ''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.
 
* ''color'' (default is black) is the text colour - a valid [[web colors|web color]].
 
* ''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.
 
 
 
If the bar-colour is dark, then the text may have insufficient contrast to show clearly for some readers. The text colour may be changed to white by specifying the color parameter. The background colour for the right part of the bar may then be too light to give sufficient contrast with white text, 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|color=#FFF}}</nowiki></code>
+
| 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"],
        },
 
        "Text color": {
 
            "label": "color",
 
            "description": "The text colour - a valid web color.",
 
            "default": "#000",
 
            "type": "string/line",
 
            "required": false
 
 
         },
 
         },
 
         "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",
 
            "required": false
 
        },
 
        "Border width": {
 
            "label": "border-width",
 
            "description": "Determines the thickness of the border around the box in px.",
 
            "default": "1px",
 
            "type": "string/line",
 
            "required": false
 
        },
 
        "Border color": {
 
            "label": "border-color",
 
            "description": "Determines the color of the border around the box - a valid web color.",
 
            "default": "#C0C0C0",
 
 
             "type": "string/line",
 
             "type": "string/line",
 
             "required": false
 
             "required": false
Line 128: Line 109:
 
     }
 
     }
 
}
 
}
 
 
</templatedata>
 
</templatedata>
  

Revision as of 10:35, 12 August 2015

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.

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:
  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|width=250}}
75 / 100
<div style="background-color:
  1. FF0; width: Expression error: Unrecognized punctuation character "[".%; height: 100%;">
{{Composition bar|40|100|#F00|width=300|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|width=300|per=2|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|width=300|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

Syntax error in JSON.

See also

Template:Progress templates