Componentes de Bootstrap

Pestañas y píldoras

Cambian entre vistas del mismo contenido sin salir de la página: pestañas para pocas secciones, píldoras para filtros y ajustes.

Las pestañas dividen un tema en vistas paralelas y enseñan una a la vez. Las pestañas se leen como secciones de una página; las píldoras, como una elección (un filtro, un menú de ajustes). Las dos son el componente nav con un panel por entrada.

Cuándo usarlo

Úsalo

De dos a seis pestañas con nombres cortos y paralelos.
Pestañas para vistas de lo mismo (resumen, participantes, calificaciones); píldoras para filtros y para un menú vertical de ajustes.
Mostrar un número con un badge solo cuando ayude a decidir adónde ir.
Que la primera pestaña sea la que más gente necesita.

No

Usar pestañas para navegar a otras páginas; usa una barra de navegación o enlaces.
Repartir un formulario largo, que hay que completar en orden, entre pestañas; usa pasos.
Anidar pestañas dentro de pestañas.
Desactivar una pestaña sin decir por qué.

Anatomía

Una lista de entradas (nav con nav-tabs o nav-pills), cada una un enlace o botón (nav-link), una de ellas activa, y un panel (tab-pane) por entrada dentro de tab-content.

Variantes y estados

Pestañas

A summary of the course: dates, teachers and the next activity.

Everyone enrolled, with their role and last access.

The gradebook, one column per activity.

Píldoras

Every course you can see.

Courses you started and have not finished.

Courses with every activity completed.

Píldoras verticales

The name, language and time zone of the site.

Logo, colours and the home page.

What is sent, to whom and how often.

La navegación propia de Moodle

El siguiente ejemplo no se dibuja con las clases de Bootstrap: es la navegación secundaria que Moodle da a un curso en la versión elegida (la píldora con un punto para el elemento seleccionado en Moodle 5.3, la pestaña subrayada en 4.x). Un plugin nunca la redibuja; solo se coloca a su lado.

Navegación secundaria de Moodle

Estados

Estados

Combinaciones

Combinación	Para qué usarla
Pestañas × paneles	Vistas del mismo tema, una visible a la vez. La primera pestaña es la que más gente necesita.
Píldoras × filtro	Una elección que cambia lo que muestra una lista (Todos, En curso, Completados). Añade un recuento en un badge solo cuando ayude.
Píldoras verticales × ajustes	Secciones de una pantalla de ajustes: la lista a la izquierda, el panel a la derecha.
Pestañas dentro de una tarjeta	Pon las pestañas en el encabezado de la tarjeta y los paneles en su cuerpo.

Qué cambia Didactika y por qué

Qué cambiamos	Por qué ayuda
La pestaña seleccionada lleva una línea y un tinte, las demás son discretas	Dónde estás se ve a la vez por la línea, el tinte y el peso, así que nunca depende solo del color.
Las píldoras son totalmente redondas	Se leen como una elección y no como secciones, que es la diferencia entre píldoras y pestañas.
Los tintes al pasar y los anillos de foco siguen una regla	El control bajo el puntero o bajo el teclado responde siempre igual.
La navegación propia de Moodle se deja como la dibuja Moodle	El usuario encuentra la misma navegación en cada curso y en cada plugin; los plugins no deben enseñar una segunda.

Clases

Clase	Qué hace
`nav`	Base de toda lista de pestañas y píldoras
`nav-tabs`, `nav-pills`	El aspecto de la lista
`nav-link`, `nav-item`	Una entrada y su envoltorio
`active`, `disabled`	Estado de una entrada
`flex-column`	Apila las entradas (píldoras verticales)
`tab-content`, `tab-pane`	Los paneles

En esta versión

Bootstrap 5.3 guarda sus colores en variables CSS (--bs-*), así que un tema recolorea el componente con una sola variable.

Bootstrap 4.6 compila sus colores en las clases, así que un tema recolorea el componente recompilando su hoja de estilos. Las entradas de los ejemplos son botones; Bootstrap 4 los dibuja como enlaces, así que la capa restablece el botón.

Accesibilidad

La lista lleva role="tablist", cada entrada role="tab" con aria-selected y aria-controls, cada panel role="tabpanel" con aria-labelledby.
Las flechas mueven entre pestañas y al panel se llega con Tab: conserva los botones nativos.
Una pestaña desactivada lleva aria-disabled y tabindex="-1".
La pestaña activa nunca se marca solo con color: también tiene el subrayado o la píldora rellena.