Protected template

Template:Composition bar

From MEpedia, a crowd-sourced encyclopedia of ME and CFS science and history
50 / 100
template icon Template documentation[view] [edit] [history] [purge]

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[edit source]

{{Composition bar|amount|total|bar-color|color=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 templates.
  • color (default is black) is the text colour - a valid web color.
  • background-color (default is very light grey) is the background color of the right part of the bar - a valid web ’’’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. Snook's Colour Contrast Check may be used to check compliance with WCAG guidelines for contrast.

Examples[edit source]

Code Result
{{Composition bar|50|100|red}}
50 / 100
{{Composition bar|50|100|red|color=#FFFFFF}}
50 / 100
{{Composition bar|50|100|red|color=#FFFFFF|background-color=#000000}}
50 / 100
{{Composition bar|50|100|#9999FF}}
50 / 100
{{Composition bar|50|100|{{Green Party (UK)/meta/color}}}}
50 / 100
{{Composition bar|50|100|rgb(255,255,16)}}
50 / 100
{{Composition bar|75|100|#FF0|width=250}}
75 / 100
{{Composition bar|90|100|#F00|width=500|per=1}}
90 / 100   (90%)
{{Composition bar|90|100|#F00|width=500|per=1|color=#FFFFFF}}
90 / 100   (90%)

TemplateData[edit source]

This is the TemplateData documentation for this template used by VisualEditor and other tools; see the monthly error report for this template.

TemplateData for Composition bar

A composition bar.

Template parameters

ParameterDescriptionTypeStatus
1Amount

The number of sub-units.

Linerequired
2Total

The total number of sub-units possible.

Linerequired
3Bar Color

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
colorText color

The text colour - a valid web color.

Default
#000
Lineoptional
background-colorBackground color

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

Default
#F0F0F0
Lineoptional
widthWidth

The width of the bar in px.

Default
100px
Lineoptional
perShow Percent

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

Default
0
Lineoptional
border-widthBorder width

Determines the thickness of the border around the box in px.

Default
1px
Lineoptional
border-colorBorder color

Determines the color of the border around the box - a valid web color.

Default
#C0C0C0
Lineoptional


See also[edit source]

{{Bar chart}}

{{Composition_bar/advanced}}

{{Percentage bar}}

{{Percent-done}}

{{Progress}}

{{Progress bar}}

{{Progress box}}

{{Progression}}

{{Progress meter}}