componentes / tabs

Tabs

Alterna entre secciones distintas de contenido, siguiendo el patrón de pestañas de WAI-ARIA.

Cómo usar

Compón `Tabs` con un `TabList` de `Tab`s y un `TabPanel` por pestaña; pestaña y panel se enlazan por `value`. Funciona no controlado (`defaultValue`) o controlado (`value` + `onValueChange`). Las flechas, Home y End se mueven entre pestañas y omiten las deshabilitadas; usa `activation="manual"` para exigir Enter o Espacio.

preview

Preferencias generales.

Tabs.tsx

import { Tab, TabList, TabPanel, Tabs } from "vaiperui";
 
<Tabs defaultValue="general">
  <TabList aria-label="Ajustes">
    <Tab value="general">General</Tab>
    <Tab value="account">Cuenta</Tab>
    <Tab value="billing" disabled>Facturas</Tab>
  </TabList>
  <TabPanel value="general">Preferencias generales.</TabPanel>
  <TabPanel value="account">Datos de la cuenta.</TabPanel>
</Tabs>

Colores

preview

primary

success

warning

danger

colores.tsx

<Tabs defaultValue="a" variantColor="primary">
  <TabList aria-label="…">
    <Tab value="a">General</Tab>
    <Tab value="b">Cuenta</Tab>
  </TabList>
</Tabs>
 
<Tabs defaultValue="a" variantColor="success">
  <TabList aria-label="…">
    <Tab value="a">General</Tab>
    <Tab value="b">Cuenta</Tab>
  </TabList>
</Tabs>
 
<Tabs defaultValue="a" variantColor="warning">
  <TabList aria-label="…">
    <Tab value="a">General</Tab>
    <Tab value="b">Cuenta</Tab>
  </TabList>
</Tabs>
 
<Tabs defaultValue="a" variantColor="danger">
  <TabList aria-label="…">
    <Tab value="a">General</Tab>
    <Tab value="b">Cuenta</Tab>
  </TabList>
</Tabs>

Tamaños

preview

tamanos.tsx

<Tabs defaultValue="a" size="sm">
  <TabList aria-label="…">
    <Tab value="a">General</Tab>
    <Tab value="b">Cuenta</Tab>
  </TabList>
</Tabs>
 
<Tabs defaultValue="a" size="md">
  <TabList aria-label="…">
    <Tab value="a">General</Tab>
    <Tab value="b">Cuenta</Tab>
  </TabList>
</Tabs>
 
<Tabs defaultValue="a" size="lg">
  <TabList aria-label="…">
    <Tab value="a">General</Tab>
    <Tab value="b">Cuenta</Tab>
  </TabList>
</Tabs>

Color personalizado

preview

Naranja

Violeta

color-personalizado.tsx

<Tabs defaultValue="a" customColor="#f97316">
  <TabList aria-label="…">
    <Tab value="a">General</Tab>
    <Tab value="b">Cuenta</Tab>
  </TabList>
</Tabs>
 
<Tabs defaultValue="a" customColor="#8b5cf6">
  <TabList aria-label="…">
    <Tab value="a">General</Tab>
    <Tab value="b">Cuenta</Tab>
  </TabList>
</Tabs>

Orientación y activación

preview

General

vertical

General

manual

comportamiento.tsx

<Tabs defaultValue="a" orientation="vertical">…</Tabs>
 
<Tabs defaultValue="a" activation="manual">…</Tabs>

Props

Prop	Valores	Predeterminado	Descripción
value	string	ninguno	Pestaña activa (controlado)
defaultValue	string	ninguno	Pestaña activa inicial (no controlado)
onValueChange	(value: string) => void	ninguno	Se llama cuando cambia la pestaña activa
orientation	horizontal \| vertical	horizontal	Dirección de la lista de pestañas y de las flechas
activation	auto \| manual	auto	auto activa al enfocar; manual espera Enter o Espacio
variantColor	primary \| success \| warning \| danger	primary	Color de acento del estado activo y del anillo de foco
customColor	string \| { light, dark }	ninguno	Cualquier color CSS (o un par por tema). Reemplaza a variantColor
size	sm \| md \| lg	md	Tamaño del control y del texto
animation	none \| smooth \| fast \| bounce	smooth	Transición entre estados
Tab: value, icon, disabled	string, ReactNode, boolean	ninguno	value enlaza la pestaña con su panel; icon se muestra antes de la etiqueta
TabPanel: value	string	ninguno	Panel mostrado mientras la pestaña con el mismo value está activa

Accesibilidad

`TabList` tiene `role="tablist"` y `aria-orientation`; cada `Tab` es un botón con `role="tab"`; cada `TabPanel` tiene `role="tabpanel"`.
`aria-selected` marca la pestaña activa; `aria-controls` y `aria-labelledby` enlazan cada pestaña con su panel por `value`.
Roving tabindex: solo la pestaña activa entra en el orden de Tab (`tabIndex=0`); las demás usan `-1`.
Las flechas siguen la orientación (Izquierda/Derecha en horizontal, Arriba/Abajo en vertical) y dan la vuelta; las pestañas deshabilitadas se omiten.
Con `activation="auto"` (por defecto) el foco selecciona la pestaña; con `"manual"` el foco solo se mueve y Enter o Espacio selecciona.
Los paneles inactivos reciben `hidden`; el panel es enfocable (`tabIndex=0`) para que quien usa teclado llegue a su contenido.

Teclado

Tecla	Acción
Tab	Mueve el foco a la pestaña activa y luego a su panel.
Arrow keys	Mueve el foco a la pestaña anterior/siguiente según la orientación.
Home / End	Mueve el foco a la primera/última pestaña habilitada.
Enter / Space	Selecciona la pestaña enfocada (necesario solo con `activation="manual"`).

Ten en cuenta

Indica `value` o `defaultValue`; sin ninguno, ninguna pestaña queda seleccionada y todas tienen `tabIndex=-1`, así que la lista no es alcanzable con teclado.
Da al `TabList` un `aria-label` o `aria-labelledby`; el componente no añade ninguno.