Tabs
O componente Tabs nos permite separar conteúdos de mesma hierarquia em guias diferentes.
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;
O componente é composto por um texto e uma linha.
Utilizamos o componente quando temos mais de dois conteúdos do mesmo contexto, e precisamos alternar o foco entre eles.
Essa variante serve como um container utilizado para agrupar as tabs.
Essa variante é a guia individual, que nos permite exibir o conteúdo depois que uma tab é ativada.
Os títulos das Tabs devem ser claros e resumidos em até 2 palavras, devendo fazer referência ao conteúdo da tab.
- Alternar entre conteúdos de mesmo contexto
- Alternar a visualização de dados
- Alternar opções de planos
Instale o componente via terminal.
npm install @nimbus-ds/tabs
Propriedades adicionais podem ser passadas para o componente <Tabs>. Consulte a documentação do div para ver uma lista das props aceitas pelo elemento <Tabs>.
O componente Tabs pode ser usado em modo controlado, onde o estado da tab selecionada é gerenciado externamente. Para isso, devem ser fornecidas as props selected e onTabSelect:
- selected: Índice da tab atualmente selecionada
- onTabSelect: Função callback que é executada quando o usuário seleciona uma tab
Este modo é útil quando você precisa:
- Sincronizar o estado das tabs com outros componentes
- Implementar lógica personalizada ao mudar de tab
- Controlar o estado das tabs a partir de um componente pai