Étapes
Créez des procédures numérotées étape par étape avec le composant steps pour guider les utilisateurs dans tâches séquentielles, tutoriels et configurations.
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.
Première étape
Voici des instructions ou un contenu qui s’appliquent uniquement à la première étape.
Deuxième étape
Voici des instructions ou un contenu qui s’appliquent uniquement à la deuxième étape.
Troisième étape
Voici des instructions ou un contenu qui s’appliquent uniquement à la troisième étape.
<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>childrenReactElement<StepProps>[]requiredUne liste de composants Step.
titleSizestringdefault: pLa taille des titres d’étape. Valeurs possibles : p, h2, h3 et h4.
titlestringrequiredLe titre est le texte principal de l’étape et s’affiche à côté de l’indicateur.
childrenstring | ReactNodeLe contenu d’une étape, sous forme de texte brut ou de composants.
iconstringL’icône à afficher.
Options:
- Font Awesome nom d’icône, si vous avez la propriété
icons.libraryparamètres définie surfontawesomedans votredocs.json - Lucide nom d’icône, si vous avez la propriété
icons.libraryparamètres définie surlucidedans votredocs.json - Tabler nom d’icône, si vous avez la propriété
icons.libraryparamètres définie surtablerdans votredocs.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:
- Convertissez votre SVG avec le convertisseur SVGR.
- Collez votre code SVG dans le champ d’entrée SVG.
- Copiez l’élément complet
<svg>...</svg>depuis le champ de sortie JSX. - Enveloppez le code SVG compatible JSX dans des accolades :
icon={<svg ...> ... </svg>}. - Ajustez
heightetwidthselon vos besoins.
iconTypestringLe style d’icône Font Awesome. Utilisé uniquement avec les icônes Font Awesome.
Options: regular, solid, light, thin, sharp-solid, duotone, brands.
stepNumbernumberLe numéro de l’étape.
titleSizestringdefault: pLa taille des titres d’étape. Valeurs possibles : p, h2, h3 et h4.
idstringUn ID personnalisé pour l’étape, utilisé pour les liens d’ancrage et la navigation dans la table des matières.
noAnchorbooleandefault: falseIndique s’il faut masquer le lien d’ancrage de l’étape.