Template:CompositionBar: Difference between revisions

@@ 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
-{{#tag:syntaxhighlight|
-<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>
-Example:
-{{CompositionBar|75|100|#3498db|#e0e0e0|width=400px}}
-{{CompositionBar|15|20|#28a745|#f0f0f0|2px dashed purple|per=yes|width=200px|float=right|text_color=black}}
-{{CompositionBar
-| amount = 75
-| total = 100
-| color = #3498db
-| background_color = #e0e0e0
-| width = 400px
-}}

Latest revision as of 05:34, 24 July 2025