Conteúdo com guias Bric

O conteúdo com guias Bric fornece uma área de conteúdo que tem seu conteúdo controlado por guias de navegação. Ao contrário da maioria dos outros Brics encontrado dentro Blocs, o conteúdo com guias Bric é composta por duas partes separadas, uma lista Bric e um Div Bric. Ambos os elementos que compõem o conteúdo com guias Bric contêm importantes atributos de dados personalizados que os permitem trabalhar em uníssono.

Adicionando mais guias

Para adicionar mais guias, basta selecionar uma das guias do item da lista através da árvore de camadas e duplicá-la usando o atalho de teclado ⌘D. Tome cuidado para também duplicar a área de conteúdo Div que será necessária para exibir o conteúdo.

Comunicação

O elemento de lista de uma área de conteúdo com guias exibe os links da guia que são clicados para revelar o conteúdo da guia relevante. Cada um desses links tem um conjunto de interação de URL, este URL aponta para um ID, por exemplo # nav-36725-content-3 e um atributo personalizado chamado aria-controles com um ID correspondente sem o # no início, por exemplo nav-36725-content-3. Esses IDs também correspondem ao atributo de dados personalizados ária-labelledby, que é encontrado no elemento Div de conteúdo com guias que está relacionado a este link da guia.

Tab container div aria-labelledby atributo personalizado

Dica para iniciantes

Se você fizer alterações na interação da URL do link da guia ou estiver tentando adicionar mais áreas com guias, certifique-se de atualizar também essas alterações nos atributos de dados personalizados aria-controls e aria-labelledby para que todos correspondam.

Para obter informações mais detalhadas sobre como as áreas de conteúdo com guias funcionam, consulte o Documentos do Bootstrap 4.

Atualizado em 3 de dezembro de 2018

Esse artigo foi útil?

Artigos Relacionados