Template:CompositionBar
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:
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:Template loop detected: Template:CompositionBar
Template loop detected: Template:CompositionBar Using Named Parameters (still supported):Template loop detected: Template:CompositionBar
== 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><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>
</includeonly
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:Template loop detected: Template:CompositionBar
Template loop detected: Template:CompositionBar Using Named Parameters (still supported):Template loop detected: Template:CompositionBar
== 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><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>
</includeonly Using Named Parameters (still supported):
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:Template loop detected: Template:CompositionBar
Template loop detected: Template:CompositionBar Using Named Parameters (still supported):Template loop detected: Template:CompositionBar
== 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><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>
</includeonly
== 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.