Passer au contenu principal
Les Accordion permettent aux utilisateurs d’ouvrir et de fermer des sections de contenu. Utilisez des Accordion pour la 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!");
     }
 }
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 insérer 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 icônes pour rendre les accordions plus distincts visuellement et plus faciles à parcourir.
Gardez le contenu lié 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
required
Titre dans l’aperçu de l’Accordion.
​
description
string
Détail sous le titre dans l’aperçu de l’Accordion.
​
defaultOpen
boolean
default:"false"
Indique si l’Accordion est ouvert par défaut.
​
icon
string
L’icône à afficher.Options :
  • nom de l’icône Font Awesome
  • nom de l’icône Lucide
  • code SVG (compatible JSX) entouré d’accolades
  • URL vers 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 à l’aide du 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. Entourez le code SVG compatible JSX avec des accolades : icon={<svg ...> ... </svg>}.
  5. Ajustez height et width si nécessaire.
​
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.
⌘I