Accordéon
Sections de contenu repliables qui permettent aux utilisateurs de développer uniquement ce dont ils ont besoin. Idéal pour les FAQ, les listes de fonctionnalités et les options de configuration.
Sections repliables -- les lecteurs voient le titre et développent pour les détails. Prend en charge les icônes, les descriptions et le regroupement.
Utilisez les Accordions quand :
- FAQ - Les utilisateurs parcourent les questions et développent les réponses
- Listes de fonctionnalités - Chaque fonctionnalité dispose d'une section avec des détails
- Options de configuration - Regroupez les paramètres par catégorie
- Guides étape par étape avec des détails développables
Utilisation
<Accordion title="Advanced Configuration">
Optional details go here.
</Accordion>Accordion de base
Ce contenu est masqué jusqu'à ce que l'accordion soit développé.
Vous pouvez inclure n'importe quel contenu ici : texte, code, images ou autres composants.
<Accordion title="Click to expand">
This content is hidden until the accordion is expanded.
You can include any content here: text, code, images, or other components.
</Accordion>Avec description
Ajoutez un sous-titre avec la prop description :
La documentation des endpoints d'authentification API se trouve ici.
<Accordion title="API Reference" description="Authentication endpoints">
Documentation for authentication API endpoints goes here.
</Accordion>Ouvert par défaut
Démarrez développé avec defaultOpen :
Cet accordion démarre dans l'état ouvert.
<Accordion title="Already Expanded" defaultOpen>
This accordion starts in the open state.
</Accordion>Avec icône
Options de configuration et paramètres.
<Accordion title="Settings" icon="gear">
Configuration options and settings.
</Accordion>Accordion vs Expandable
| Fonctionnalité | Accordion | Expandable |
|---|---|---|
| Icônes | Oui | Non |
| Descriptions | Oui (sous-titre) | Non |
| Regroupement | AccordionGroup | Autonome |
| Poids visuel | Plus lourd, type section | Plus léger, inline |
| Idéal pour | FAQ, listes de fonctionnalités | Contenu complémentaire |
Règle générale : Utilisez Accordion lorsque les sections sont également importantes et que les utilisateurs choisissent entre elles. Utilisez Expandable pour des détails « agréables à avoir » qui n'ont pas besoin d'une prominence visuelle.
Props
Texte d'en-tête de l'accordion.
Sous-titre affiché sous le titre.
Nom d'icône Font Awesome (ex. : « gear », « settings »).
Variante de style d'icône : light, regular ou solid.
Démarrer dans l'état développé.