> ## Documentation Index
> Fetch the complete documentation index at: https://omer-914cc1c6.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Accordions
> Composants repliables pour afficher et masquer du contenu
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 :
```java HelloWorld.java theme={null}
class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello, World!");
}
}
```
````mdx Accordion example theme={null}
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’Accordion
Regroupez les accordions liés avec ``. 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.
```java HelloWorld.java theme={null}
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.
````mdx Accordion Group Example theme={null}
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 !");
}
}
```
Ajoutez des icônes pour rendre les accordéons plus visuellement distincts et faciles à parcourir.
Organisez le contenu connexe en groupes.
````
## Propriétés
Titre dans l’aperçu de l’Accordion.
Détail sous le titre dans l’aperçu de l’Accordion.
Indique si l’Accordion est ouvert par défaut.
L’icône à afficher.
Options :
* nom de l’[icône Font Awesome](https://fontawesome.com/icons)
* nom de l’[icône Lucide](https://lucide.dev/icons)
* 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](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. Entourez le code SVG compatible JSX avec des accolades : `icon={}`.
5. Ajustez `height` et `width` si nécessaire.
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`.