Accordion

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

Je suis un Accordion.

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.

Pour commencer

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

Fonctionnalités avancées

Ajoutez des icons pour rendre les Accordions plus visibles et faciles à parcourir d’un coup d’œil.

Dépannage

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

string

requis

Titre dans l’aperçu de l’Accordion.

string

Détails sous le titre dans l’aperçu de l’Accordion.

boolean

défaut:"false"

Indique si l’Accordion est ouvert par défaut.

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 :

Convertissez votre SVG à l’aide du convertisseur SVGR.
Collez votre code SVG dans le champ de saisie SVG.
Copiez l’élément complet <svg>...</svg> depuis le champ de sortie JSX.
Entourez le code SVG compatible JSX avec des accolades : icon={<svg ...> ... </svg>}.
Ajustez height et width si nécessaire.

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.

Premiers pas

Organiser

Personnaliser

Créer du contenu

Documenter les API

Déployer

Optimiser

Accordéon simple

Groupes d’Accordion

Propriétés

​Accordéon simple

​Groupes d’Accordion

​Propriétés

Accordéon simple

Groupes d’Accordion

Propriétés