Étapes

Guide l'utilisateur dans l'accomplissement d'une tâche selon un flux : horizontal / vertical, navigation par clic et recouvrement global de l'état.

Utilisation de base

Utilisation de base

1. Esquisse

   Définir la composition et les lignes
2. Estomper

   Estomper l'encre par couches
3. 3
   Couleur

   Appliquer les couleurs danqing
4. 4
   Inscrire

   Signer et sceller pour finir

1. ✕
   Esquisse
2. ✕
   Estomper
3. ✕
   Couleur

   À retravailler ici
4. ✕
   Inscrire

1. ✓
   Esquisse

   Définir la composition et les lignes
2. 2
   Estomper

   Estomper l'encre par couches
3. 3
   Couleur
4. 4
   Inscrire

import { useState } from 'react'
import { LhSteps, LhStep } from '@lh-ui/react'

export default function Demo() {
  const [current, setCurrent] = useState(1)

  return (
    <LhSteps current={current} onChange={(index) => setCurrent(index)}>
      <LhStep title="Esquisse" description="Définir la composition et les lignes" />
      <LhStep title="Lavis" description="Étendre l'encre par couches" />
      <LhStep title="Couleurs" description="Poser les couleurs du danqing" />
      <LhStep title="Inscription" description="Apposer la signature et le sceau" />
    </LhSteps>
  )
}

Steps Props

Prop	Description	Type	Options	Valeur par défaut
current	Index de l'étape courante (à partir de 0, contrôlé)	number	—	—
defaultCurrent	Étape courante par défaut (non contrôlée)	number	—	0
direction	Direction	'horizontal' | 'vertical'	—	'horizontal'
clickable	Étapes cliquables pour la navigation	boolean	—	false
status	État global recouvrant toutes les étapes (pour un affichage personnalisé)	'wait' | 'process' | 'finish' | 'error'	—	—
themeVars	Variables de thème au niveau du composant (préfixe --lh- ajouté automatiquement)	Record<string, string>	—	—
sx	Raccourci de mise en page	SxProps	—	—

Step Props

Prop	Description	Type	Valeur par défaut
title	Titre de l'étape	ReactNode	—
description	Description de l'étape	ReactNode	—
icon	Nom de l'icône personnalisée (en l'absence de valeur, finish / error utilisent la coche et la croix, les autres affichent le numéro)	LhIconName	—

Événements de Steps

Événement	Description	Signature du callback	Équivalent Vue
onChange	Déclenché au changement d'étape courante (uniquement lorsque clickable est activé)	(index: number) => void	@change

Contrôlé / non contrôlé

Passer current rend le composant contrôlé (il ne détient pas d'état interne) ; passer defaultCurrent s'appuie sur un état interne non contrôlé. onChange se déclenche dans les deux modes.

Zone cliquable

Même lorsque clickable est vrai, seules les étapes « terminées » et « en cours » sont rendues en <button> ; les étapes futures (état wait) restent des <span> afin d'éviter de sauter vers des nœuds du flux non encore atteints — conformément au comportement de lh-ui-plus.

Contrainte sur les enfants

children doit être directement composé de LhStep (un rendu via .map est possible), sans être encapsulé par un composant personnalisé — le composant parent s'appuie sur Children.toArray pour filtrer le type des enfants et y injecter l'index ; une encapsulation ferait échouer l'injection des index et déréglerait le calcul des états.

Variables de thème

Les clés de themeVars reçoivent automatiquement le préfixe --lh- et sont écrites dans le style en ligne de l'élément racine :

<LhSteps current={1} themeVars={{ 'steps-item-basis': '72px' }}>
  <LhStep title="Esquisse" />
  <LhStep title="Lavis" />
</LhSteps>

Accessibilité

La liste est un <ol role="list"> ; l'étape courante émet aria-current="step", et l'état de chaque étape est exprimé conjointement par aria-label (modèle steps.step du pack de langue, par exemple « Étape 2 ») et par les noms de classe d'état.

ref

forwardRef<HTMLOListElement> — l'élément <ol> racine. LhStep transmet HTMLLIElement.

Styles

import '@lh-ui/react/theme.css'
import '@lh-ui/react/style/steps'