O Accordion Bric fornece uma maneira de dividir e alternar entre ocultar e mostrar grandes quantidades de conteúdo. Os acordeões consistem em vários subelementos, como o Card Tijolo e Div contêiner Bric, o que permite que eles sejam facilmente personalizados e estilizados de forma independente.
Para adicionar mais seções de acordeão, basta selecionar um dos cartões (encontrado no contêiner div principal do acordeão) por meio da árvore de camadas e duplicá-lo usando o atalho de teclado ⌘D.
Estrutura
A estrutura de um acordeão é um pouco mais complexa do que a maioria dos outros Brics encontrado dentro Blocs. É composto por um Div recipiente Bric que tem seu Formato definido para um Recipiente de acordeão ea sua ID definido como um valor único, por exemplo acordeão-17605. Dentro deste contêiner, existem vários Card Brics. Cada cartão Bric tem um Ligação Bric dentro da seção de cabeçalho do cartão e um adicional Div recipiente que contém a seção do corpo do cartão.
Comunicação
As funções do acordeão Bric são controladas através do Ligação Bric (encontrado na seção de cabeçalho de um cartão) e o Div recipiente (que contém a seção do corpo do cartão). Ambos os itens têm atributos de dados personalizados aplicado a eles para dar-lhes a funcionalidade típica de acordeão e permitir que se comuniquem uns com os outros.
Acordeão Link Bric
O link é o elemento em que você clica para revelar a seção de acordeão. Este item possui uma configuração específica que permite funcionar como parte de um acordeão. Tem o seu interação definido para Nenhum e também tem vários atributos de dados personalizados, sendo os dois mais importantes o alvo de dados e aria-controles.
Atributos de dados de link
A alvo de dados atributo tem um valor definido para uma referência única, por exemplo # acordeão-17605-item-1. O aria-controles atributo contém um valor quase idêntico ao alvo de dados atributo, mas tem o # no início removido, por exemplo acordeão-17605-item-1. Essas referências exclusivas devem corresponder ao ID do contêiner div correspondente no qual o corpo do cartão está aninhado.
Contêiner de div de acordeão
Dentro de cada cartão Bric (encontrado dentro do recipiente principal do acordeão) há um adicional Div recipiente que tem seu ID definido como um valor único, por exemplo acordeão-17605-item-1. Este valor de ID deve corresponder e corresponder aos atributos de dados personalizados, alvo de dados e aria-controles encontrado no link Bric (localizado na seção de cabeçalho do cartão).
Este contêiner div Bric também contém vários atributos de dados personalizados, sendo o mais importante pai de dados. Este valor deste atributo de dados deve corresponder ao ID do recipiente principal do acordeão, por exemplo # Accordion-17605. Este atributo de dados informa ao navegador a qual contêiner de acordeão esta seção está relacionada.
Se você fizer alterações nos atributos de dados do link de acordeão alvo de dados or aria-controles, tome cuidado para atualizar o ID para o contêiner div relevante (que contém a seção do corpo do cartão) e vice-versa.
Para obter informações mais detalhadas sobre como funcionam os acordeões, consulte o Documentos do Bootstrap 4.