Template:CompositionBar: Difference between revisions

From EarthMC
Jump to navigation Jump to search
No edit summary
(Replaced content with "{{formatnum:{{{1|50}}}}} / {{formatnum:{{{2|100}}}}}{{#if:{{{per|}}}| ({{#expr:(({{{1|50}}}/{{{2|100}}})*100) round 2}}%)}}{{{ref|}}} {{Documentation}}")
Tag: Replaced
Line 1: Line 1:
<noinclude>
{{formatnum:{{{1|50}}}}} / {{formatnum:{{{2|100}}}}}{{#if:{{{per|}}}| ({{#expr:(({{{1|50}}}/{{{2|100}}})*100) round 2}}%)}}{{{ref|}}}
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 ==
{{Documentation}}
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 /transition: width 0.5s ease-in-out; / Smooth animation for width changes /display: flex; / Use flexbox to center content /align-items: center; / Vertically center content /justify-content: center; / Horizontally center content /font-weight: bold;white-space: nowrap; / Prevent label from wrapping /overflow: hidden; / Hide overflowing label if segment is too small /text-overflow: ellipsis; / Add ellipsis if label is truncated /border-radius: 5px; / Ensure rounded corners for the fill */}.segment-label {/* No specific styles needed here, inherited from .composition-bar-fill */}</style><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}}%

Revision as of 05:32, 24 July 2025

50 / 100


Template:CompositionBar/doc
Retrieved from "https://wiki.earthmc.net/index.php?title=Template:CompositionBar&oldid=253173"