El contenido con pestañas Bric proporciona un área de contenido que tiene su contenido controlado por pestañas de navegación. A diferencia de la mayoría de los demás Brics encontrado dentro Blocs, el contenido con pestañas Bric se compone de dos partes separadas, una lista Bric y un div Bric. Ambos elementos que componen el contenido con pestañas Bric contienen importantes atributos de datos personalizados que les permiten trabajar al unísono.
Para agregar más pestañas, simplemente seleccione una de las pestañas de elementos de la lista a través del árbol de capas y duplíquela usando el atajo de teclado ⌘D. Tenga cuidado de duplicar también el Div del área de contenido que se necesitará para mostrar el contenido.
Comunicación
El elemento de lista de un área de contenido con pestañas, muestra los enlaces de las pestañas en los que se hace clic para revelar el contenido de la pestaña relevante. Cada uno de estos enlaces tiene un conjunto de interacción de URL, esta URL apunta a un ID, por ejemplo # nav-36725-content-3 y un atributo personalizado llamado aria-controles con un ID coincidente sin el # al principio, por ejemplo nav-36725-contenido-3. Estos ID también coinciden con el atributo de datos personalizados aria-etiquetada por, que se encuentra en el elemento Div de contenido con pestañas que está relacionado con este enlace de pestaña.
Valor de interacción de la URL del enlace de la pestaña
Atributo personalizado de aria-controls de URL de enlace de pestaña
Tab contenedor div aria-labelledby atributo personalizado
Si realiza cambios en la interacción de la URL del enlace de la pestaña o está intentando agregar más áreas con pestañas, asegúrese de actualizar también estos cambios en los atributos de datos personalizados aria-controls y aria-labelledby para que todos coincidan.
Para obtener información más detallada sobre cómo funcionan las áreas de contenido con pestañas, consulte la Documentos de Bootstrap 4.