Étapes

Guide l'utilisateur à travers un processus en plusieurs étapes. Direction horizontale / verticale, navigation par clic et surcharge des statuts.

Étapes

<template>
  <div class="demo-col" style="max-width: 680px; gap: 28px">
    <LhSteps :current="current">
      <LhStep title="Acquisition" description="Numérisation HD archivée" />
      <LhStep title="Étalonnage" description="Comparaison des références chromatiques" />
      <LhStep title="Relecture" description="Révision par les experts" />
      <LhStep title="Publication" description="Mise en ligne de la galerie numérique" />
    </LhSteps>
    <div class="demo-row" style="gap: 12px">
      <LhButton size="small" :disabled="current === 0" @click="current--">Étape précédente</LhButton>
      <LhButton size="small" type="primary" :disabled="current === 3" @click="current++">Étape suivante</LhButton>
    </div>
    <LhSteps :current="2" direction="vertical">
      <LhStep title="Acquisition" description="Terminé" />
      <LhStep title="Étalonnage" description="Terminé" />
      <LhStep title="Relecture" description="En cours" />
      <LhStep title="Publication" description="En attente" />
    </LhSteps>
    <LhSteps :current="1" status="error" :clickable="true" @click="onStepClick">
      <LhStep title="Première étape" />
      <LhStep title="Étape en erreur" icon="lh-icon-user" />
      <LhStep title="Troisième étape" />
    </LhSteps>
    <p class="demo-note">clickable permet la navigation par clic ; status="error" surcharge le statut d'ensemble ; icon personnalise l'icône.</p>
  </div>
</template>

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

Steps Props

Prop	Description	Type	Valeur par défaut
current	Index de l'étape courante (:current.sync, événement update:current, à partir de 0)	number	0
direction	Direction	'horizontal' \| 'vertical'	'horizontal'
clickable	Les étapes permettent la navigation par clic	boolean	false
status	Statut surchargeant toutes les étapes (pour un affichage personnalisé)	'wait' \| 'process' \| 'finish' \| 'error'	—
sx	Propriétés de mise en page rapide	—	—

Step Props

Prop	Description	Type	Valeur par défaut
title	Titre de l'étape (le slot title est également disponible)	string	—
description	Description de l'étape (le slot description est également disponible)	string	—
icon	Nom de classe de l'icône personnalisée (en l'absence de valeur, finish/error utilisent des coches et des croix, les autres étapes affichent leur numéro)	string	—

Events

Événement	Description	Paramètre de callback
click	Clic sur une étape (n'a de sens que si clickable est activé)	(index)