Tab bar
Overview
El Tab Bar ayuda a organizar la información cuando hay varios apartados dentro de una misma pantalla. En lugar de obligar al usuario a cargar nuevas páginas o perder el contexto, las pestañas permiten cambiar de sección de manera rápida y directa.
Variantes
El componente Tab bar tiene dos variantes de diseño: Default e Inverse.
Además, existen dos formas de distribuir las pestañas:
- Stretched (proporcional): cada pestaña se reparte el espacio disponible, ocupando todas la misma anchura. Es útil cuando se busca equilibrio visual y se quiere dar el mismo peso a todas las secciones.
- Fluid (hug): cada pestaña ocupa solo el espacio necesario según el texto de su etiqueta. Esto permite una distribución más flexible y compacta, adaptándose al contenido de cada tab.
Opciones
El Tab Bar está pensado para ser flexible y adaptarse a distintos escenarios dentro de los productos digitales de Repsol. Por eso, cuenta con varias opciones de configuración que permiten ajustar su comportamiento y diseño a cada necesidad.
Divider
Las pestañas pueden apoyarse visualmente sobre un divisor. Esto ayuda a separar mejor el Tab Bar del resto del contenido y aporta mayor claridad en interfaces con mucha información.
Tabs + Icon
Pensado para aquellos casos en los que sea útil añadir un recurso visual junto al texto de la pestaña. El icono refuerza el significado del label y facilita el reconocimiento rápido, sobre todo en experiencias móviles.
Overflow Right & Left
Cuando hay más pestañas de las que caben en la pantalla, aparecen controles de desplazamiento a los lados (derecha e izquierda). De esta forma, se mantiene la navegación clara y accesible sin perder secciones importantes.
