L'accordéon Bric permet 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 Card Bric et Div conteneur Bric, qui permet de les personnaliser et de les styliser facilement de manière indépendante.
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 conteneur Bric qui a son Type mis à un Conteneur d'accordéon : besoins particuliers, topographie du site et intégration paysagère. ID défini sur une valeur unique, par exemple accordéon-17605. Dans ce conteneur, il y a plusieurs Card Brics. Chaque carte Bric a une Lien Bric dans la section d'en-tête de la carte et un autre Div contenant qui contient la section du corps de la carte.
Communication
Les fonctions de l'accordéon Bric 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 le contrôles aria.
Lier les attributs de données
Votre 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ée dans le conteneur principal en accordéon) se trouve 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 le contrôles aria trouvé sur le lien Bric (situé dans la section entê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.