Acordeón

Este componente se utiliza para mostrar información detallada y diversa que puede ir desde temas o secciones como descripciones de características de tu tienda, preguntas frecuentes, detalles de productos, entre otros.

Configuración del componente

Al hacer clic en el nombre del componente encontrarás opciones generales para personalizarlo, las cuales determinarán cómo se verá y se comportará la sección. Las opciones disponibles para este componente son las siguientes:

Ajustar ancho del acordeón

Al habilitar esta opción, se mostrarán las siguientes opciones:

Ancho

Permite definir el ancho del acordeón, basado en los siguientes valores predefinidos:

• Pequeño: define el ancho del acordeón al 50% del espacio disponible.
• Mediano: define el ancho del acordeón aproximadamente al 66% del espacio disponible.
• Grande: define el ancho del acordeón aproximadamente al 83% del espacio disponible.

Cuando esta opción está deshabilitada, el acordeón se extenderá para ocupar todo el ancho de la sección.

Posición horizontal

Permite definir la posición del acordeón en el eje horizontal.

Habilitar items colapsables

Al habilitar esta opción, cuando un usuario haga clic en un item del acordeón, los demás se cerrarán. Por el contrario, al deshabilitarla, todos los items permanecerán abiertos al hacer clic en ellos.

Primer item abierto

Permite definir que el primer item del acordeón se abra por defecto al cargar la página. Cómo o cuándo este primer item se cierre dependerá del comportamiento de la opción anterior.

Mostrar íconos

Permite mostrar íconos al lado izquierdo del título de cada item. Al habilitar esta opción, se mostrará una opción de ícono en la configuración de cada item de acordeón.

Opciones de encabezado

Al habilitar esta opción, se mostrará una sección de Encabezado antes del contenido del componente. Puedes encontrar la lista de opciones en esta página.

Apariencia

Este grupo contiene las siguientes opciones para personalizar el componente:

• Estilo de bordes: permite definir cómo se mostrarán los bordes del acordeón.
• Margen superior: permite controlar el margen superior de la sección.
• Margen inferior: permite controlar el margen inferior de la sección.
• Colores del contenido: permite elegir el Paquete de colores del componente.

Animaciones

La opción Personalizar opciones permite ajustar las animaciones para este componente específico. Puedes leer cuáles están disponibles en esta página.

---

---

Configuración del subcomponente

El subcomponente de un Acordeón se llama Item de acordeón, y puedes agregar tantos como desees para proporcionar la información necesaria a tus clientes. Las opciones para este subcomponente son las siguientes:

Ícono

Permite definir un ícono para el item. Solo se mostrará si la opción Mostrar íconos está habilitada en la configuración principal del componente.

Título

Título o nombre del item del acordeón.

Nota: Este campo es obligatorio.

Contenido

Aquí puedes agregar un texto o descripción para el item del acordeón.

Imagen

Permite agregar una imagen junto con el contenido del item del acordeón. Las siguientes opciones estarán disponibles para personalizarla:

• Tamaño de la imagen: permite definir el ancho que tendrá la imagen desde el 10% hasta el 100%. Estos porcentajes dependen del ancho del item, que a su vez está definido por el ancho del acordeón completo.
• Posición de la imagen: permite definir si la imagen se mostrará antes o después del contenido del item.