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. Dans les vues de page Markdown, chaque étape devient un titre numéroté, par exemple **1. First step**. Définissez stepNumber pour choisir le numéro.
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

​
Propriétés de Étapes

​
ReactElement<StepProps>[]
requis
Une liste de composants Step.
​
string
défaut:"p"
La taille des titres d’étape. Valeurs possibles : p, h2, h3 et h4.
​
string
Classes CSS supplémentaires à appliquer au conteneur des étapes.

​
Propriétés de chaque étape

​
string
requis
Le titre est le texte principal de l’étape et s’affiche à côté de l’indicateur. Prend en charge la mise en forme Markdown en ligne, comme **bold**, _italic_ et `code`.
​
string | ReactNode
Le contenu d’une étape, sous forme de texte brut ou de composants.
​
string
L’icône à afficher.Options:
  • Nom d’icône Font Awesome si vous avez la propriété icons.library définie sur fontawesome dans votre docs.json
  • Nom d’icône Lucide si vous avez la propriété icons.library définie sur lucide dans votre docs.json
  • Nom d’icône Tabler si vous avez la propriété icons.library définie sur tabler dans votre docs.json
  • Un seul emoji (par exemple, 💡 ou 🚀)
  • 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.
​
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.
​
number
Le numéro de l’étape.
​
string
défaut:"p"
La taille des titres d’étape. Valeurs possibles : p, h2, h3 et h4.
​
string
Un ID personnalisé pour l’étape, utilisé pour les liens d’ancrage et la navigation dans la table des matières.
​
boolean
défaut:"false"
Indique s’il faut masquer le lien d’ancrage de l’étape.
​
string
Classes CSS supplémentaires à appliquer à l’étape.