Stepper bar<mds-stepper-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à
navigationenumSpecifies the navigation type
itemsDonenumberSets the current item to the given index: 0 is none done, 1 is the first item done, last number + 1 is all items done
Panoramica
The <mds-stepper-bar> web component is the Magma Design System container that orchestrates a multi-step progress flow, coordinating a set of slotted <mds-stepper-bar-item> children and revealing the matching content panel for the active step. It has no native HTML equivalent; it composes a stepper indicator track with a switchable content region.
Semantic Behavior
Compound parent: It is the controlling parent of <mds-stepper-bar-item> children placed in the default slot, driving every child’s done/current state - children do not manage their own progression.Active step derivation: From itemsDone it marks all earlier items as done, the item at the current index as current, and clears the rest; the active step is itemsDone - 1.Content synchronization: Each slot="content" element is paired by position to a stepper item; only the panel matching the current index is shown. The other panels get the hidden class, so the page needs a .hidden { display: none } rule (the Tailwind utility provides it).No child-driven navigation: It listens for mdsStepperBarItemDone, but <mds-stepper-bar-item> never emits it, so clicking a step does not change the current step: progress is driven by itemsDone only.Auto-scroll: When a step becomes current the indicator track scrolls horizontally to center the active item.Change event: It emits mdsStepperBarChange when it loads and whenever itemsDone changes, with a detail of the active step index and a comma-joined value string collected from the completed items.
Properties & Visual Configurations
itemsDone is the controlled entry point for progress: 0 means no step completed, 1 activates the first step, and last + 1 marks the whole flow complete. Treat it as the single source of truth for which step is current rather than mutating children directly.
Other behavioral props
navigation selects how the indicator track is traversed: 'none' (default) keeps the track static, while 'scrollbar' exposes a horizontal scrollbar (styleable through the --mds-stepper-bar-scrollbar-* custom properties) for flows with many steps.