Accordéon
Sections repliables pour développer uniquement ce dont les utilisateurs ont besoin. Idéal pour les FAQ, les listes de fonctionnalités et la 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é.