Accordéon

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.

Ajout de sections supplémentaires

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 et le 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.

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.

Le 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.

Astuce pour les débutants

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.

Mis à jour le 3 décembre 2018

Cet article a-t-il été utile?

Articles Relatifs