Accordion

O componente Accordion nos permite comprimir conteúdos em containers que podem ser abertos ou fechados.

import React from "react";
import { Box, Accordion, Text } from "@nimbus-ds/components";
import { TiendanubeIcon } from "@nimbus-ds/icons";

const Example: React.FC = () => (
  <Accordion>
    <Accordion.Item index="0">
      <Accordion.Header
        icon={<TiendanubeIcon size={18} />}
        subtitle="Caption one"
        title="Title one"
      />
      <Accordion.Body>
        <Box
          borderColor="neutral-interactive"
          borderStyle="dashed"
          borderWidth="1"
          padding="2"
          width="100%"
        >
          <Text fontSize="base" textAlign="center">
            Replace me with your content
          </Text>
        </Box>
      </Accordion.Body>
    </Accordion.Item>
    <Accordion.Item index="1">
      <Accordion.Header
        borderBottom="base"
        icon={<TiendanubeIcon size={18} />}
        subtitle="Caption two"
        title="Title two"
      />
      <Accordion.Body borderBottom="base">
        <Box
          borderColor="neutral-interactive"
          borderStyle="dashed"
          borderWidth="1"
          padding="2"
          width="100%"
        >
          <Text fontSize="base" textAlign="center">
            Replace me with your content
          </Text>
        </Box>
      </Accordion.Body>
    </Accordion.Item>
  </Accordion>
);

export default Example;

Ver no Figma

Anatomia do componente

O componente é composto por um header e um container que pode receber texto ou outros componentes.

Guidelines

Utilizamos o Accordion para mostrar grandes quantidades de conteúdo num pequeno espaço por meio de uma divulgação progressiva. O header pode carregar um título para cada bloco de conteúdo permitindo a pessoa usuária abrir o conteúdo que mais lhe interessa.

Comportamento

Sempre que os accordions são utilizados em um grupo, quando um é aberto o outro se fecha automaticamente.

Recomendação de uso

Organizar telas com muitos conteúdos
Otimizar espaço em contextos com muita informação
Agrupar informações de estrutura similar

Componentes relacionados

Text - Pode ser usado quando precisamos mostrar um texto que não deve ser ocultado em hipótese alguma, ou em condições onde o conteúdo é essencial para um determinado contexto.

Implementação

Instale o componente via terminal.

npm install @nimbus-ds/accordion

Props

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