Accordéons

Composants pliables pour afficher et masquer du contenu

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

Je suis un accordéon.

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.

Prise en main

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!");
    }
}

Fonctionnalités avancées

Ajoutez des icônes pour rendre les accordéons plus distinctifs visuellement et plus faciles à parcourir.

Dépannage

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 · requis

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 · défaut: "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.