మూస:Composition bar compact/doc పేజీ సోర్సు చూడండి

{{Documentation subpage}}
<!-- Categories go where indicated at the bottom of this page, please; interwikis go to Wikidata (see also: [[Wikipedia:Wikidata]]) -->

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

== Usage ==
 <nowiki>{{</nowiki>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 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 {{party color|tld|political party}} templates.

Additional display options:
; background-color=...
: (default is light grey) is the background color of the right part of the bar - a valid [[web colors|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. [http://snook.ca/technical/colour_contrast/colour.html Snook's Colour Contrast Check] may be used to check compliance with [[WCAG]] guidelines for contrast.

== Examples ==
{| 
|-
! Code !! Result
|-
| style="font-size: 95%"| <code><nowiki>{{Composition bar compact|50|100|red}}</nowiki></code>
| {{Composition bar compact|50|100|red}}
|-
| style="font-size: 95%"| <code><nowiki>{{Composition bar compact|50|100|darkred|color=#FFF|text-shadow=#000|background-color=#333}}</nowiki></code>
| {{Composition bar compact|50|100|darkred|color=#FFF|text-shadow=#000|background-color=#333}}
|-
| style="font-size: 95%"| <code><nowiki>{{Composition bar compact|50|100|#003|color=#FFF|text-shadow=#000|background-color=#333|border-color=#C33}}</nowiki></code>
| {{Composition bar compact|50|100|#003|color=#FFF|text-shadow=#000|background-color=#333|border-color=#C33}}
|-
| style="font-size: 95%"| <code><nowiki>{{Composition bar compact|50|100|{{party color|Green Party (UK)}}|border=none}}</nowiki></code>
| {{Composition bar compact|50|100|{{party color|Green Party (UK)}}|border=none}}
|-
| style="font-size: 95%"| <code><nowiki>{{Composition bar compact|50|100|rgb(255,255,16)|width=auto}}</nowiki></code>
| {{Composition bar compact|50|100|rgb(255,255,16)|width=auto}}
|-
| style="font-size: 95%"| <code><nowiki>{{Composition bar compact|75|100|#FF0|width=80%}}</nowiki></code>
| {{Composition bar compact|75|100|#FF0|width=80%}}
|-
| style="font-size: 95%"| <code><nowiki>{{Composition bar compact|40|100|#F00|per=1}}</nowiki></code>
| {{Composition bar compact|40|100|#F00|per=1}}
|-
| style="font-size: 95%"| <code><nowiki>{{Composition bar compact|90|100|#F0F0F0|per=2|background-color=#F00}}</nowiki></code>
| {{Composition bar compact|90|100|#F0F0F0|per=2|background-color=#F00}}
|-
| style="font-size: 95%"| <code><nowiki>{{Composition bar compact|90|100|#F0C|per=1}}</nowiki></code>
| {{Composition bar compact|90|100|#F0C|per=1}}
|}

== TemplateData ==
{{TemplateDataHeader}}

<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 {{party color|political party}} 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
        }
    }
}
</templatedata>

== See also ==
* {{tl|Bartable}}
* {{tl|Bar chart}}

{{Progress templates}}

<includeonly>{{When on basepage
| <!-- Categories go below this line, please; interwikis go to Wikidata, thank you! -->
[[Category:Chart, diagram and graph templates]]
[[Category:Wikipedia progress templates]]
}}</includeonly>