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

From blackwiki
Jump to navigation Jump to search
imported>Matt Fitzpatrick
(updating parameters and examples)
imported>Matt Fitzpatrick
(updated templatedata)
Line 20: Line 20:
 
; color=...
 
; color=...
 
: (default is white) is the color of the text
 
: (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=...
 
; border-color=...
 
: (default is no border) is the color of a border around the bar
 
: (default is no border) is the color of a border around the bar
; text-shadow=...
 
: (default is black) is the color of the shadow around the text
 
 
; width=...
 
; width=...
 
: (default is 100%) is the width of the bar
 
: (default is 100%) is the width of the bar
Line 88: Line 88:
 
             "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": "#333",
 
             "type": "string/line",
 
             "type": "string/line",
 
             "required": false,
 
             "required": false,
             "aliases": ["hex"],
+
             "aliases": ["hex"]
 
         },
 
         },
         "Background color": {
+
         "background-color": {
             "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": "#F0F0F0",
+
             "default": "#999",
 +
            "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
 
         },
 
         },
         "Width": {
+
         "width": {
             "label": "width",
+
             "label": "Width",
             "description": "The width of the bar in px.",
+
             "description": "The width of the bar",
             "default": "100px",
+
             "default": "100%",
 
             "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
 +
        },
 +
        "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 05:50, 23 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.

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 very dark grey, nearly black) 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.
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=...
(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
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. 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|pink|color=#000|text-shadow=#FFF|background-color=#CCC}}
50 / 100
<div style="background-color: pink; width: Expression error: Unrecognized punctuation character "[".%; height: 100%;">
{{Composition bar|50|100|#99F|color=#000|text-shadow=#FFF|background-color=transparent|border-color=#336}}
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=80%}}
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=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|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
#333
Lineoptional
Background colorbackground-color

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

Default
#999
Lineoptional
Text colorcolor

The color of the overlay text

Default
#fff
Lineoptional
Text shadowtext-shadow

The color of the contrast shadow around the overlay text

Default
#000
Lineoptional
Show border colorborder-color

Specify a color to add a border of that color; default state is no border

Default
Lineoptional
Widthwidth

The width of the bar

Default
100%
Lineoptional
Show percentper

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

Default
0
Lineoptional
Percent styleperstyle

Style declarations for the percentage text

Default
Lineoptional

See also

Template:Progress templates