Passer au contenu principal
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.

​
Accordéon simple

Vous pouvez placer n’importe quel contenu ici, y compris d’autres composants, comme du code :
HelloWorld.java
 class HelloWorld {
     public static void main(String[] args) {
         System.out.println("Hello, World!");
     }
 }
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.
Vous pouvez placer d’autres composants à l’intérieur des Accordions.
HelloWorld.java
class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}
Ajoutez des icons pour rendre les Accordions plus visibles et faciles à parcourir d’un coup d’œil.
Gardez le contenu connexe organisé en groupes.
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

​
title
string
requis
Titre dans l’aperçu de l’Accordion.
​
description
string
Détails sous le titre dans l’aperçu de l’Accordion.
​
defaultOpen
boolean
défaut:"false"
Indique si l’Accordion est ouvert par défaut.
​
icon
string
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
  • 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.
​
iconType
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.