Utilisez les é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 ne concernent que la première étape.
2

Deuxième étape

Voici des instructions ou un contenu qui ne concernent que la deuxième étape.
3

Troisième étape

Voici des instructions ou un contenu qui ne concernent que la troisième étape.
Steps example
<Steps>
  <Step title="First Step">
    These are instructions or content that only pertain to the first step.
  </Step>
  <Step title="Second Step">
    These are instructions or content that only pertain to the second step.
  </Step>
  <Step title="Third Step">
    These are instructions or content that only pertain to the third step.
  </Step>
</Steps>

​
Propriétés de Steps

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

​
Propriétés individuelles d’une étape

​
children
string | ReactNode
required
Le contenu d’une étape, soit en texte brut, soit via des composants.
​
icon
string
L’icône à afficher.Options :
  • nom de l’icône Font Awesome
  • nom de l’icône Lucide
  • code SVG compatible JSX entre accolades
  • URL d’une icône hébergée en externe
  • chemin vers un fichier d’icône dans votre projet
Pour des icônes SVG personnalisées :
  1. Convertissez votre SVG à l’aide du convertisseur SVGR.
  2. Collez votre code SVG dans le champ de saisie SVG.
  3. Copiez l’élément complet <svg>...</svg> depuis le champ de sortie JSX.
  4. Placez le code SVG compatible JSX entre accolades : icon={<svg ...> ... </svg>}.
  5. Ajustez height et width si nécessaire.
​
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
default:"p"
La taille des titres d’étape. Valeurs possibles : p, h2 ou h3.