Sur cette page
Stepper Item
AlphaReprésente une étape ou sous-étape individuelle dans un ar-stepper.
Ce composant doit être utilisé en tant qu'enfant de <ar-stepper>.
Merci de voir la documentation du composant ar-stepper pour voir les exemples d'utilisation.
Si vous utilisez l'autoloader, les composants détectés dans la pages sont chargés automatiquement, donc pas besoin de les importer individuellement.
Pour un import manuel, voici comment vous y prendre.
Importez ce composant depuis le CDN.
<script type="module" src="https://unpkg.com/@ariane-ui/core/dist/components/stepper-item/index.js"></script>Après avoir installé le paquet via npm, vous pouvez importer le composant ainsi :
import '@ariane-ui/core/dist/components/stepper-item/index.js';Attributs et propriétés
Identifiant de l'étape : `current-path` d'`ar-stepper` le désigne pour en faire l'étape courante, et il est transmis dans `detail` (`from`, `to`) des événements de navigation.
Libellé de l'étape, rendu dans la part `label` : le choisir descriptif (« Mes informations » plutôt que « Étape 1 »).
Destination de l'étape cliquable : une URL réelle produit un lien `<a>` (navigation native), une valeur absente ou `#` produit un `<button>` (navigation par l'événement seulement).
Slots
Contenu additif affiché à côté du label (ex. icône de statut) — n'affecte jamais le texte du label lui-même, toujours lu séparément (voir `aria-describedby`).
Remplace le contenu par défaut (numéro d'étape via compteur CSS) de l'indicateur visuel (ex. icône de statut). Purement décoratif (`aria-hidden`) — l'information accessible de position est toujours portée séparément par le texte masqué visuellement.
CSS Parts
Utilisez ::part(name) pour styler ces éléments depuis l'extérieur.
Certaines parts indiquent un rôle transverse, partagé avec d'autres composants — voir Personnalisation avancée.
Certaines parts portent un modificateur d'état (--) — voir Personnalisation avancée.
Le contrôle cliquable de l'étape (présent uniquement quand l'étape est cliquable) : un `<a>` si `href` est une destination réelle, un `<button>` sinon (`href` absent ou `#`).
Porté par `step-link`, ou par le conteneur non cliquable : élément interactif générique.
Le marqueur visuel de l'étape (numéro par défaut, ou contenu du slot `indicator`).
Le marqueur visuel de l'étape courante (variante d'état de `indicator`).
Le marqueur visuel d'une étape complétée (variante d'état de `indicator`).
Le texte du label.
Le texte du label quand l'étape est cliquable (variante d'état de `label`).
Le conteneur `role="list"` des sous-étapes, quand cette étape en affiche.
CSS Custom Properties
Couleur des labels des étapes non courantes.
Couleur du texte de l'étape courante rendue comme élément non cliquable (sans lien).
Couleur du label de l'étape au survol/focus (cascade vers --ar-color-text).
Couleur de l'anneau de focus du lien d'étape (cascade vers --ar-color-interactive).