Progress<mds-progress>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à
directionenumSpecifies the direction of the progress bar, if horizonatl or vertical
sizeenumSets the size of the component
typographyenumThe typography of the component
variantenumSets the theme variant colors
stepsstringSets the steps that can be pronounced by accessibility technologies
progressnumberA value between 0 and 1 that rapresents the status progress
Panoramica
The <mds-progress> web component is the progress indicator of the Magma Design System, rendering the completion state of a determinate task as a bar or ring. It is the system equivalent of the native HTML <progress> element, exposing the appropriate progressbar role and ARIA value attributes natively.
Semantic Behavior
Spoken step text: As progress changes, the component maps the value onto the steps list and announces the matching label, so assistive technologies report a human-readable milestone rather than a raw number.Decorative opt-out: When the host carries aria-hidden="true" as it loads, all progressbar semantics are stripped so the indicator can be used as purely decorative chrome. The check runs once: adding or removing aria-hidden later does not strip or restore them.Radial delegation: With direction="radial" the rendering is delegated to mds-radial-progress, which carries the typography and the textual percentage; the bar directions render a single fill instead.
Properties & Visual Configurations
progress is the source of truth: a fractional value between 0 and 1 (not a percentage) that drives both the visual fill and the computed ARIA value.steps is a comma-separated string of milestone labels (default Italian: 'Inizio,Un quarto,Metà,Tre quarti,Fine'); the current progress is quantized across these labels to pick what screen readers announce. Provide labels that match the granularity of the task.typography ('option' | 'label') selects the type scale applied to the textual percentage shown inside the radial variant; it has no effect on the bar directions.
Other behavioral props
direction chooses the geometry: 'horizontal' and 'vertical' render a linear fill bar, while 'radial' renders a circular ring with a centered percentage via mds-radial-progress.variant takes primary (default), ai, the status values (info, success, warning, error) and the neutral dark / light, as described in agents/variants.md; size (sm default, md, lg, xl) sets the bar thickness.