Accordéon

Le composant Accordéon affiche du contenu lié dans des sections repliables, permettant aux utilisateurs d’afficher ou de masquer rapidement des informations pour une expérience épurée. Chaque accordéon peut contenir plusieurs se

Configurer votre accordéon

1. Ajouter des sections à votre accordéon

Tout d'abord, vous allez créer les sections individuelles, ou « éléments », de votre accordéon. Chaque élément sert de conteneur repliable où vous placerez le contenu que vous souhaitez afficher. C'est ce qui rend le composant Accordéon si puissant : vous n'êtes pas limité au texte et aux images. Vous pouvez glisser-déposer n'importe quel autre composant dynamique Avonni directement dans une section d'accordéon.

Vous voulez inclure un tableau de données détaillé ? Glissez un composant Tableau de données directement dans la section. Besoin de visualiser des emplacements ? Ajoutez un composant Carte. Les possibilités sont infinies !

Pour ajouter une nouvelle section, cliquez sur le bouton « Ajouter un élément ».

2: Personnaliser l'apparence de chaque section

Donnez à vos éléments le bon rendu visuel.

• Variante : Choisissez entre « Base » pour un aspect standard ou « Ombré » pour un effet de fond subtil.

• Icônes repliables : Activez ou désactivez les icônes qui indiquent si une section est développée ou repliée.

• Position de l'icône : Placez les icônes repliables à gauche ou à droite de l'en-tête de l'élément.

3: Choisir la ou les sections initialement ouvertes (optionnel)

Cette étape vous permet de contrôler quelle(s) section(s) de l'accordéon sont développées lorsque le composant se charge pour la première fois.

• Une seule section ouverte à la fois : Si votre accordéon est configuré pour permettre une seule section ouverte à la fois et que vous sélectionnez plusieurs sections ici, seule la première section de votre liste sera ouverte initialement.

• Plusieurs sections ouvertes : Pour avoir plusieurs sections ouvertes par défaut, activez l'option « Autoriser l'expansion de plusieurs sections »

---

Propriétés de style

Espacement

• Marge :

  • Haut : Ajoute de l'espace au-dessus l'accordéon.

  • Droite : Ajoute de l'espace à la droite de l'accordéon.

  • Bas : Ajoute de l'espace ci-dessous l'accordéon.

  • Gauche : Ajoute de l'espace à la gauche de l'accordéon.

• Rembourrage :

  • Haut : Ajoute de l'espace à l'intérieur l'accordéon, au-dessus du contenu.

  • Droite : Ajoute de l'espace à l'intérieur l'accordéon, à droite du contenu.

  • Bas : Ajoute de l'espace à l'intérieur l'accordéon, sous le contenu.

  • Gauche : Ajoute de l'espace à l'intérieur l'accordéon, à gauche du contenu

Bordure

Taille

Contenu

Pourquoi utiliser le composant Accordéon ?

• Organiser le contenu : Regroupez les informations liées en sections gérables, améliorant la lisibilité et la navigation.

• Gagner de la place : Maintenez le contenu long caché jusqu'à ce qu'il soit nécessaire, réduisant l'encombrement de la page.

• Améliorer l'expérience utilisateur : Fournir une manière claire et intuitive pour les utilisateurs d'accéder à l'information.

• Améliorer l'aspect visuel : Créez une mise en page structurée et organisée pour votre contenu.

---

Exemples d'utilisations

• FAQ : Présentez les questions fréquemment posées avec leurs réponses dans un format compact.

• Détails du produit : Organisez les informations produit en sections telles que « Description », « Spécifications » et « Avis ».

• Guides étape par étape : Décomposez les processus complexes en étapes gérables.

• Formulaires : Les champs de formulaire liés sont divisés en sections repliables pour une meilleure organisation.

En tirant parti du composant Accordéon, vous pouvez créer des interfaces conviviales qui présentent l'information de manière concise et attrayante.