Accordion

El componente Accordion nos permite comprimir el contenido en contenedores que pueden abrirse o cerrarse.

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 en Figma

Anatomía del componente

El componente está conformado por un header y un contenedor que puede recibir texto y/u otros componentes.

Guidelines

Utilizamos el Accordion para mostrar grandes cantidades de contenido en un espacio reducido mediante la revelación progresiva. El header puede llevar un título para cada bloque de contenido, lo que permite al usuario abrir el contenido que más le interesa.

Comportamiento

Siempre que se utilice el Accordion en un grupo, cuando uno se abre el otro se cierra automáticamente.

Recomendaciones de uso

Organización de pantallas con mucho contenido
Optimizar el espacio en contextos con mucha información.
Agrupación de información de estructura similar

Componentes relacionados

Text - Puede utilizarse cuando necesitamos mostrar texto que no debe ocultarse bajo ninguna circunstancia, o en condiciones en las que el contenido es esencial para un determinado contexto.

Implementación

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