Accordion

Utilisez le composant accordion pour afficher et masquer des sections, organiser les informations connexes et activer la divulgation progressive.

Les Accordion permettent aux utilisateurs d’ouvrir et de replier des sections de contenu. Utilisez des Accordion pour la divulgation progressive et pour organiser l’information.

Lorsque vous ouvrez un Accordion, le hash de l’URL se met à jour, ce qui vous permet de partager des liens directs vers des sections spécifiques de l’Accordion.

Accordéon simple

Accordion example

<Accordion title="Je suis un Accordion.">
  Vous pouvez mettre n'importe quel contenu ici, y compris d'autres composants, comme du code :

   ```java HelloWorld.java
    class HelloWorld {
        public static void main(String[] args) {
            System.out.println("Bonjour, le monde !");
        }
    }
  ```
</Accordion>

Groupes d’Accordion

Regroupez les Accordions liés avec <AccordionGroup>. Cela crée une section cohérente d’Accordions pouvant être développés ou réduits individuellement.

Accordion Group Example

<AccordionGroup>
  <Accordion title="Premiers pas">
    Vous pouvez placer d'autres composants à l'intérieur des Accordion.

    ```java HelloWorld.java
    class HelloWorld {
        public static void main(String[] args) {
            System.out.println("Bonjour, le monde !");
        }
    }
    ```
  </Accordion>

  <Accordion title="Fonctionnalités avancées" icon="alien-8bit">
    Ajoutez des icônes pour rendre les accordéons plus visuellement distincts et faciles à parcourir.
  </Accordion>

  <Accordion title="Dépannage">
    Organisez le contenu connexe en groupes.
  </Accordion>
</AccordionGroup>

Propriétés

titlestringrequired

Titre dans l’aperçu de l’Accordion.

descriptionstring

Détails sous le titre dans l’aperçu de l’Accordion.

defaultOpenbooleandefault: false

Indique si l’Accordion est ouvert par défaut.

idstring

ID personnalisé pour l’Accordion utilisé pour les liens d’ancrage. S’il est omis, la valeur par défaut est la même que title.

iconstring

L’icône à afficher.

Options:

Font Awesome nom d’icône, si vous avez la propriété icons.library paramètres définie sur fontawesome dans votre docs.json
Lucide nom d’icône, si vous avez la propriété icons.library paramètres définie sur lucide dans votre docs.json
Tabler nom d’icône, si vous avez la propriété icons.library paramètres définie sur tabler dans votre docs.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 height et width selon vos besoins.

iconTypestring

Le style d’icône Font Awesome. Utilisé uniquement avec les icônes Font Awesome.

Options: regular, solid, light, thin, sharp-solid, duotone, brands.

Accordéon simple

Groupes d’Accordion

Propriétés

On this page