SegmentsTabs Component Demo
Navegación por segmentos de vuelo con soporte completo para temas, accesibilidad y responsive design.
Viaje corto (2 segmentos)
Ejemplo de navegación con pocos segmentos de vuelo.
Select flight 1 of 2
Showing full journey prices including tax
Estado actual:
{
"selectedTab": 0,
"selectedSegment": {
"departure": "MAD",
"arrival": "BCN",
"day": "Mon, 12 Aug"
}
}Viaje largo (4+ segmentos)
Ejemplo de navegación con múltiples segmentos de vuelo.
Select flight 1 of 4
Showing full journey prices including tax
Estado actual:
{
"selectedTab": 0,
"selectedSegment": {
"departure": "MAD",
"arrival": "BCN",
"day": "Mon, 12 Aug"
},
"totalSegments": 4
}API Reference
| Prop | Tipo | Requerido | Descripción |
|---|---|---|---|
tabs | SegmentTab[] | Sí | Array de segmentos de vuelo con departure, arrival y day |
selectedTab | number | Sí | Índice del tab actualmente seleccionado |
onTabSelected | (index: number) => void | Sí | Callback cuando se selecciona un tab |
ariaLabel | string | No | Etiqueta ARIA personalizada para el contenedor de tabs |
testId | string | No | Prefijo personalizado para IDs de testing |
Características de Accesibilidad
- Navegación con teclado (flechas, Enter, Espacio)
- Roles ARIA apropiados (tablist, tab)
- Estados accesibles (selected, disabled)
- Etiquetas descriptivas para screen readers
- Focus management y outline visible
- Indicadores visuales para todos los estados
Soporte de Temas
- Tokens de color del Design System
- Modo claro y oscuro automático
- Variables CSS para máxima flexibilidad
- Transiciones suaves entre temas
- Colores semánticos para estados