componente · @solu30/ui-kit/navigation
TabsRoot
La raíz del modo composición, para cuando necesitás controlar el layout de las pestañas y del contenido. Si sólo tenés una lista de ítems, <Tabs items={[...]} /> hace lo mismo con menos código.
79 sitios de import en 9 de 15 verticales — un archivo que la importa cuenta una vez, monte una instancia o veinte.
- TheCharterPanel
- carlosmartinpavon
- cmp-packages
- dietaly
- elliot
- gestorsalon
- luigi
- prepchat
- raquetea
El componente, montado
Cargando el espécimen…
export function TabsRootSpecimen() {
return (
<Stage label="TabsRoot · la API compuesta — el panel «Competir» del socio, tal cual está en Raquetea" tall wide>
<TabsCompuesto />
</Stage>
)
}De specimens/navigation.tsx · TabsRootSpecimen: el espécimen del Muestrario, no un ejemplo oficial del paquete. Muestra cómo se usa la pieza de verdad, montada contra los tipos instalados —eso es lo que vale— pero no es documentación del kit.
Cómo se usa
import { TabsContent, TabsList, TabsRoot, TabsTrigger } from '@solu30/ui-kit/navigation'Anatomía
Las partes que componen TabsRoot se importan del mismo subpath. Sueltas no significan nada: se montan siempre dentro de su padre.
TabsRoot
├── TabsContent
├── TabsList
└── TabsTriggerProps
| Prop | Requerida | Tipo | Qué hace |
|---|---|---|---|
| value | opcional | string | — |
| defaultValue | opcional | string | — |
| onValueChange | opcional | (value: string) => void | — |
| variant | opcional | "underline" | "pills" | "elevated" | — |
| size | opcional | "sm" | "md" | — |
Ejemplo del paquete
// La composición: el estado vive en TabsRoot y los hijos lo leen por contexto.
// Cada TabsTrigger se aparea con su TabsContent por el mismo `value`.
<TabsRoot defaultValue="datos" variant="underline">
<TabsList>
<TabsTrigger value="datos">Datos</TabsTrigger>
<TabsTrigger value="pagos">Pagos</TabsTrigger>
</TabsList>
<TabsContent value="datos">…</TabsContent>
<TabsContent value="pagos">…</TabsContent>
</TabsRoot>Del @example del JSDoc de @solu30/ui-kit, sin editar: son 65 de los 541 símbolos. La sangría y los renglones en blanco son los del paquete.