Sistema de diseño
Tab
Componente interactivo que permite a los usuarios alternar entre diferentes secciones de contenido en la misma página, facilitando la navegación y organización de la información.
Figma
Storybook
AEM
Overview
Este componente es comúnmente utilizado para organizar información en secciones temáticas o categorías, proporcionando una forma intuitiva y visualmente clara de navegar entre ellas.
Buenas prácticas
Las pestañas han de ser visualmente identificables como un elemento interactivo que los usuarios sepan sin lugar a dudas que pueden interactuar con ellas.
Cada pestaña tiene asociado un área de contenido específica. Al seleccionar una pestaña, se muestra el contenido correspondiente, y las demás pestañas permanecen ocultas.
Hay que indicar claramente cuál es la pestaña activa en todo momento.
Nombre
Descripción / Uso
Ejemplo
No items found.
Variantes
Para adaptarse a las diferentes necesidades de diseño, este componente cuenta con variantes internas que ayudan a configurar el comportamiento en cada caso de uso.
Achura de las pestañas
La variante “Width Streched” se adapta a un ancho fijo de pestaña independiente de la cantidad de texto que tenga el label.
En la variante “Width Fluid” el ancho de la pestaña se adapta al contenido del label.
Nombre
Descripción / Uso
Ejemplo
No items found.
Nombre
Descripción / Uso
Ejemplo
No items found.
Opciones
Cualquiera de las variantes anteriores tiene la opción de configurarse con distintas opciones:
Items with icon
Por defecto el componente aparece sin ellos, pero se puede configurar para que aparezca el icono al lado de los items, siempre seguirán la regla de uso de color de clicabilidad.
Uso del Divider como elemento de apoyo
Por defecto el divider aparece como elemento de apoyo de las pestañas. Se utiliza para resaltar su presencia y usabilidad, pero si en diseño se decide que vaya sin este elemento es una opción viable en Oxygen.
Nombre
Descripción / Uso
Ejemplo
No items found.
Nombre
Descripción / Uso
Ejemplo
No items found.
Behaviour
Pointer overflow
Cuando no se puede mostrar toda la línea de pestañas debido a una limitación de espacio horizontal, el componente está preparado para hacer overflow a la izquierda y a la derecha, adaptándose a las necesidades del diseño.
Recursos adicionales
Encuentra más información y documentación específica para cada plataforma
Anterior
Overview componentes
Siguiente
Overview componentes