LifeUI
1.53.2Tabs
Se utiliza para mostrar contenidos en una interfaz con pestañas
contenido info personal
Variantes
Utiliza la propiedad variant para cambiar el estilo visual.
Controlar estado
Utiliza las propiedades value y onValueChange para controlar el estado del tab
contenido info personal
Tab activa: info
Props
Tabs
| Prop | Tipo | Requerido | Descripción |
|---|---|---|---|
defaultValue | string | - | El valor de la pestaña que debe estar activa al renderizarse inicialmente. Usalo cuando no controles el estado de las pestañas |
value | string | - | El valor controlado de la pestaña que se activará. Debes usarslo junto con onValueChange |
onValueChange | (value: string) => void | - | Manejador de evento cuando cambia el valor |
variant | 'pill' | 'line' | 'solid' | - | La variante del aspecto visual de las pestañas |
classNames | { tabTriggerIndicator?: string; tabTrigger?: string } | - | Clases personalizadas para diferentes partes del componente. |
TabsTrigger
| Prop | Tipo | Requerido | Descripción |
|---|---|---|---|
value | string | - | Un valor único que asocia el disparador(TabsTrigger) con un contenido |
disabled | boolean | - | Deshabilita el elemento |
TabsContent
| Prop | Tipo | Requerido | Descripción |
|---|---|---|---|
value | string | - | Un valor único que asocia el contenido con un disparador(TabsTrigger) |