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.

Accordion

Name	Type	Default	Description
children	React.ReactNode		The content of the accordion.
selectedDefault	string		Informs which accordion item is open by default, this value must be the same as informed in the index of each item

Accordion.Body

Name	Type	Default	Description
children*	React.ReactNode		The content of the accordion body.
borderBottom	'base' 'none'	'none'	The borderBottom property defines a lower border of the accordion body.
borderTop	'base' 'none'	'none'	The borderTop property defines a top border of the accordion body.
padding	'base' 'none'	'base'	Padding properties are used to generate space around the content area of an Accordion.Body..

Accordion.Item

Name	Type	Description
children*	React.ReactNode	The content of the accordion body.
index*	string	Unique indicator to identify accordion items
testId	string	This is an attribute used to identify a DOM node for testing purposes.

Accordion.Header

Name	Type	Default	Description
children	React.ReactNode \| ((data: { selected: string; index: string }) => React.ReactNode);		The content of the accordion header.
title	string		The title to display in the accordion header.
subtitle	string		The subtitle to display in the accordion header.
icon	React.ReactNode		The SVG contents to display in the accordion header.
noIconToggle	boolean		Removes the arrow icon that shows if the accordion item is open or not which makes it possible to create a custom indicator.
borderTop	'base' 'none'	'base'	The borderTop property defines a lower border of the accordion header.
borderBottom	'base' 'none'		The borderBottom property defines a lower border of the accordion header.