Template:Composition bar/doc: Difference between revisions

From CivWiki
Jump to navigation Jump to search
Content added Content deleted
VisualWikitext
(→‎TemplateData: Inserted and think all of the parameters are there. Not sure what {{{4}}} or {{{5}}} is for in the template itself. I'll have to go to the sandbox and figure that out. might be deprecated code.)
m (60 revisions imported from wikipedia:Template:Composition_bar/doc)
 
(28 intermediate revisions by 14 users not shown)
Line 1: Line 1:
{{Documentation subpage}}
{{Documentation subpage}}
<!-- Add categories where indicated at the bottom of this page and interwikis at Wikidata -->
<!-- PLEASE ADD CATEGORIES AND INTERWIKIS AT THE BOTTOM OF THIS PAGE -->
{{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 ==
⚫
<nowiki>{{</nowiki>Composition bar|''amount''|''total''|''bar-color''|''options...''}}


; amount
⚫
:<code><nowiki>{{</nowiki>Composition bar|''amount''|''total''|''bar-color''|color=''color''|background-color=''background-color''|per=0/1<nowiki>}}</nowiki></code>
⚫
: 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 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:
⚫
* ''amount'' is the number of sub-units
; background-color=...
⚫
* ''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.
: (default is transparent) is the background color of the right part of the bar - a valid [[web colors|web color]].
; border=...
* ''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]].
: (default is medium grey) is the color of the border, or "none" for no border
; width=...
* ''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.
: (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
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.
; ref=...
: (default is blank), may be used to add a reference/citation for the numbers.


== Examples ==
== Examples ==

{|
{|
|-
|-
Line 27: Line 35:
| {{Composition bar|50|100|red}}
| {{Composition bar|50|100|red}}
|-
|-
| style="font-size: 95%"| <code><nowiki>{{Composition bar|50|100|red|color=#FFFFFF}}</nowiki></code>
| style="font-size: 95%"| <code><nowiki>{{Composition bar|50|100|red|background-color=#DDD|border=none}}</nowiki></code>
| {{Composition bar|50|100|red|color=#FFFFFF}}
| {{Composition bar|50|100|red|background-color=#DDD|border=none}}
|-
|-
| style="font-size: 95%"| <code><nowiki>{{Composition bar|50|100|red|color=#FFFFFF|background-color=#000000}}</nowiki></code>
| style="font-size: 95%"| <code><nowiki>{{Composition bar|50|100|#99F|width=85%}}</nowiki></code>
| {{Composition bar|50|100|red|color=#FFFFFF|background-color=#000000}}
| {{Composition bar|50|100|#99F|width=85%}}
⚫
|-
⚫
| style="font-size: 95%"| <code><nowiki>{{Composition bar|50|100|#9999FF}}</nowiki></code>
⚫
| {{Composition bar|50|100|#9999FF}}
|-
|-
| 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 42: 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=250}}</nowiki></code>
| style="font-size: 95%"| <code><nowiki>{{Composition bar|75|100|#FF0}}</nowiki></code>
| {{Composition bar|75|100|#FF0|width=250}}
| {{Composition bar|75|100|#FF0}}
|-
|-
| style="font-size: 95%"| <code><nowiki>{{Composition bar|90|100|#F00|width=500|per=1}}</nowiki></code>
| style="font-size: 95%"| <code><nowiki>{{Composition bar|40|100|#F00|per=1}}</nowiki></code>
| {{Composition bar|90|100|#F00|width=500|per=1}}
| {{Composition bar|40|100|#F00|per=1}}
|-
|-
| style="font-size: 95%"| <code><nowiki>{{Composition bar|90|100|#F00|width=500|per=1|color=#FFFFFF}}</nowiki></code>
| style="font-size: 95%"| <code><nowiki>{{Composition bar|90|100|#F0F0F0|per=1|background-color=#F00}}</nowiki></code>
| {{Composition bar|90|100|#F00|width=500|per=1|color=#FFFFFF}}
| {{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>
⚫
| {{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 56: Line 67:


<templatedata>
<templatedata>

{
{
"description": "A composition bar.",
"description": "A composition bar.",
"params": {
"params": {
"Amount": {
"1": {
"label": "1",
"label": "1",
"description": "The number of sub-units.",
"description": "The number of sub-units.",
Line 66: Line 76:
"required": true
"required": true
},
},
"Total": {
"2": {
"label": "2",
"label": "2",
"description": "The total number of sub-units possible.",
"description": "The total number of sub-units possible.",
Line 72: Line 82:
"required": true
"required": true
},
},
"Bar Color": {
"3": {
"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": "#CCC",
"default": "#CCCCCC",
"type": "string/line",
"type": "string/line",
"required": false
"required": false,
⚫
"aliases": ["hex"]
},
},
"Text color": {
"background-color": {
"label": "color",
"label": "Background color",
"description": "The text colour - a valid web color.",
"description": "The background color of the right part of the bar - a valid web color.",
"default": "#000",
"default": "transparent",
"type": "string/line",
"type": "string/line",
"required": false
"required": false
},
},
"Background color": {
"border": {
"label": "background-color",
"label": "Border color",
"description": "The background color of the right part of the bar - a valid web color.",
"description": "The color of the border, or 'none' for no border",
"default": "#F0F0F0",
"default": "#AAAAAA",
"type": "string/line",
"type": "string/line",
"required": false
"required": false,
⚫
"aliases": ["border-color"]
},
},
"Width": {
"width": {
"label": "width",
"label": "Width",
"description": "The width of the bar in px.",
"description": "The width of the bar with units, such as 100% or 10em (unitless numbers are interpreted as px)",
"default": "100px",
"default": "100px",
"type": "string/line",
"type": "string/line",
"required": false
"required": false
},
},
"Show Percent": {
"per": {
"label": "per",
"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
},
"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 123: Line 121:
}
}
}
}

</templatedata>
</templatedata>



== See also ==
== See also ==
⚫
* {{tl|Bartable}}
* {{tl|Bar chart}}
* {{tl|Bar chart}}
* {{t1|Backlog progress bar}}
* {{tl|Composition_bar/advanced}}
* {{tl|Percentage bar}}
* {{tl|Percent-done}}
⚫
* {{tl|Progress}}
⚫
* {{tl|Progress bar}}
* {{tl|Progress box}}
* {{tl|Progression}}
* {{tl|Progress meter}}


⚫
{{Progress templates}}
⚫
<includeonly>

<!-- CATEGORIES AND INTERWIKIS HERE, THANKS -->
<includeonly>{{When on basepage
[[Category:Template implementation details]]
| <!-- Categories below this line; interwikis at Wikidata -->
⚫
[[Category:Graphic templates]]
[[Category:Chart, diagram and graph templates]]
⚫
</includeonly>
⚫
[[Category:Wikipedia progress templates]]
⚫
}}</includeonly>

Latest revision as of 21:11, 19 May 2021

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
{{Composition bar|50|100|red|background-color=#DDD|border=none}}
50 / 100
{{Composition bar|50|100|#99F|width=85%}}
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}}
75 / 100
{{Composition bar|40|100|#F00|per=1}}
40 / 100 (40%)
{{Composition bar|90|100|#F0F0F0|per=1|background-color=#F00}}
90 / 100 (90%)
{{Composition bar|90|100|#F0C|per=1}}
90 / 100 (90%)
{{Composition bar|0|26|hex=#00BFFF|per=1}}
0 / 26 (0%)

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


Retrieved from "https://civwiki.org/wiki/Template:Composition_bar/doc?oldid=33163"