Tabs
Tabbed content switcher.
Vista previa
Este ejemplo usa estilos solo para documentación. En producción, utiliza una de las recetas incluidas (CSS, Tailwind o UnoCSS).
Tabbed content switcher.
Uso
Compón Root, List, Trigger, Content.
import * as Tabs from "@solidiom/tabs"
;<Tabs.Root>Contenido de Tabs</Tabs.Root>Instalación
Instala el paquete con pnpm add @solidiom/tabs. El paquete requiere dependencias pares compatibles de solid-js y @solidjs/web.
Partes
Tabs expone 4 partes:
- Root —
data-part="root". - List —
data-part="list". - Trigger —
data-part="trigger". - Content —
data-part="content".
Estilos
Tabs lleva los atributos data-scope="tabs" y data-part en cada parte para la selección CSS/receta. Los atributos de estado como data-state, data-disabled y data-highlighted se exponen donde corresponda.
Interacción con teclado
| Tecla | Comportamiento |
|---|---|
| ArrowRight | Mueve el foco al siguiente disparador de pestaña. |
| ArrowLeft | Mueve el foco al disparador de pestaña anterior. |
| Home | Mueve el foco al primer disparador de pestaña. |
| End | Mueve el foco al último disparador de pestaña. |
| Enter/Space | Activa la pestaña enfocada (en modo de activación manual). |
Composición
Tabs está diseñado para componerse con otras primitivas. Sus partes pueden combinarse con Field, Button u otras primitivas según sea necesario.
Renderizado SSR e hidratación
Tabs se renderiza como HTML semántico durante el renderizado en servidor. El comportamiento interactivo (manejadores de teclado, gestión de estado) se activa en la hidratación sin desplazamiento de diseño.