Pasos

Guía al usuario para completar una tarea siguiendo un flujo; admite horizontal / vertical, navegación clickeable y sobrescritura global del estado.

Uso básico

Uso básico

1. Boceto

   Definir composición y líneas
2. Difuminar

   Difuminar la tinta por capas
3. 3
   Color

   Aplicar los colores danqing
4. 4
   Inscribir

   Firmar y sellar para terminar

1. ✕
   Boceto
2. ✕
   Difuminar
3. ✕
   Color

   Aquí hay que rehacer
4. ✕
   Inscribir

1. ✓
   Boceto

   Definir composición y líneas
2. 2
   Difuminar

   Difuminar la tinta por capas
3. 3
   Color
4. 4
   Inscribir

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="Boceto" description="Definir la composición y las líneas" />
      <LhStep title="Difuminado" description="Difuminar la tinta por capas" />
      <LhStep title="Color" description="Aplicar los colores danqing" />
      <LhStep title="Inscripción" description="Firmar y sellar la obra terminada" />
    </LhSteps>
  )
}

Props de Steps

Prop	Descripción	Tipo	Opciones	Predeterminado
current	Índice del paso actual (desde 0, controlado)	number	—	—
defaultCurrent	Paso actual predeterminado (no controlado)	number	—	0
direction	Dirección	'horizontal' | 'vertical'	—	'horizontal'
clickable	Si los pasos permiten navegar con clic	boolean	—	false
status	Estado que sobrescribe a todos los pasos (para visualización personalizada)	'wait' | 'process' | 'finish' | 'error'	—	—
themeVars	Variables de tema a nivel de componente (las claves reciben automáticamente el prefijo --lh-)	Record<string, string>	—	—
sx	Propiedad abreviada de diseño	SxProps	—	—

Props de Step

Prop	Descripción	Tipo	Predeterminado
title	Título del paso	ReactNode	—
description	Descripción del paso	ReactNode	—
icon	Nombre de icono personalizado (si no se pasa, finish / error usan palomita / cruz y los demás muestran el número de orden)	LhIconName	—

Eventos de Steps

Evento	Descripción	Firma del callback	Equivalente en Vue
onChange	Se dispara cuando cambia el paso actual (solo cuando clickable está activo)	(index: number) => void	@change

Controlado / no controlado

Pasar current es modo controlado (el componente no mantiene estado interno); pasar defaultCurrent usa el estado interno no controlado. onChange se dispara en ambos modos.

Zona clicable

Aunque clickable sea verdadero, solo los pasos «completados» y «en curso» se renderizan como <button>; los pasos futuros (estado wait) siempre son <span>, para evitar saltar a nodos del flujo aún no alcanzados, igual que en lh-ui-plus.

Restricción de los nodos hijos

children deben ser directamente LhStep (se pueden renderizar con .map); no pueden estar envueltos por componentes personalizados, ya que el componente padre inyecta el índice filtrando los tipos de los subelementos con Children.toArray: envolverlos haría fallar la inyección del índice y desordenaría el cálculo de estados.

Variables de tema

Las claves de themeVars reciben automáticamente el prefijo --lh- y se escriben en el estilo en línea del elemento raíz:

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

Accesibilidad

La lista es un <ol role="list">; el paso actual emite aria-current="step", y el estado de cada paso se expresa con una combinación de aria-label (plantilla steps.step del paquete de idioma, p. ej. «Paso 2») y clases de estado.

ref

forwardRef<HTMLOListElement> — elemento raíz <ol>. LhStep reenvía HTMLLIElement.

Estilos

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