É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 :
- Le titre de l'étape actuelle.
- Un état de progression indiquant l'étape actuelle et le nombre total d'étapes.
- Une barre de progression stylisée en arrière-plan.
- 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
vue
<DsfrStepper
:steps="['Étape 1 : Préparation', 'Étape 2 : Validation', 'Étape 3 : Confirmation']"
:currentStep="2"
/>
Exemple complet
vue
<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
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>
ts
export type DsfrStepperProps = {
steps: string[]
currentStep: number
}