Passer au contenu principal
Utilisez des étapes pour présenter une série d’actions ou d’événements successifs. Vous pouvez ajouter autant d’étapes que nécessaire.
1

Première étape

Voici des instructions ou un contenu qui s’appliquent uniquement à la première étape.
2

Deuxième étape

Voici des instructions ou un contenu qui s’appliquent uniquement à la deuxième étape.
3

Troisième étape

Voici des instructions ou un contenu qui s’appliquent uniquement à la troisième étape.
Steps example
<Steps>
  <Step title="Première étape">
    Voici des instructions ou un contenu qui s'appliquent uniquement à la première étape.
  </Step>
  <Step title="Deuxième étape">
    Voici des instructions ou un contenu qui s'appliquent uniquement à la deuxième étape.
  </Step>
  <Step title="Troisième étape">
    Voici des instructions ou un contenu qui s'appliquent uniquement à la troisième étape.
  </Step>
</Steps>

​
Propriétés de Étapes

​
children
ReactElement<StepProps>[]
requis
Une liste de composants Step.
​
titleSize
string
défaut:"p"
La taille des titres d’étape. Valeurs possibles : p, h2, h3 et h4.

​
Propriétés de chaque étape

​
children
string | ReactNode
requis
Le contenu d’une étape, sous forme de texte brut ou de composants.
​
icon
string
L’icône à afficher.Options:
  • Font Awesome nom d’icône, si vous avez la propriété icons.library paramètres définie sur fontawesome dans votre docs.json
  • Lucide nom d’icône, si vous avez la propriété icons.library paramètres définie sur lucide dans votre docs.json
  • Tabler nom d’icône, si vous avez la propriété icons.library paramètres définie sur tabler dans votre docs.json
  • URL vers une icône hébergée en externe
  • Chemin vers un fichier d’icône dans votre projet
  • Code SVG entouré d’accolades
Pour les icônes SVG personnalisées:
  1. Convertissez votre SVG avec le convertisseur SVGR.
  2. Collez votre code SVG dans le champ d’entrée SVG.
  3. Copiez l’élément complet <svg>...</svg> depuis le champ de sortie JSX.
  4. Enveloppez le code SVG compatible JSX dans des accolades : icon={<svg ...> ... </svg>}.
  5. Ajustez height et width selon vos besoins.
​
iconType
string
Le style d’icône Font Awesome. Utilisé uniquement avec les icônes Font Awesome.Options: regular, solid, light, thin, sharp-solid, duotone, brands.
​
title
string
Le titre est le texte principal de l’étape et s’affiche à côté de l’indicateur.
​
stepNumber
number
Le numéro de l’étape.
​
titleSize
string
défaut:"p"
La taille des titres d’étape. Valeurs possibles : p, h2, h3 et h4.
​
id
string
Un ID personnalisé pour l’étape, utilisé pour les liens d’ancrage et la navigation dans la table des matières.
​
noAnchor
boolean
défaut:"false"
Indique s’il faut masquer le lien d’ancrage de l’étape.