Statut
Component checklist
Usage
<dsa-stepper>
<dsa-step status="default"></dsa-step>
</dsa-stepper>
<script type="text/typescript">
import '@ds-autonomie/web-components/dist/components/step/step.js';
import '@ds-autonomie/web-components/dist/components/stepper/stepper.js';
import type { DSAStep } from '@ds-autonomie/web-components/';
import type { DSAStepper } from '@ds-autonomie/web-components/';
</script>
API
Attributs et propriétés
|
Propriété attribut |
Description |
Type |
Valeur par défaut |
|---|---|---|---|
|
clickable |
Activez cette option pour rendre l'étape cliquable. Dans ce cas, l'étape doit avoir un titre. |
boolean |
false |
|
content
|
Le contenu de l'étape. Pour afficher du HTML, utilisez le slot content |
boolean |
false |
|
href |
Si cet attribut est défini, l'étape est rendue en tant que <a> (plutôt qu'un button) avec le href fourni |
string |
’’ |
|
index
|
L'index de l'étape, permettant l'affichage de l'étape numérotée. (ex: Étape {index}). Intégré au composant dsa-stepper, la propriété index est héritée par celui-ci. |
number undefined |
undefined |
|
rel |
Lors de l'utilisation de href, cet attribut correspondra à l'attribut rel du lien sous-jacent. Contrairement aux liens ordinaires, la valeur par défaut est noreferrer noopener pour des raisons de sécurité. Cependant, si vous utilisez target pour pointer vers un onglet ou une fenêtre spécifique, cela empêchera le fonctionnement correct. Il faudra supprimer ou modifier la valeur par défaut avec une chaîne vide ou à une valeur de votre choix |
string |
'noreferrer noopener' |
|
status |
Le statut de l'étape |
error default in-progress complete active
|
default |
|
stepTitle step-title |
Le titre de l'étape. Pour afficher du HTML, utilisez le slot title |
string |
'' |
|
target |
Indique au navigateur où ouvrir le lien. Seulement utilisé lorsque href est présent |
'_blank' | '_parent' | '_self' | |
|
|
vertical |
Activez cette option pour mettre l'étape en mode vertical. Intégré au composant dsa-stepper, la propriété vertical est héritée par celui-ci. |
boolean |
false |