Pasos

Guía al usuario a través de procesos paso a paso. Direcciones horizontal y vertical, navegación pulsable y sobrescritura del estado global.

Pasos

<template>
  <div class="demo-col" style="max-width: 680px; gap: 28px">
    <LhSteps :current="current">
      <LhStep title="Captura" description="Escaneado de alta definición y archivo" />
      <LhStep title="Corrección de color" description="Comparación con la referencia de color" />
      <LhStep title="Revisión" description="Verificación por expertos" />
      <LhStep title="Publicación" description="Puesta en línea de la galería digital" />
    </LhSteps>
    <div class="demo-row" style="gap: 12px">
      <LhButton size="small" :disabled="current === 0" @click="current--">Anterior</LhButton>
      <LhButton size="small" type="primary" :disabled="current === 3" @click="current++">Siguiente</LhButton>
    </div>
    <LhSteps :current="2" direction="vertical">
      <LhStep title="Captura" description="Completado" />
      <LhStep title="Corrección de color" description="Completado" />
      <LhStep title="Revisión" description="En curso" />
      <LhStep title="Publicación" description="Pendiente" />
    </LhSteps>
    <LhSteps :current="1" status="error" :clickable="true" @click="onStepClick">
      <LhStep title="Primer paso" />
      <LhStep title="Paso con error" icon="lh-icon-user" />
      <LhStep title="Tercer paso" />
    </LhSteps>
    <p class="demo-note">clickable permite la navegación al pulsar; status="error" sobrescribe el estado global; icon personaliza el icono.</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    current: 1,
  }),
  methods: {
    onStepClick(index) {
      this.current = index
    },
  },
}
</script>

Steps Props

Prop	Descripción	Tipo	Predeterminado
current	Índice del paso actual (:current.sync, evento update:current; comienza en 0)	number	0
direction	Dirección	'horizontal' \| 'vertical'	'horizontal'
clickable	Si los pasos permiten la navegación al pulsarlos	boolean	false
status	Estado que sobrescribe el de todos los pasos (para una visualización personalizada)	'wait' \| 'process' \| 'finish' \| 'error'	—
sx	Prop abreviada de maquetación	—	—

Step Props

Prop	Descripción	Tipo	Predeterminado
title	Título del paso (también admite el slot title)	string	—
description	Descripción del paso (también admite el slot description)	string	—
icon	Nombre de clase del icono personalizado (si no se pasa, finish/error muestran palomita y cruz respectivamente; los demás muestran el número de orden)	string	—

Events

Evento	Descripción	Parámetros del callback
click	Al pulsar un paso (solo es relevante con clickable activado)	(índice)