> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify-mintlify-add-hello-world-quickstart-48843.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# 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
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!");
}
}
```
````mdx Exemple d’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 !");
}
}
```
````
## Groupes d’accordéons
Regroupez les accordéons associés avec ``. 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.
```java 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.
````mdx Exemple de groupe d’accordéons
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 !");
}
}
```
Ajoutez des icônes pour rendre les accordéons plus distinctifs et faciles à parcourir d’un coup d’œil.
Regroupez les contenus associés pour rester organisé.
````
## Propriétés
Titre dans l’aperçu de l’accordéon.
Détail sous le titre dans l’aperçu de l’accordéon.
Indique si l’accordéon est ouvert par défaut.
L’icône à afficher.
Options :
* Nom d’icône [Font Awesome](https://fontawesome.com/icons)
* Nom d’icône [Lucide](https://lucide.dev/icons)
* 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](https://react-svgr.com/playground/).
2. Collez votre code SVG dans le champ de saisie SVG.
3. Copiez l’élément complet `` depuis le champ de sortie JSX.
4. Mettez le code SVG compatible JSX entre accolades : `icon={}`.
5. Ajustez `height` et `width` au besoin.
Le style d’icône [Font Awesome](https://fontawesome.com/icons). Utilisé uniquement avec les icônes Font Awesome.
Options : `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`.