Pasos

Indicador de pasos de un flujo: cuatro estados (actual, completado, en espera, error), dirección horizontal o vertical y navegación por clic opcional. La barra horizontal ajusta el ancho de referencia fijo para saltar de línea automáticamente y el título siempre se muestra en una sola línea.

Uso básico

Moler la tinta
Posar el pincel
Estampar el sello

vue

<script setup lang="ts">
</script>

<template>
  <LhSteps :current="1">
    <LhStep title="Moler la tinta" />
    <LhStep title="Posar el pincel" />
    <LhStep title="Estampar el sello" />
  </LhSteps>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhSteps :current="1">
    <LhStep title="Moler la tinta" />
    <LhStep title="Posar el pincel" />
    <LhStep title="Estampar el sello" />
  </LhSteps>
</template>

Con descripción

Registro
Rellenar los datos básicos
Verificación
Verificación por correo y teléfono
Activación
Activar los permisos de la cuenta

vue

<script setup lang="ts">
</script>

<template>
  <LhSteps :current="1">
    <LhStep title="Registro" description="Rellenar los datos básicos" />
    <LhStep title="Verificación" description="Verificación por correo y teléfono" />
    <LhStep title="Activación" description="Activar los permisos de la cuenta" />
  </LhSteps>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhSteps :current="1">
    <LhStep title="Registro" description="Rellenar los datos básicos" />
    <LhStep title="Verificación" description="Verificación por correo y teléfono" />
    <LhStep title="Activación" description="Activar los permisos de la cuenta" />
  </LhSteps>
</template>

icon asigna un icono personalizado al paso (toma un nombre de icono interno de LhIcon, como user/check/star); si no se pasa, los estados completado y error usan la marca y la cruz, y los demás muestran el número de orden. Cuando se necesita personalizar por completo el renderizado del icono, se puede sobrescribir con el slot #icon.

Registro
Verificación
Activación

vue

<script setup lang="ts">
</script>

<template>
  <LhSteps :current="1">
    <LhStep icon="user" title="Registro" />
    <LhStep icon="check" title="Verificación" />
    <LhStep icon="star" title="Activación" />
  </LhSteps>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhSteps :current="1">
    <LhStep icon="user" title="Registro" />
    <LhStep icon="check" title="Verificación" />
    <LhStep icon="star" title="Activación" />
  </LhSteps>
</template>

Estado de error

Cargar
Validar
Completado

vue

<script setup lang="ts">
</script>

<template>
  <LhSteps :current="1" status="error">
    <LhStep title="Cargar" />
    <LhStep title="Validar" />
    <LhStep title="Completado" />
  </LhSteps>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhSteps :current="1" status="error">
    <LhStep title="Cargar" />
    <LhStep title="Validar" />
    <LhStep title="Completado" />
  </LhSteps>
</template>

status es una superposición global: una vez establecido, todos los pasos quedan en ese estado, lo que sirve para visualizaciones personalizadas.

Navegación por clic

Selección del borrador
Elegir el modelo base
Copia
Copia directa o de memoria
Montaje
Montar en la pared

Paso actual: 1

vue

<script setup lang="ts">
import { ref } from 'vue'
const current = ref(1)
</script>

<template>
  <LhSteps v-model:current="current" clickable>
    <LhStep title="Selección del borrador" description="Elegir el modelo base" />
    <LhStep title="Copia" description="Copia directa o de memoria" />
    <LhStep title="Montaje" description="Montar en la pared" />
  </LhSteps>
</template>

vue

<script>
export default {
  data() {
    return { current: 1 }
  },
}
</script>

<template>
  <LhSteps v-model:current="current" clickable>
    <LhStep title="Selección del borrador" description="Elegir el modelo base" />
    <LhStep title="Copia" description="Copia directa o de memoria" />
    <LhStep title="Montaje" description="Montar en la pared" />
  </LhSteps>
</template>

Dirección vertical

Inicio
Postura inicial con la punta oculta
Desarrollo
Trazo central hacia adelante
Cierre
Retorno del trazo final

vue

<script setup lang="ts">
</script>

<template>
  <LhSteps :current="1" direction="vertical">
    <LhStep title="Inicio" description="Postura inicial con la punta oculta" />
    <LhStep title="Desarrollo" description="Trazo central hacia adelante" />
    <LhStep title="Cierre" description="Retorno del trazo final" />
  </LhSteps>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhSteps :current="1" direction="vertical">
    <LhStep title="Inicio" description="Postura inicial con la punta oculta" />
    <LhStep title="Desarrollo" description="Trazo central hacia adelante" />
    <LhStep title="Cierre" description="Retorno del trazo final" />
  </LhSteps>
</template>

Ancho fijo y ajuste de línea

La barra de pasos horizontal se dispone según el ancho de referencia de --lh-steps-item-basis (160px por defecto): si caben en el contenedor, los pasos se reparten a partes iguales en una línea; si no caben, el paso entero salta a la línea siguiente, en lugar de empujar el título a un ajuste de línea. El título se muestra siempre en una sola línea y, si es demasiado largo, se trunca con puntos suspensivos; tras el ajuste de línea, la línea de conexión del último paso de la fila se oculta automáticamente, sin señalar el espacio en blanco del final de la fila.

Selección del borrador
Elegir el modelo base
Copia
Copia directa o de memoria
Inscripción
Firmar y estampar
Montaje
Montar en la pared

vue

<script setup lang="ts">
</script>

