Composants
StepNavigation
Composant de navigation multi-étapes avec barre de progression
Composant de navigation qui affiche une barre de progression et des indicateurs d'étapes pour guider l'utilisateur dans un formulaire multi-étapes.
Usage
Basic
Utilisez le composant StepNavigation sans props (il utilise le composable useForm automatiquement) :
<template>
<StepNavigation />
</template>
Avec personnalisation
Le composant s'intègre automatiquement avec le composable useForm pour gérer la navigation :
<template>
<div>
<StepNavigation />
<!-- Contenu de l'étape actuelle -->
<div v-if="currentStep === 1">
<!-- Étape 1 -->
</div>
</div>
</template>
<script setup>
const { currentStep, nextStep, prevStep } = useForm();
</script>
API
Props
Ce composant n'accepte aucune prop. Il utilise directement le composable useForm() pour récupérer l'état de navigation.
Events
Ce composant n'émet aucun événement.
Slots
Ce composant n'expose aucun slot.
Exemples
Exemple 1 : Formulaire multi-étapes complet
<template>
<div>
<StepNavigation />
<div v-if="currentStep === 1">
<h2>Étape 1 : Localisation</h2>
<!-- Formulaire étape 1 -->
</div>
<div v-if="currentStep === 2">
<h2>Étape 2 : Équipement</h2>
<!-- Formulaire étape 2 -->
</div>
<!-- Les boutons Précédent/Suivant sont gérés par StepNavigation -->
</div>
</template>
<script setup>
const { currentStep } = useForm();
</script>
Exemple 2 : Navigation personnalisée
<template>
<div>
<StepNavigation />
<!-- Navigation personnalisée supplémentaire -->
<div class="flex gap-2 mt-4">
<UButton @click="goToStep(1)">Aller à l'étape 1</UButton>
<UButton @click="goToStep(3)">Aller à l'étape 3</UButton>
</div>
</div>
</template>
<script setup>
const { goToStep } = useForm();
</script>
Notes
Le composant affiche automatiquement les titres des étapes :
- Étape 1 : Localisation
- Étape 2 : Équipement
- Étape 3 : Tarifs
- Étape 4 : Contact
- Étape 5 : Contrat
- Étape 6 : Paiement
Le bouton "Suivant" est désactivé si l'étape actuelle n'est pas complétée (vérifié via isStepCompleted(currentStep)).