Passer au contenu principal
Les accordéons permettent aux utilisateurs d’ouvrir et de fermer des sections de contenu. Utilisez-les pour une divulgation progressive et pour organiser l’information.

​
Accordéon simple

Vous pouvez mettre 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!");
     }
 }
Exemple d’accordéon
<Accordion title="Je suis un accordéon.">
  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’accordéons

Regroupez les accordéons associés avec <AccordionGroup>. Cela crée une section cohérente d’accordéons pouvant être développés ou repliés individuellement.
Vous pouvez insérer d’autres composants à l’intérieur des accordéons.
HelloWorld.java
class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}
Ajoutez des icônes pour rendre les accordéons plus distinctifs visuellement et plus faciles à parcourir.
Maintenez le contenu connexe organisé par groupes.
Exemple de groupe d’accordéons
<AccordionGroup>
  <Accordion title="Bien démarrer">
    Vous pouvez imbriquer d’autres composants dans des accordéons.

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

  <Accordion title="Fonctionnalités avancées" icon="alien-8bit">
    Ajoutez des icônes pour rendre les accordéons plus distinctifs et faciles à parcourir d’un coup d’œil.
  </Accordion>

  <Accordion title="Dépannage">
    Regroupez les contenus associés pour rester organisé.
  </Accordion>
</AccordionGroup>

​
Propriétés

​
title
string
required
Titre dans l’aperçu de l’accordéon.
​
description
string
Détail sous le titre dans l’aperçu de l’accordéon.
​
defaultOpen
boolean
default:"false"
Indique si l’accordéon est ouvert par défaut.
​
icon
string
L’icône à afficher.Options :
  • Nom d’icône Font Awesome
  • Nom d’icône Lucide
  • Code SVG compatible JSX entre accolades
  • URL d’une icône hébergée en externe
  • Chemin vers un fichier d’icône dans votre projet
Pour des icônes SVG personnalisées :
  1. Convertissez votre SVG avec le convertisseur SVGR.
  2. Collez votre code SVG dans le champ de saisie SVG.
  3. Copiez l’élément complet <svg>...</svg> depuis le champ de sortie JSX.
  4. Mettez le code SVG compatible JSX entre accolades : icon={<svg ...> ... </svg>}.
  5. Ajustez height et width au besoin.
​
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.