L'accordéon Bric fournit un moyen de décomposer et de basculer entre le masquage et l'affichage de grandes quantités de contenu. Les accordéons se composent de divers sous-éléments tels que le Card Bric et Div récipient Bric, ce qui leur permet d'être facilement personnalisés et stylisés indépendamment.
Pour ajouter plus de sections d'accordéon, sélectionnez simplement l'une des cartes (qui se trouve dans le conteneur principal div d'accordéon) via l'arborescence des couches et dupliquez-la à l'aide du raccourci clavier D.
Structure
La structure d'un accordéon est un peu plus complexe que la plupart des autres Brics trouvé dans Blocs. Il est composé d'un Div récipient Bric qui a son Type mis à un Conteneur d'accordéon ainsi que ses ID défini sur une valeur unique, par exemple accordéon-17605. Dans ce conteneur, il y a plusieurs Card Brics. Chaque carte Bric possède de Lien Bric dans la section d'en-tête de la carte et un Div contenant qui contient la section du corps de la carte.
Communication
L'accordéon Bric les fonctions sont contrôlées via le Lien Bric (trouvé dans la section d'en-tête d'une carte) et le Div conteneur (qui contient la section du corps de la carte). Ces deux éléments ont attributs de données personnalisés appliqué à eux afin de leur donner la fonctionnalité d'accordéon typique et leur permettre de communiquer entre eux.
Lien accordéon Bric
Le lien est l'élément sur lequel vous cliquez pour révéler la section d'accordéon. Cet article a une configuration spécifique qui lui permet de fonctionner dans le cadre d'un accordéon. Il a son l'interaction ajuster à aucun et il a également divers attributs de données personnalisés, les deux plus importants étant le cible de données et contrôles aria.
Lier les attributs de données
Les cible de données l'attribut a une valeur définie sur une référence unique, par exemple # accordéon-17605-item-1L’ contrôles aria L'attribut contient une valeur presque identique à la cible de données attribut, mais le # au début a été supprimé, par exemple accordéon-17605-item-1. Ces références uniques doivent correspondre au ID du conteneur div correspondant dans lequel le corps de la carte est imbriqué.
Conteneur de div accordéon
Dans chaque carte Bric (trouvé dans le conteneur principal de l'accordéon) est un Div contenant qui a son ID défini sur une valeur unique, par exemple accordéon-17605-item-1. Cette valeur d'ID doit correspondre et correspondre aux attributs de données personnalisés, cible de données et contrôles aria trouvé sur le lien Bric (situé dans la section d'en-tête de la carte).
Ce conteneur div Bric contient également divers attributs de données personnalisés, le plus important étant parent de données. Cette valeur de cet attribut de données doit correspondre à ID du conteneur d'accordéon principal, par exemple # accordéon-17605. Cet attribut de données indique au navigateur le conteneur d'accordéon auquel cette section est liée.
Si vous apportez des modifications aux attributs de données du lien accordéon cible de données or contrôles aria, veillez à mettre à jour le ID pour le conteneur div concerné (qui contient la section du corps de la carte) et vice versa.
Pour plus d'informations sur le fonctionnement des accordéons, veuillez consulter le Documents sur Bootstrap 4.