El Bric de contenido con pestañas ofrece un área de contenido cuyo contenido se controla mediante pestañas de navegación. A diferencia de la mayoría de otros Brics encontrado dentro BlocsEl contenido con pestañas de Bric se compone de dos partes independientes: un Bric de lista y un Bric de división. Ambos elementos que componen el contenido con pestañas de Bric contienen atributos de datos personalizados importantes 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.