Tabs
El componente Tabs nos permite separar contenidos de una misma jerarquía en pestañas separadas.
import React from "react";
import { Tabs, Box, Text } from "@nimbus-ds/components";
const Example: React.FC = () => (
<Tabs preSelectedTab={2}>
<Tabs.Item label="Tab 1">
<Box
borderColor="neutral-interactive"
borderStyle="dashed"
borderWidth="1"
padding="2"
>
<Text fontSize="base" textAlign="center">
Replace me with your content 1
</Text>
</Box>
</Tabs.Item>
<Tabs.Item label="Tab 2">
<Box
borderColor="neutral-interactive"
borderStyle="dashed"
borderWidth="1"
padding="2"
>
<Text fontSize="base" textAlign="center">
Replace me with your content 2
</Text>
</Box>
</Tabs.Item>
<Tabs.Item label="Tab 3">
<Box
borderColor="neutral-interactive"
borderStyle="dashed"
borderWidth="1"
padding="2"
>
<Text fontSize="base" textAlign="center">
Replace me with your content 3
</Text>
</Box>
</Tabs.Item>
</Tabs>
);
export default Example;Se compone de texto y una línea.
Usamos este componente cuando tenemos más de dos contenidos en el mismo contexto y precisamos alternar el foco entre ellas.
Esta variante sirve como contenedor usado para agrupar las tabs.
Se trata de la pestaña individual, que nos permite exhibir el contenido apenas una tab es activada.
Los títulos de las Tabs deben ser claros y resumidos en hasta 2 palabras, debiendo hacer referencia al contenido de la tab.
- Alternar entre contenidos de un mismo contexto
- Alternar la visualización de datos
- Alternar opciones de planes
Instalá el componente via terminal.
npm install @nimbus-ds/tabsSe pueden pasar propiedades adicionales al componente <Tabs>. Consulta la documentación del div para ver una lista de las props aceptadas por el elemento <Tabs>.
El componente Tabs puede ser usado en modo controlado, donde el estado de la tab seleccionada es manejado externamente. Para esto, se deben proporcionar las props selected e onTabSelect:
- selected: Índice de la tab actualmente seleccionada
- onTabSelect: Función callback que se ejecuta cuando el usuario selecciona una tab
Este modo es útil cuando necesitas:
- Sincronizar el estado de las tabs con otros componentes
- Implementar lógica personalizada al cambiar de tab
- Controlar el estado de las tabs desde un componente padre