Tabs

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

Default

Full width

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

Additional props are passed to the <Tabs> element. See div docs for a list of props accepted by the <Tabs> element.