Étapier (indicateur d’étapes) - DsfrStepper

🌟 Introduction

Le composant DsfrStepper est un guide visuel permettant d’indiquer à l’utilisateur sa progression dans une série d’étapes. Il est conforme au Design System de l'État Français (DSFR) et peut être utilisé dans des processus multi-étapes tels que des formulaires ou des parcours utilisateur.

🏅 La documentation sur l’étapier le DSFR

La story sur l’étapier sur le storybook de VueDsfr

📐 Structure

Le composant affiche :

1. Le titre de l'étape actuelle.
2. Un état de progression indiquant l'étape actuelle et le nombre total d'étapes.
3. Une barre de progression stylisée en arrière-plan.
4. Une indication de l'étape suivante (si disponible).

🛠️ Props

Nom	Type	Défaut	Description
steps	string[]	[]	Liste des noms ou titres des étapes. Chaque élément représente une étape.
currentStep	number	1	Index (1-based) de l'étape actuellement active dans le processus.

Détails

• steps : La longueur de cette liste détermine le nombre total d'étapes.
• currentStep : Le numéro d'étape actuel. Si sa valeur dépasse le nombre d'étapes, le composant affiche un état invalide.

📡Événements

Aucun événement spécifique n'est émis par ce composant.

🧩 Slots

Aucun slot disponible pour ce composant.

📝 Exemples

Exemple de base

<DsfrStepper
  :steps="['Étape 1 : Préparation', 'Étape 2 : Validation', 'Étape 3 : Confirmation']"
  :currentStep="2"
/>

Exemple complet

Démo

Code de la démo

<script lang="ts" setup>
import { ref } from 'vue'

import DsfrStepper from '../DsfrStepper.vue'

import DsfrButton from '@/components/DsfrButton/DsfrButton.vue'

const steps = [
  'Première étape',
  'Deuxième étape',
  'Troisième étape',
  'Quatrième étape',
]
const currentStep = ref(1)
</script>

<template>
  <DsfrStepper
    :steps="steps"
    :current-step="currentStep"
  />

  <div class="flex gap-2">
    <DsfrButton
      type="button"
      label="Reculer"
      icon="ri-skip-back-mini-line"
      @click="currentStep > 1 && currentStep--"
    />
    <DsfrButton
      type="button"
      label="Avancer"
      icon="ri-skip-forward-mini-line"
      icon-right
      @click="currentStep < 4 && currentStep++"
    />
  </div>
</template>

⚙️ Code source du composant

DsfrStepper.vue

<script lang="ts" setup>
import type { DsfrStepperProps } from './DsfrStepper.types'

export type { DsfrStepperProps }

withDefaults(defineProps<DsfrStepperProps>(), {
  steps: () => [],
  currentStep: 1,
})
</script>

<template>
  <div class="fr-stepper">
    <h2 class="fr-stepper__title">
      {{ steps[currentStep - 1] }}
      <span class="fr-stepper__state">Étape {{ currentStep }} sur {{ steps.length }}</span>
    </h2>
    <div
      class="fr-stepper__steps"
      :data-fr-current-step="currentStep"
      :data-fr-steps="steps.length"
    />
    <p class="fr-stepper__details">
      <span
        v-if="currentStep < steps.length"
        class="fr-text--bold"
      >Étape suivante :</span> {{ steps[currentStep] }}
    </p>
  </div>
</template>

DsfrStepper.types.ts

export type DsfrStepperProps = {
  steps: string[]
  currentStep: number
}