merisia-stepper
<merisia-stepper>
Indicateur de progression pour formulaires multi-étapes avec
aria-current="step".
Démos
Étape 1 (début)
<merisia-stepper id="stepper" current="0"></merisia-stepper>
<script>
document.getElementById('stepper').steps = [
{ label: 'Vos coordonnées', description: 'Nom, adresse et contact' },
{ label: 'Votre itinéraire', description: 'Origine, destination, mode de transport' },
{ label: 'Confirmation', description: 'Vérification et soumission' },
];
</script>Étape 2 (milieu)
Étape 3 (dernière)
Propriétés
| Propriété | Attribut | Type | Défaut | Description |
|---|---|---|---|---|
| MerisiaStepper (propres) | ||||
| steps | – | StepperStep[] | [] |
Liste des étapes : { label, description? } (propriété JS uniquement)
|
| current | current | number | 0 | Index de l'étape active (0-based) |
| orientation | orientation | 'vertical' | 'horizontal' | 'vertical' | Disposition des étapes |
| navLabel | nav-label | string | 'Progression' | Libellé accessible de la navigation (i18n) |
| MerisiaElement (hérités) | ||||
| id | id | string | auto-généré | Identifiant unique du composant |
| lang | lang | string | 'fr' | Langue pour les messages internes (i18n) |
| width | width | number | – |
Largeur maximale en caractères : max-width: calc(N ch + 1.5rem)
|
Import
import '@merisia-inc/merisia-components/stepper';