Étapes

Indicateur d'étapes de processus : quatre états (en cours / terminé / en attente / erreur), orientation horizontale ou verticale, navigation cliquable en option. Le stepper horizontal se replie automatiquement selon une largeur de référence fixe, et les titres restent toujours sur une seule ligne.

Utilisation de base

Moudre l'encre
Poser le pinceau
Apposer le sceau

vue

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

<template>
  <LhSteps :current="1">
    <LhStep title="Moudre l'encre" />
    <LhStep title="Poser le pinceau" />
    <LhStep title="Apposer le sceau" />
  </LhSteps>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhSteps :current="1">
    <LhStep title="Moudre l'encre" />
    <LhStep title="Poser le pinceau" />
    <LhStep title="Apposer le sceau" />
  </LhSteps>
</template>

Avec description

Inscription
Saisie des informations de base
Vérification
Vérification par e-mail et téléphone
Activation
Activation des permissions du compte

vue

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

<template>
  <LhSteps :current="1">
    <LhStep title="Inscription" description="Saisie des informations de base" />
    <LhStep title="Vérification" description="Vérification par e-mail et téléphone" />
    <LhStep title="Activation" description="Activation des permissions du compte" />
  </LhSteps>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhSteps :current="1">
    <LhStep title="Inscription" description="Saisie des informations de base" />
    <LhStep title="Vérification" description="Vérification par e-mail et téléphone" />
    <LhStep title="Activation" description="Activation des permissions du compte" />
  </LhSteps>
</template>

icon permet d'attribuer une icône personnalisée à une étape (nom d'icône LhIcon intégrée, par ex. user/check/star) ; en l'absence de valeur, les états terminé/erreur utilisent une coche ou une croix et les autres affichent un numéro. Pour un rendu d'icône entièrement personnalisé, le slot #icon permet de surcharger la valeur par défaut.

Inscription
Vérification
Activation

vue

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

<template>
  <LhSteps :current="1">
    <LhStep icon="user" title="Inscription" />
    <LhStep icon="check" title="Vérification" />
    <LhStep icon="star" title="Activation" />
  </LhSteps>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhSteps :current="1">
    <LhStep icon="user" title="Inscription" />
    <LhStep icon="check" title="Vérification" />
    <LhStep icon="star" title="Activation" />
  </LhSteps>
</template>

État d'erreur

Téléversement
Vérification
Terminé

vue

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

<template>
  <LhSteps :current="1" status="error">
    <LhStep title="Téléversement" />
    <LhStep title="Vérification" />
    <LhStep title="Terminé" />
  </LhSteps>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhSteps :current="1" status="error">
    <LhStep title="Téléversement" />
    <LhStep title="Vérification" />
    <LhStep title="Terminé" />
  </LhSteps>
</template>

status est une surcharge globale : une fois défini, toutes les étapes prennent cet état, ce qui convient aux affichages personnalisés.

Choix du modèle
Sélectionner l'original
Copie
Copie directe ou de mémoire
Montage
Montage sur support

Étape actuelle : 1

vue

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

<template>
  <LhSteps v-model:current="current" clickable>
    <LhStep title="Choix du modèle" description="Sélectionner l'original" />
    <LhStep title="Copie" description="Copie directe ou de mémoire" />
    <LhStep title="Montage" description="Montage sur support" />
  </LhSteps>
</template>

vue

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

<template>
  <LhSteps v-model:current="current" clickable>
    <LhStep title="Choix du modèle" description="Sélectionner l'original" />
    <LhStep title="Copie" description="Copie directe ou de mémoire" />
    <LhStep title="Montage" description="Montage sur support" />
  </LhSteps>
</template>

Orientation verticale

Début
Geste initial, pointe dissimulée
Tracé
Tracé, pinceau centré
Fin
Fin du trait, retour du pinceau

vue

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

<template>
  <LhSteps :current="1" direction="vertical">
    <LhStep title="Début" description="Geste initial, pointe dissimulée" />
    <LhStep title="Tracé" description="Tracé, pinceau centré" />
    <LhStep title="Fin" description="Fin du trait, retour du pinceau" />
  </LhSteps>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhSteps :current="1" direction="vertical">
    <LhStep title="Début" description="Geste initial, pointe dissimulée" />
    <LhStep title="Tracé" description="Tracé, pinceau centré" />
    <LhStep title="Fin" description="Fin du trait, retour du pinceau" />
  </LhSteps>
</template>

Renvoi à largeur fixe

Le stepper horizontal se répartit selon la largeur de référence --lh-steps-item-basis (160px par défaut) : tant que le conteneur peut les accueillir, les étapes se partagent équitablement la ligne ; sinon, l'étape entière passe à la ligne suivante plutôt que de forcer le titre à se replier. Les titres restent sur une seule ligne et sont tronqués par des points de suspension en cas de dépassement ; après un renvoi à la ligne, le trait de liaison de la dernière étape de la ligne est automatiquement masqué afin de ne pas pointer vers un espace vide.

Choix du modèle
Sélectionner l'original
Copie
Copie directe ou de mémoire
Inscription
Dédicace et sceau
Montage
Montage sur support

vue

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

