Benchmark bar<mds-benchmark-bar>Generato da @maggioli-design-system/magma@2.3.0dist/documentation.json. Incapsulamento: shadow.
Questa pagina è generata dai pacchetti Magma, documentati solo in inglese.
Il primo esempio della pagina Pattern, dal vivo. Cambia le sue proprietà qui sotto e l'anteprima le segue; Ripristina riporta l'esempio com'era.
Proprietà
sizeenumSets the size of the component
typographyenumThe typography of the component
variantenumSets the theme variant colors
aliasstringAn alias to custom how value is represented
labelstringThe label of the benchmark bar
valuenumberA value between 0 and 100 that rapresents the benchmark
Panoramica
The <mds-benchmark-bar> web component is a read-only data-visualization element of the Magma Design System that pairs a labelled caption with a horizontal progress bar to express a single benchmark value on a 0-100 scale. It is a presentational compound that composes <mds-text> and <mds-progress>; it has no native HTML primitive equivalent.
Semantic Behavior
Display-only: The component is non-interactive - it emits no events, has no form association, and is not part of the tab sequence.Text-only label: The label caption is meant to carry a plain text string, not markup; the label prop is the supported source of that text.Deprecated default slot: Slotted text is still read as a legacy fallback, but only when label is empty - once label is set it always wins. HTML elements or components in the slot are unsupported.Shadow part: The inner progress bar is exposed as the progress-bar part for external styling.
Properties & Visual Configurations
value drives both the rendered value text and the fill of the progress bar; supply it on a 0-100 scale.alias overrides how the value is displayed: when present it replaces the numeric value in the caption (and in the announced value), letting you show formatted or qualitative text (e.g. a graded label) instead of the raw number.typography selects the text scale applied to both the label and value captions, choosing between 'label' (the default, larger caption) and 'option' (smaller, for compact contexts).The shared variant and size ladders are defined in agents/variants.md; variant sets the progress bar theme colors (defaulting to 'dark'), and size controls the progress bar height (defaulting to 'md'). This component does not add values beyond the shared sets.