Cómo crear pestañas dinámicas/toglables en Bootstrap 5

Las pestañas o las píldoras de la dinámica togglable tienen un mecanismo potente en Bootstrap 5 que se crea para navegar a través de una gran cantidad de datos dentro de un área pequeña. Esto divide el contenido en diferentes paneles y cada panel es visible a la vez. Esto ayuda al usuario a acceder fácil y rápidamente al contenido cambiando entre paneles sin salir de la página.

Este artículo le brinda información sobre

• Cómo crear pestañas dinámicas y toglables?
• Cómo crear píldoras dinámicas y toglables?

Cómo crear pestaña Togglable y Dynamic

Para crear pestañas togglables, agregue el atributo data-bs-toggle = "pestaña" a cada etiqueta de anclaje y dar una identificación única a cada pestaña. Después, cree una etiqueta con la clase .panel de pestaña, y envuélvalos dentro de una etiqueta con una clase .contenido de pestañas. Por último, darles un efecto de transición con la clase .desteñir si quieres.

• 
  Mensaje
  


• 
  Perfil
  


• 
  Configuración
  

Esta es una pestaña de mensaje.
Esta es una pestaña de perfil.
Esta es una pestaña de configuración.

Así es como se crea pestañas de togglables/dinámicas.

Cómo crear píldoras dinámicas y toglables

Para crear pestañas togglables, agregue el atributo data-bs-toggle = "píldora" a cada etiqueta de anclaje y dar una identificación única a cada pestaña. Después, cree una etiqueta con la clase .panel de pestaña, y envuélvalos dentro de una etiqueta con una clase .contenido de pestañas. Por último, darles un efecto de transición con la clase .desteñir.

• 
  Mensaje
  


• 
  Perfil
  


• 
  Configuración
  

<
!-- Tab Panes ->

Esta es una pestaña de mensajes usando el atributo de toggle de datos de píldora.
Esta es una pestaña de perfil con el atributo de toggle de datos de píldoras.
Esta es una pestaña de configuración utilizando el atributo de toggle de datos de píldora.

Así es como se crea píldoras dinámicas/toglables.

Conclusión

Las pestañas dinámicas/toglables se crean para manejar o mostrar grandes cantidades de datos dentro de un área específica o pequeña, separarlos con la ayuda de los paneles, y cada panel se puede ver uno a la vez. Los usuarios pueden cambiar a través de diferentes pestañas para ver el contenido sin salir de la página. Pestañas togglables/dinámicas en Bootstrap 5 no usaba menús desplegables porque hacía complejo de usabilidad y accesibilidad y difícil.