<template>
  <LhSteps :current="1">
    <LhStep title="Selección del borrador" description="Elegir el modelo base" />
    <LhStep title="Copia" description="Copia directa o de memoria" />
    <LhStep title="Inscripción" description="Firmar y estampar" />
    <LhStep title="Montaje" description="Montar en la pared" />
  </LhSteps>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhSteps :current="1">
    <LhStep title="Selección del borrador" description="Elegir el modelo base" />
    <LhStep title="Copia" description="Copia directa o de memoria" />
    <LhStep title="Inscripción" description="Firmar y estampar" />
    <LhStep title="Montaje" description="Montar en la pared" />
  </LhSteps>
</template>

En el ejemplo anterior el contenedor está limitado a 280px para forzar el ajuste de línea. Para cambiar el ritmo del ajuste de línea, sobrescribe steps-item-basis mediante themeVars (la clave recibe automáticamente el prefijo --lh-): <LhSteps :theme-vars="{ 'steps-item-basis': '220px' }">; también se puede configurar globalmente a través de componentTheme.steps en LhConfigProvider.

Steps API

LhSteps Props

Prop	Descripción	Tipo	Predeterminado
current	Índice del paso actual (`v-model:current`, a partir de 0)	`number`	`0`
direction	Dirección	`"horizontal" \| "vertical"`	`'horizontal'`
clickable	Si los pasos permiten la navegación por clic	`boolean`	`false`
status	Superposición del estado de todos los pasos (para visualizaciones personalizadas)	`"wait" \| "process" \| "finish" \| "error"`	—
themeVars	Variables de tema a nivel de componente (la clave recibe automáticamente el prefijo --lh-)	`{ [x: string]: string; }`	—
sx	Props de maquetación rápida sx	`LhSxProps`	—

LhSteps Events

Evento	Descripción	Parámetro
update:current	Cambio del paso actual (v-model)	`(index: number)`
change	Cambio del paso actual	`(index: number)`

LhStep Props

Prop	Descripción	Tipo	Predeterminado
title	Título del paso (también se puede usar el slot title)	`string`	`''`
description	Descripción del paso (también se puede usar el slot description)	`string`	`''`
icon	Nombre del icono personalizado (iconos internos de LhIcon; si no se pasa, finish/error usan la marca y la cruz, y los demás muestran el número de orden)	`LhIconName`	—

Slots

Slot	Descripción	Componente afín
default	Elementos de paso (lista de LhStep)	LhSteps
title	Título personalizado	LhStep
description	Descripción personalizada	LhStep
icon	Icono personalizado (sobrescribe el renderizado por defecto de la prop icon)	LhStep

Variables a nivel de componente

Las siguientes variables CSS definen sus valores predeterminados en .lh-steps y se pueden sobrescribir de forma global o a nivel de componente con themeVars (la clave recibe automáticamente el prefijo --lh-):

Variable	Descripción	Predeterminado
`--lh-steps-item-basis`	Ancho de referencia fijo de los pasos horizontales; cuando no caben en el contenedor, el ajuste de línea se hace según este ancho	`160px`

Accesibilidad

El contenedor es un <ol role="list">: el orden semántico es el orden del flujo
El paso actual recibe automáticamente aria-current="step"
Con clickable, la cabecera de los pasos completados o actuales es un <button> real y su aria-label procede del paquete de idioma (steps.finish / steps.error / steps.step); los pasos en espera no se pueden pulsar, para evitar guiar al usuario a saltarse etapas no alcanzadas
La línea de conexión se dibuja con un pseudoelemento, por lo que no entra en el árbol de accesibilidad

Definiciones de tipos

Las estructuras de tipos TypeScript que exporta este componente son las siguientes (extraídas automáticamente de packages/components/steps/src/types.ts y del código fuente de @lh-ui/share/core/*; despliega cada entrada para ver la definición completa; la descripción de los atributos está en la tabla de Props de arriba):

LhStepsProps

export interface LhStepsProps {
  /** Índice del paso actual (v-model:current, a partir de 0) */
  current?: number
  /** Dirección */
  direction?: LhStepsDirection
  /** Si los pasos permiten la navegación por clic */
  clickable?: boolean
  /** Superposición del estado de todos los pasos (para visualizaciones personalizadas) */
  status?: LhStepStatus
  /** Variables de tema a nivel de componente (la clave recibe automáticamente el prefijo --lh-, p. ej. `steps-item-basis`) */
  themeVars?: Record<string, string>
  /** Props de maquetación rápida sx */
  sx?: LhSxProps
}

LhStepProps

export interface LhStepProps {
  /** Título del paso (también se puede usar el slot title) */
  title?: string
  /** Descripción del paso (también se puede usar el slot description) */
  description?: string
  /** Nombre del icono personalizado (si no se pasa, finish/error usan la marca y la cruz, y los demás muestran el número de orden) */
  icon?: LhIconName
}

LhIconName _{(de @lh-ui/share/core/icon (svgs.ts))}

export type LhIconName = keyof typeof LH_ICON_SVGS_CONST

LhStepsDirection _{(de @lh-ui/share/core/steps)}

/**
 * Dirección de la barra de pasos
 */
export type LhStepsDirection = 'horizontal' | 'vertical'

LhStepStatus _{(de @lh-ui/share/core/steps)}

/**
 * Estado del paso
 */
export type LhStepStatus = 'wait' | 'process' | 'finish' | 'error'

Pasos ​

Uso básico ​

Con descripción ​

Estado de error ​

Navegación por clic ​

Dirección vertical ​

Ancho fijo y ajuste de línea ​

Steps API ​

LhSteps Props ​

LhSteps Events ​

LhStep Props ​

Slots ​

Variables a nivel de componente ​

Accesibilidad ​

Definiciones de tipos ​