Steps Component

Tunnel de commande

En daisyUI brut, il faut poser step-primary à la main sur chaque étape franchie. Ici c'estcurrent qui pilote — avec trois couleurs distinctes, pour que « franchie », « en cours » et « à venir » ne se confondent pas.

1. Panier
2. Livraison
3. Paiement
4. Confirmation

daisyUI ne teinte le trait de liaison qu'entre deux étapes de même couleur : donner une couleur propre à l'étape en cours ramènerait donc le segment qui y mène au gris, terminant la barre une étape trop tôt alors que ce chemin a bien été parcouru. Le trait qui rejoint l'étape en cours est donc coloré avec color, indépendamment de la pastille — la barre va jusqu'où l'utilisateur en est, et seule la pastille marque l'état.

Les libellés des étapes déjà franchies sont cliquables — retour en arrière. Les suivantes ne le sont pas. L'étape en cours portearia-current="step".

Contenu de la pastille

Trois mécanismes qui s'excluent : le compteur CSS par défaut,content qui alimentedata-content, ouicon qui remplace la pastille — dès qu'une icône est là, le pseudo-élément et son compteur s'effacent.

La pastille étant générée par le CSS, elle n'est ni sélectionnable ni annoncée de façon fiable : c'est le libellé qui doit porter le sens, jamais le numéro.

Direction

1. Panier
2. Livraison
3. Paiement
4. Confirmation

Et la forme responsive, via le même helper que les tailles deTabs :direction={{ xs: 'vertical', lg: 'horizontal' }}. Empilé sur mobile — ce qui vaut mieux qu'un défilement latéral, puisque.steps est enoverflow: auto hidden.

1. Panier
2. Livraison
3. Paiement
4. Confirmation

Couleurs libres

Sans current, aucune couleur n'est imposée : chaque étape porte la sienne. C'est le mode « brut », utile pour un état qui n'est pas une progression linéaire.

1. Aller sur la lune
2. Rétrécir la lune
3. Attraper la lune
4. Échec