Template:CompositionBar: Difference between revisions
No edit summary Tag: Manual revert |
No edit summary |
||
| 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=" | <div class="composition-bar-wrapper" style=" | ||
{{#if:{{{width|}}}|width:{{{width}}};|width:100px;}} | {{#if:{{{width|}}}|width:{{{width}}};|width:100px;}} | ||
| Line 18: | Line 25: | ||
</div> | </div> | ||
</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 */ | |||
Revision as of 05:21, 24 July 2025
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
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:
<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 */
<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 */
Using Named Parameters (still supported):
<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 */
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.