<template>
  <LhSteps :current="1">
    <LhStep title="Choix du modèle" description="Sélectionner l'original" />
    <LhStep title="Copie" description="Copie directe ou de mémoire" />
    <LhStep title="Inscription" description="Dédicace et sceau" />
    <LhStep title="Montage" description="Montage sur support" />
  </LhSteps>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhSteps :current="1">
    <LhStep title="Choix du modèle" description="Sélectionner l'original" />
    <LhStep title="Copie" description="Copie directe ou de mémoire" />
    <LhStep title="Inscription" description="Dédicace et sceau" />
    <LhStep title="Montage" description="Montage sur support" />
  </LhSteps>
</template>

Le conteneur de l'exemple ci-dessus est limité à 280px afin d'illustrer le renvoi à la ligne. Pour modifier le rythme des renvois, surchargez steps-item-basis via themeVars (la clé reçoit automatiquement le préfixe --lh-) : <LhSteps :theme-vars="{ 'steps-item-basis': '220px' }"> ; une configuration globale est également possible via componentTheme.steps de LhConfigProvider.

API Steps

LhSteps Props

Prop	Description	Type	Valeur par défaut
current	Index de l'étape actuelle (`v-model:current`, à partir de 0)	`number`	`0`
direction	Direction	`"horizontal" \| "vertical"`	`'horizontal'`
clickable	Les étapes sont cliquables pour la navigation	`boolean`	`false`
status	Surcharge globale de l'état de toutes les étapes (pour affichage personnalisé)	`"wait" \| "process" \| "finish" \| "error"`	—
themeVars	Variables de thème au niveau du composant (la clé reçoit automatiquement le préfixe --lh-)	`{ [x: string]: string; }`	—
sx	Props de mise en page sx	`LhSxProps`	—

LhSteps Events

Événement	Description	Paramètre
update:current	L'étape actuelle change (v-model)	`(index: number)`
change	L'étape actuelle change	`(index: number)`

LhStep 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 l'icône personnalisée (icône LhIcon intégrée ; en l'absence de valeur, finish/error utilisent une coche ou une croix, les autres affichent un numéro)	`LhIconName`	—

Slots

Slot	Description	Composant concerné
default	Éléments d'étape (liste de LhStep)	LhSteps
title	Titre personnalisé	LhStep
description	Description personnalisée	LhStep
icon	Icône personnalisée (surcharge le rendu par défaut de la prop icon)	LhStep

Variables au niveau du composant

Les variables CSS suivantes définissent des valeurs par défaut sur .lh-steps et peuvent être surchargées globalement ou au niveau du composant via themeVars (la clé reçoit automatiquement le préfixe --lh-) :

Variable	Description	Valeur par défaut
`--lh-steps-item-basis`	Largeur de référence fixe des étapes horizontales ; le renvoi à la ligne s'effectue selon cette largeur quand le conteneur est trop étroit	`160px`

Accessibilité

Le conteneur est une <ol role="list"> : l'ordre sémantique est l'ordre du processus
L'étape actuelle reçoit automatiquement aria-current="step"
Lorsque clickable est activé, la tête des étapes terminées ou en cours est un véritable <button>, dont l'aria-label provient du pack de langue (steps.finish / steps.error / steps.step) ; les étapes en attente ne sont pas cliquables, afin d'éviter d'inviter l'utilisateur à sauter des étapes non atteintes
Les traits de liaison sont dessinés par des pseudo-éléments et n'entrent naturellement pas dans l'arbre d'accessibilité

Définitions de types

Ce composant exporte les structures de types TypeScript suivantes (extraites automatiquement de packages/components/steps/src/types.ts et des sources @lh-ui/share/core/* ; cliquez sur chaque entrée pour déplier la définition complète ; la description des props se trouve dans le tableau Props ci-dessus) :

LhStepsProps

export interface LhStepsProps {
  /** Index de l'étape actuelle (v-model:current, à partir de 0) */
  current?: number
  /** Direction */
  direction?: LhStepsDirection
  /** Les étapes sont cliquables pour la navigation */
  clickable?: boolean
  /** Surcharge globale de l'état de toutes les étapes (pour affichage personnalisé) */
  status?: LhStepStatus
  /** Variables de thème au niveau du composant (la clé reçoit automatiquement le préfixe --lh-, par ex. `steps-item-basis`) */
  themeVars?: Record<string, string>
  /** Props de mise en page sx */
  sx?: LhSxProps
}

LhStepProps

export interface LhStepProps {
  /** Titre de l'étape (le slot title est également disponible) */
  title?: string
  /** Description de l'étape (le slot description est également disponible) */
  description?: string
  /** Nom de l'icône personnalisée (en l'absence de valeur, finish/error utilisent une coche ou une croix, les autres affichent un numéro) */
  icon?: LhIconName
}

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

export type LhIconName = keyof typeof LH_ICON_SVGS_CONST

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

/**
 * Direction du stepper
 */
export type LhStepsDirection = 'horizontal' | 'vertical'

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

/**
 * État d'une étape
 */
export type LhStepStatus = 'wait' | 'process' | 'finish' | 'error'

Étapes ​

Utilisation de base ​

Avec description ​

État d'erreur ​

Navigation cliquable ​

Orientation verticale ​

Renvoi à largeur fixe ​

API Steps ​

LhSteps Props ​

LhSteps Events ​

LhStep Props ​

Slots ​

Variables au niveau du composant ​

Accessibilité ​

Définitions de types ​