Tabs

El componente Tabs nos permite separar contenidos de una misma jerarquía en pestañas separadas.

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;

Anatomía del componente

Se compone de texto y una línea.

Guidelines

Usamos este componente cuando tenemos más de dos contenidos en el mismo contexto y precisamos alternar el foco entre ellas.

Tabs

Esta variante sirve como contenedor usado para agrupar las tabs.

Tabs.item

Se trata de la pestaña individual, que nos permite exhibir el contenido apenas una tab es activada.

Contenido

Los títulos de las Tabs deben ser claros y resumidos en hasta 2 palabras, debiendo hacer referencia al contenido de la tab.

Recomendaciones de uso

Alternar entre contenidos de un mismo contexto
Alternar la visualización de datos
Alternar opciones de planes

Implementación

Instalá el 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.