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;
El componente está conformado por un header y un contenedor que puede recibir texto y/u otros componentes.
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.
Siempre que se utilice el Accordion en un grupo, cuando uno se abre el otro se cierra automáticamente.
- Organización de pantallas con mucho contenido
- Optimizar el espacio en contextos con mucha información.
- Agrupación de información de estructura similar
- 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.
Instalá el componente via terminal.
npm install @nimbus-ds/accordion
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' | The borderBottom property defines a lower border of the accordion body. |
borderTop | 'base' | 'none' | The borderTop property defines a top border of the accordion body. |
padding | 'base' | 'base' | Padding properties are used to generate space around the content area of an Accordion.Body.. |
Accordion.Item
Name | Type | Default | 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' | 'base' | The borderTop property defines a lower border of the accordion header. |
borderBottom | 'base' | The borderBottom property defines a lower border of the accordion header. |