|
|
| (9 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| <noinclude>
| |
| This template creates a single horizontal bar that visually represents a percentage or value relative to a total, similar to how the Wikipedia `Template:Composition_bar` can be used for a single metric.
| |
|
| |
|
| == Usage ==
| |
| To use this template, copy the following code to a page named `Template:CompositionBar` (or a similar name of your choice):
| |
|
| |
| ```wiki
| |
| <div class="composition-bar-wrapper" style="
| |
| {{#if:{{{width|}}}|width:{{{width}}};|width:100px;}}
| |
| {{#if:{{{float|}}}|float:{{{float}}};}}
| |
| margin-left:auto; margin-right:0; /* Default align right */
| |
| border:{{{5|{{{border_style|1px solid gray}}}}}};
| |
| ">
| |
| <div class="composition-bar-fill" style="
| |
| width:{{#expr: ({{{1|{{{amount|0}}}}} / {{{2|{{{total|100}}}}}}) * 100 round 0}}%;
| |
| background-color:{{{3|{{{color|#4CAF50}}}}}};
| |
| color:{{{text_color|white}}};
| |
| ">
| |
| <span class="segment-label">
| |
| {{#ifeq:{{{per|no}}}|yes
| |
| |{{{1|{{{amount|0}}}}}}/{{{2|{{{total|100}}}}}}
| |
| |{{#expr: ({{{1|{{{amount|0}}}}} / {{{2|{{{total|100}}}}}}) * 100 round 0}}%
| |
| }}
| |
| </span>
| |
| </div>
| |
| </div>
| |
|
| |
| Then, on any page where you want to add a composition bar, you can use either named parameters or the new positional parameters:
| |
|
| |
| Using Positional Parameters:
| |
|
| |
| {{CompositionBar|75|100|#3498db|#e0e0e0|width=400px}}
| |
|
| |
| {{CompositionBar|15|20|#28a745|#f0f0f0|2px dashed purple|per=yes|width=200px|float=right|text_color=black}}
| |
|
| |
| Using Named Parameters (still supported):
| |
|
| |
| {{CompositionBar
| |
| | amount = 75
| |
| | total = 100
| |
| | color = #3498db
| |
| | background_color = #e0e0e0
| |
| | width = 400px
| |
| }}
| |
|
| |
| == Parameters ==
| |
|
| |
| '''1 (amount)''': (Required) The current numeric value to be represented by the filled portion of the bar. (e.g., 50)
| |
|
| |
| '''2 (total)''': (Optional) The maximum possible value. Defaults to 100. (e.g., 100)
| |
|
| |
| '''3 (color)''': (Optional) The CSS color for the filled portion of the bar (e.g., red, #FF5733, blue). Defaults to #4CAF50.
| |
|
| |
| '''4 (background_color)''': (Optional) The CSS color for the unfilled portion of the bar. Defaults to #e0e0e0.
| |
|
| |
| '''5 (border_style)''': (Optional) Sets the CSS border for the entire bar container (e.g., 1px solid red, 2px dashed #333, none). Defaults to 1px solid gray.
| |
|
| |
| '''per''': (Optional) Set to yes to display the label as amount/total instead of a percentage. Defaults to no.
| |
|
| |
| '''width''': (Optional) Sets the overall width of the bar (e.g., 50%, 300px). Defaults to 100px.
| |
|
| |
| '''float''': (Optional) Floats the bar. Options: left, right, none. Useful with width.
| |
|
| |
| '''text_color''': (Optional) Sets the text color for the label displayed on the bar. Defaults to white.
| |
| </noinclude><includeonly>
| |
|
| |
| <style>
| |
| .composition-bar-wrapper {
| |
| /* Default width is 100px unless overridden by 'width' parameter /
| |
| margin: 1em auto; / Default center alignment /
| |
| font-size: 90%;
| |
| / Default border is 1px solid gray, controlled by template parameter /
| |
| border-radius: 5px;
| |
| overflow: hidden; / Ensures fill stays within bounds /
| |
| box-shadow: 0 2px 5px rgba(0,0,0,0.1);
| |
| box-sizing: border-box; / Include padding/border in width /
| |
| height: 25px; / Fixed height for the bar itself /
| |
| background-color: #e0e0e0; / Default background for the unfilled part /
| |
| position: relative; / For positioning the fill */
| |
| }
| |
|
| |
| .composition-bar-fill {
| |
| height: 100%;
| |
| text-align: center;
| |
| line-height: 25px; /* Vertically center the label /
| |
| color: white; / Default text color for the label */
| |