Template:Composition bar compact/doc

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. It is a one-line variation of the two-line, fixed width Template:Composition bar.

Usage

 * amount
 * The first parameter is the number of sub-units.


 * total
 * The second parameter is the total number of sub-units possible.

In the case of political parties, most will have their logo color available in templates.
 * bar-color
 * (default is medium-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)).

Additional display options:
 * background-color=...
 * (default is light grey) is the background color of the right part of the bar - a valid web color.


 * color=...
 * (default is inherit) is the color of the text


 * text-shadow=...
 * (default is white) is the color of the shadow around the text


 * border=...
 * (default is medium grey) is the color of a border around the bar, or "none" for no border


 * width=...
 * (default is 100px) is the width of the bar, set to "auto" for inline use, "100%" for most table uses (unitless numbers are interpreted as px)


 * 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 dark, lighten the text color, and darken 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.

TemplateData
{   "description": "A composition bar.", "params": { "1": {           "label": "1", "description": "The number of sub-units.", "type": "string/line", "required": true },       "2": {            "label": "2", "description": "The total number of sub-units possible.", "type": "string/line", "required": true },       "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  templates.", "default": "#CCCCCC", "type": "string/line", "required": false, "aliases": ["hex"] },       "background-color": { "label": "Background color", "description": "The background color of the right part of the bar - a valid web color.", "default": "#F0F0F0", "type": "string/line", "required": false },       "color": { "label": "Text color", "description": "The color of the overlay text", "default": "inherit", "type": "string/line", "required": false },       "text-shadow": { "label": "Text shadow", "description": "The color of the contrast shadow around the overlay text", "default": "#FFFFFF", "type": "string/line", "required": false },       "border": { "label": "Border color", "description": "Color of the border, or 'none' for no border", "default": "#C0C0C0", "type": "string/line", "required": false, "aliases": ["border-color"] },       "width": { "label": "Width", "description": "The width of the bar (unitless numbers are interpreted as px)", "default": "100px", "type": "string/line", "required": false },       "per": { "label": "Show percent", "description": "When set to 1 (true), adds a percentage to the bar as well", "default": "0", "type": "string/line", "required": false },       "perstyle": { "label": "Percent style", "description": "Style declarations for the percentage text", "default": "", "type": "string/line", "required": false }   } }