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

Tabs

Name	Type	Description
children*	ReactElement<TabsButtonProps>[];	The content of the tabs.
preSelectedTab	number	Sets the indicated tab as active by default. If unset, defaults to first tab.
fullWidth	boolean	Determines if tabs should span available width.
selected*	number	The currently selected tab index.
onTabSelect*	object	Callback fired when the selected tab changes.

Tabs.Item

Name	Type	Description
label*	string	Label of the tabpanel. Used to pair with it's corresponding tab control.
labelContent	ReactNode;	Optional content of the tabpanel.
children*	ReactNode \| ReactNode[];	The content of the tabs item.

Tabs.Button

Name	Type	Description
label*	string	Label of the tab button.
labelContent		Content of the tab button.
active	boolean	Determines if tab is active.
index*	number	Position of the tab inside the tab list.
setActiveTab*	(index: number) => void;	Function executed when clicking the tab.
fullWidth	boolean	Determines if tab spans all available width.