Como criar guias TOGLEABLE/dinâmico no bootstrap 5

Guias ou pílulas alternáveis/dinâmicas têm um mecanismo poderoso no bootstrap 5 que é criado para navegar por uma enorme quantidade de dados em uma pequena área. Isso divide o conteúdo em diferentes painéis e cada painel é visível um de cada vez. Isso ajuda o usuário a acessar o conteúdo de maneira fácil e rápida, alternando entre painéis sem sair da página.

Este artigo fornece informações sobre

• Como criar guias ToGleableable e Dynamic?
• Como criar pílulas alternáveis ​​e dinâmicas?

Como criar guia Togoleable e Dynamic

Para criar guias alternáveis, adicione o atributo data-bs-toggle = “guia” a cada tag de âncora e dê um ID exclusivo a cada guia. Depois, crie uma tag com a classe .Tab-pane, e embrulhe -os dentro de uma tag com uma aula .Content. Por fim, dê a eles um efeito de transição com a classe .desaparecer se você quiser.

• 
  Mensagem
  


• 
  Perfil
  


• 
  Contexto
  

Esta é uma guia de mensagem.
Esta é uma guia de perfil.
Esta é uma guia de configuração.

É assim que você cria guias alternáveis/dinâmicas.

Como criar pílulas alternáveis ​​e dinâmicas

Para criar guias alternáveis, adicione o atributo data-bs-toggle = “pílula” a cada tag de âncora e dê um ID exclusivo a cada guia. Depois, crie uma tag com a classe .Tab-pane, e embrulhe -os dentro de uma tag com uma aula .Content. Por fim, dê a eles um efeito de transição com a classe .desaparecer.

• 
  Mensagem
  


• 
  Perfil
  


• 
  Contexto
  

<
!-- Guias painéis ->

Esta é uma guia de mensagem usando o atributo de toggle de dados da pílula.
Esta é uma guia de perfil usando o atributo de toggle de dados da pílula.
Esta é uma guia de configuração usando o atributo de toggle de dados da pílula.

É assim que você cria pílulas alternáveis/dinâmicas.

Conclusão

Guias alternáveis/dinâmicas são criadas para lidar ou mostrar grandes quantidades de dados dentro de uma área específica ou pequena, separá -lo com a ajuda de painéis, e cada painel é visível um de cada vez. Os usuários podem alternar através de diferentes guias para ver o conteúdo sem sair da página. Guias alternáveis/dinâmicas no bootstrap 5 não usaram menus suspensos porque tornou a usabilidade e a acessibilidade complexa e difícil.