Las Tabs se utilizan para agrupar contenido diferente pero relacionado, lo que permite a los usuarios navegar por las vistas sin salir de la página. Siempre contienen al menos dos elementos y una pestaña está activa a la vez.
Medium · Small
Importa los estilos base y los sub-componentes de Tabs.
1import 'nave-ui-library/styles.css'2import { Tabs, TabsList, TabsTrigger, TabsContent } from 'nave-ui-library/react'Un conjunto de pestañas estándar. El estado activo aplica un sombreado suave y fondo blanco sobre la base gris.
Configura los datos básicos de tu perfil de Nave.
Soporta variantes medium (42px) y small (32px), ajustando automáticamente paddings y tamaño de fuente.
Las pestañas pueden contener estructuras complejas como listas de movimientos, badges y separadores.
Todas las props disponibles para el componente Tabs.
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'medium' | 'small' | medium | Tamaño del componente Tabs. |
defaultValuereq | string | — | Valor de la pestaña activa por defecto. |
value | string | — | Valor controlado de la pestaña activa. |
onValueChange | (value: string) => void | — | Callback al cambiar de pestaña. |
disabled | boolean | false | Desactiva un TabsTrigger individual. |
className | string | — | Clases CSS adicionales para personalización. |
1{2 "name": "Tabs",3 "description": "Tabs para organizar contenido en pestañas navegables.",4 "component": "Tabs",5 "files": [6 "components/base/navegation/Tabs.tsx"7 ],8 "dependencies": [9 "react",10 "@radix-ui/react-tabs"11 ],12 "props": {13 "size": {14 "type": "'medium' | 'small'",15 "required": false,16 "default": "medium",17 "description": "Tamaño del componente Tabs."18 }19 }20}