Tabs

O componente Tabs nos permite separar conteúdos de mesma hierarquia em guias diferentes.

Default

Full width

Controlado

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;

Anatomia do componente

O componente é composto por um texto e uma linha.

Guidelines

Utilizamos o componente quando temos mais de dois conteúdos do mesmo contexto, e precisamos alternar o foco entre eles.

Tabs

Essa variante serve como um container utilizado para agrupar as tabs.

Tabs.item

Essa variante é a guia individual, que nos permite exibir o conteúdo depois que uma tab é ativada.

Conteúdo

Os títulos das Tabs devem ser claros e resumidos em até 2 palavras, devendo fazer referência ao conteúdo da tab.

Recomendação de uso

Alternar entre conteúdos de mesmo contexto
Alternar a visualização de dados
Alternar opções de planos

Implementação

Instale o componente via terminal.

npm install @nimbus-ds/tabs

Props

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>.

Modo Controlado

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