Oxygen 1.1.0

Accordion

El acordeón es un elemento de interfaz que permite organizar y presentar información de manera jerárquica, ocultando o mostrando secciones de contenido de forma expansible y contraíble.
Figma
Storybook
AEM

Overview

Este componente es especialmente útil cuando se tiene contenido estructurado en varias secciones y se desea maximizar el espacio en pantalla al ocultar temporalmente las secciones que no están activas. Además, no abrumas al usuario con todo el contenido de golpe, sino que le permites consumir las secciones a demanda, según sus intereses.

Características

Cada encabezado es un elemento clicable que permite a los usuarios expandir o contraer la sección correspondiente.

Animación

La apertura de los acordeones debe ser fluida y animada, con valores de animación que hagan la experiencia más agradable. Esto mejora la calidad del diseño y enriquece la experiencia de usuario en su conjunto.

Nombre
Descripción / Uso
Ejemplo
No items found.

Variantes


Nombre
Descripción / Uso
Ejemplo
No items found.

Nombre
Descripción / Uso
Ejemplo
No items found.

Opciones

En Oxygen tenemos disponibles distintas opciones en la configuración del acordeón.

Expanded

Por defecto el componente se muestra cerrado pero podemos expandir cualquiera de las secciones según lo necesitemos.

Left chevron

No puede convivir a la vez con el chevron de la derecha. Puede ser necesario utilizar esta opción cuando en la derecha tenemos otro tipo de acciones o funciones.

Switch

Obligatorio chevron izquierda.

Label

Obligatorio chevron izquierda.

Tag

Obligatorio chevron izquierda.

List

Compatible con todas las versiones del desplegable. Opción para incluir listados en el desplegable.

Nombre
Descripción / Uso
Ejemplo
No items found.

Nombre
Descripción / Uso
Ejemplo
No items found.

Behaviour