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