Accordéons

Composants repliables pour afficher et masquer du contenu

Les accordéons permettent aux utilisateurs d’ouvrir et de refermer des sections de contenu. Utilisez des accordéons pour la 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("Hello, World!");
        }
    }
  ```
</Accordion>

Groupes d’accordéons

Regroupez des accordéons liés à l’aide de <AccordionGroup>. Cela crée une section cohérente d’accordéons pouvant être déployés ou repliés individuellement.

Pour commencer

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 faciles à parcourir.

Dépannage

Organisez le contenu connexe en groupes.

Accordion Group Example

<AccordionGroup>
  <Accordion title="Pour commencer">
    Vous pouvez insérer d’autres composants à l’intérieur des accordéons.

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

  <Accordion title="Fonctionnalités avancées" icon="alien-8bit">
    Ajoutez des icônes pour rendre les accordéons plus distinctifs visuellement 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’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 de l’icône Font Awesome
• nom de l’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 à 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. Placez le code SVG compatible JSX entre 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.