Template:Composition bar compact: Difference between revisions
talk page consensus seems to be dark text on lighter background default |
additional lightening of default background colors for contrast |
||
| Line 1: | Line 1: | ||
<div role="img" class="nowrap" style="display: inline-block; position: relative; vertical-align: top; {{#ifeq:{{{width|}}}|auto||width: {{{width|100%}}};}} text-shadow: 0 0 0.2em {{{text-shadow|#fff}}}; {{#if:{{{color|}}}|color: {{{color}}};}} "><!-- |
<div role="img" class="nowrap" style="display: inline-block; position: relative; vertical-align: top; {{#ifeq:{{{width|}}}|auto||width: {{{width|100%}}};}} text-shadow: 0 0 0.2em {{{text-shadow|#fff}}}; {{#if:{{{color|}}}|color: {{{color}}};}} "><!-- |
||
--><div style="position: absolute; {{#if:{{{border-color|}}}|box-sizing: border-box; border: 1px solid {{{border-color|}}};}} width: 100%; height: 100%; background-color: {{{background-color|# |
--><div style="position: absolute; {{#if:{{{border-color|}}}|box-sizing: border-box; border: 1px solid {{{border-color|}}};}} width: 100%; height: 100%; background-color: {{{background-color|#ddd}}};"><!-- |
||
--><div style="background-color:{{#if:{{both|{{{4|}}}|{{{5|}}}}} |
--><div style="background-color:{{#if:{{both|{{{4|}}}|{{{5|}}}}} |
||
|rgb({{#expr:255*{{{3|255}}}}},{{#expr:255*{{{4|0}}}}},{{#expr:255*{{{5|0}}}}}) |
|rgb({{#expr:255*{{{3|255}}}}},{{#expr:255*{{{4|0}}}}},{{#expr:255*{{{5|0}}}}}) |
||
|{{{hex|{{{3|# |
|{{{hex|{{{3|#bbb}}}}}} |
||
}}; width: {{#expr:{{{1|50}}}/{{{2|100}}}*100}}%; height: 100%;"><!-- |
}}; width: {{#expr:{{{1|50}}}/{{{2|100}}}*100}}%; height: 100%;"><!-- |
||
--></div><!-- |
--></div><!-- |
||
Revision as of 23:57, 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. It is a one-line variation of the two-line, fixed width Template:Composition bar.
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)).
In the case of political parties, most will have their logo color available in Lua error in package.lua at line 80: module 'Module:Political party/T' not found. templates.
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|50|100|red}}
|
50 / 100 |
{{Composition bar compact|50|100|darkred|color=#FFF|text-shadow=#000|background-color=#333}}
|
50 / 100 |
{{Composition bar compact|50|100|#003|color=#FFF|text-shadow=#000|background-color=#333|border-color=#C33}}
|
50 / 100 |
{{Composition bar compact|50|100|{{party color|Green Party (UK)}}|border=none}}
|
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(40%) |
{{Composition bar compact|90|100|#F0F0F0|per=2|background-color=#F00}}
|
90 / 100(90%) |
{{Composition bar compact|90|100|#F0C|per=1}}
|
90 / 100(90%) |
TemplateData
TemplateData for Composition bar compact
A composition bar.
| Parameter | Description | Type | Status | |
|---|---|---|---|---|
| 1 | 1 | The number of sub-units. | Line | required |
| 2 | 2 | The total number of sub-units possible. | Line | required |
| 3 | 3 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 {{party color|political party}} templates.
| Line | optional |
| Background color | background-color | The background color of the right part of the bar - a valid web color.
| Line | optional |
| Text color | color | The color of the overlay text
| Line | optional |
| Text shadow | text-shadow | The color of the contrast shadow around the overlay text
| Line | optional |
| Border color | border border-color | Color of the border, or 'none' for no border
| Line | optional |
| Width | width | The width of the bar (unitless numbers are interpreted as px)
| Line | optional |
| Show percent | per | When set to 1 (true), adds a percentage to the bar as well
| Line | optional |
| Percent style | perstyle | Style declarations for the percentage text
| Line | optional |
See also
Progress templates | |
|---|---|
| General progress templates |
|
| Specific-use templates | |
