Accordion

El componente acordeón organiza la información en secciones plegables, permitiendo al usuario expandir y contraer contenido según su interés.

Características

• Jerarquía clara: Agrupa información relacionada en secciones, evitando una pantalla sobrecargada.
• Interacción intuitiva: Un simple clic o toque despliega o esconde el contenido.
• Transiciones suaves: Un buen acordeón debe abrirse y cerrarse con fluidez para una experiencia agradable.
• Estado visible: El usuario debe entender qué secciones están abiertas o cerradas en todo momento.
• Accesibilidad: Asegurar que pueda usarse con teclado y lectores de pantalla para una mejor inclusión.

Recomendaciones de uso

• Menos es más: Usa el acordeón cuando realmente sea necesario, evitando un exceso de secciones plegables.
• Títulos descriptivos: Cada sección debe indicar claramente qué información contiene.
• Mantén el contexto: Si un usuario abre una sección, evita que al cerrar otra la página se desplace inesperadamente.
• Prioriza el contenido clave: No escondas información crítica que los usuarios necesiten ver de inmediato.

El componente Acordeón en el sistema de diseño Energy está pensado para organizar la información de manera clara y accesible. Para adaptarse a distintas necesidades, ofrece diversas opciones de configuración. Con esta documentación, podrás implementarlo de forma efectiva y en línea con los principios de diseño del sistema.

‍

Items expandidos

Dentro de las opciones de configuración del componente, contamos con una versión en la que los ítems se muestran expandidos por defecto.

Esta opción es especialmente útil cuando se quiere garantizar que cierta información sea visible de inmediato, sin requerir interacción por parte del usuario. Facilita el acceso a contenido clave, mejora la experiencia en dispositivos donde la interacción puede ser limitada y permite una lectura más fluida en secciones donde cada detalle es relevante desde el primer momento.

Ancho máximo

Para garantizar una lectura cómoda y equilibrada, se recomienda que el ancho del Acordeón no supere los 910px (equivalente a 8 columnas como referencia). Esto evita líneas de texto demasiado largas, mejorando la legibilidad y la experiencia del usuario.

En dispositivos con un ancho menor a 1280px, es preferible que el Acordeón ocupe el ancho completo de la pantalla, asegurando una mejor adaptación y accesibilidad en diferentes tamaños de visualización.

‍

Comportamiento del contenedor

El Acordeón actúa como un contenedor flexible cuyo alto varía según la interacción del usuario. Al expandirse, su contenido empuja hacia abajo los elementos que se encuentran debajo en la vista, mientras que al contraerse, ocupa el espacio mínimo posible.

Los ítems del Acordeón pueden expandirse de forma simultánea, sin restricciones de un número máximo o mínimo de secciones abiertas al mismo tiempo. Además, es posible definir que, en su estado inicial, uno de los ítems se muestre desplegado por defecto, facilitando el acceso a información relevante desde el primer momento.

‍

Comportamiento del contenido

El contenido dentro del Acordeón es completamente flexible, permitiendo adaptarlo según las necesidades del diseño.

En caso de requerir una disposición especial del contenido dentro de un ítem expandido, es posible desacoplar (detach) el componente, asegurando una estructura adecuada sin limitaciones.

Sin embargo, no se recomienda insertar contenedores con surface propia (como Cards u otros elementos con fondo y bordes definidos) dentro del Acordeón, ya que esto puede generar una jerarquía visual confusa y afectar la coherencia del diseño.

Las microinteracciones y animaciones en un componente Acordeón no solo aportan estética, sino que juegan un papel clave en la experiencia del usuario. Un diseño bien ejecutado con transiciones cuidadas puede hacer que la interacción sea más intuitiva, fluida y agradable.

‍

Hover

Al pasar el cursor sobre el título o el chevron, el color del texto cambia de Content High a Content Mid, proporcionando una señal visual de interacción. Este mismo efecto se mantiene cuando el Acordeón está expandido.

Expandir el acordeón al hacer clic

Cuando el Acordeón está colapsado:

• Al hacer clic, el chevron gira 180º en sentido contrario a las agujas del reloj, apuntando hacia arriba.
• El contenido interno se despliega progresivamente, siguiendo la referencia del video en la sección "Demo" del Figma.

Cerrar el acordeón al hacer clic

• Al hacer clic nuevamente, el chevron gira 180º en el sentido de las agujas del reloj, volviendo a su posición inicial.
• El contenido interno se oculta progresivamente, manteniendo una transición fluida como en la referencia del video en "Demo" del figma.