Navegación

Tabs

Secciones de la misma página que se turnan. Subrayado bajo la activa.

import { Tabs, TabsContent, TabsList, TabsTrigger } from "sebs7n-ui/tabs"

Ejemplos

Secciones de la misma página

La lista entera es una sola parada de tabulación; adentro se recorre con ← →.

Factura 0012 · Acme S.A. · $ 128.400 · vence el 30/09.

import { Tabs, TabsContent, TabsList, TabsTrigger } from "sebs7n-ui/tabs"

function Basico() {
  return (
    <Tabs className="w-full max-w-lg" defaultValue="resumen">
      <TabsList>
        <TabsTrigger value="resumen">Resumen</TabsTrigger>
        <TabsTrigger value="items">Ítems</TabsTrigger>
        <TabsTrigger value="historial">Historial</TabsTrigger>
        <TabsTrigger disabled value="afip">
          AFIP
        </TabsTrigger>
      </TabsList>
      <TabsContent value="resumen">Factura 0012 · Acme S.A. · $ 128.400 · vence el 30/09.</TabsContent>
      <TabsContent value="items">3 ítems: consultoría, hosting y soporte.</TabsContent>
      <TabsContent value="historial">Emitida el 01/09. Enviada por email el 01/09. Vista el 03/09.</TabsContent>
      <TabsContent value="afip">Sin datos.</TabsContent>
    </Tabs>
  )
}

Props

Generadas del TypeScript del paquete. Solo las props propias: las heredadas del primitivo de Base UI o del elemento HTML están en la línea «hereda de».

Tabs

Hereda las props de Tabs.Root.

Prop	Tipo	Por defecto	Descripción
`className`	`string`	—

TabsContent

Hereda las props de Tabs.Panel.

Prop	Tipo	Por defecto	Descripción
`className`	`string`	—

TabsList

Hereda las props de Tabs.List.

Prop	Tipo	Por defecto	Descripción
`className`	`string`	—

TabsTrigger

Hereda las props de Tabs.Tab.

Prop	Tipo	Por defecto	Descripción
`className`	`string`	—

Teclado

← →: Se mueve entre tabs y activa al pasar.
Home · End: Primera y última.
Tab: Sale de la lista al panel: la lista entera es una sola parada.

Accesibilidad

Base UI emite role="tablist" / tab / tabpanel con aria-selected y aria-controls.
El panel es enfocable (tabindex="0") para poder llegar a su contenido con el teclado.
La tab activa se marca con el subrayado y con el color del texto: no depende solo del color.

Reglas de uso

Contenido de la misma página, mismo nivel. Si cada sección tiene su URL, son links, no tabs.
El contenido de todas las tabs debería costar lo mismo: si una tarda 3 segundos en cargar, poné una página.
3 a 6 tabs. Más, un Select o una navegación lateral.
No anides tabs dentro de tabs.

Relacionados

ToggleGroup NavigationMenu