Template:Composition bar compact

From TalossaWiki
Jump to navigation Jump to search

This template displays the numeric composition of a thing in terms of its sub-units. For example, it is frequently used to show the number of seats a given political party holds in a legislature.

This was imported in an attempt to make a composition bar that wasn't always red. Apparently that's illegal on this wiki, though.

Usage

{{Composition bar compact|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 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.

Examples

Code Result
{{Composition bar compact|25|100|bar-color=blue}}
{{Composition bar compact|50|100|bar-color=blue|color=#FFF|text-shadow=#000|background-color=#333}}
{{Composition bar compact|50|100|#003|color=#FFF|text-shadow=#000|background-color=#333|border-color=#C33}} 50 / 100
{{Composition bar compact|50|100|rgb(255,255,16)|width=auto}} 50 / 100
{{Composition bar compact|75|100|#FF0|width=80%}} 75 / 100
{{Composition bar compact|40|100|#F00|per=1}} 40 / 100(Expression error: Unrecognized punctuation character "[".%)
{{Composition bar compact|90|100|#F0F0F0|per=2|background-color=#F00}} 90 / 100(Expression error: Unrecognized punctuation character "[".%)
{{Composition bar compact|90|100|#F0C|per=1}} 90 / 100(Expression error: Unrecognized punctuation character "[".%)

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 Template:Party color 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
       }
   }