Cómo diseñar un acordeón

En este artículo aprenderás a crear un acordeón.

Así es como se construye:

Ver

  • Selecciona «Panel dinámico» en la sección de contenido dinámico y colócalo en el lienzo; a continuación, ve a la paleta Propiedades y establece el diseño del panel en «Vertical».acc 1
  • Coloca un segundo «Panel dinámico» en el lienzo; a continuación, selecciona un «Rectángulo» y manteniendo pulsado comando (Mac) o control (Widnows) colócalo dentro del nuevo panel, cambia el tamaño y la forma de tu rectángulo para simular una cabecera y coloca una flecha en el lado izquierdo.acc 1
  • Dentro de tu panel, debajo de la cabecera, puedes establecer la información/imágenes/elementos que quieres mostrar; a continuación, haz clic en el panel, y se mostrarán las reglas redimensionables, empuja el botón hacia arriba hasta que cubras la información y el panel sólo muestre la cabecera.
  • Mantén pulsado Comando (Mac) o Control (Widnows) y arrastra el segundo panel dentro del primero. Verás un tinte azul cuando arrastres el elemento dentro; esto simulará un elemento en tu acordeón.
  • Repite las acciones para crear más opciones y colócalas una debajo de otra dentro del primer panel.acc 1

Eventos

Selecciona el primer «Rectángulo», ve a la paleta Eventos y haz clic en «Añadir evento». 

  1. En el cuadro de diálogo, haz clic en «Elegir activador», pasa el ratón por encima de la sección «Ratón» y selecciona «Activar».
  2. En «Elegir acción», selecciona «Redimensionar elemento» y asegúrate de que está seleccionado el panel que contiene tu primer elemento.acc 1

Para el valor, selecciona «Fijo» y ajusta el valor sólo para la altura; aquí, tendrás que redimensionar aumentando el número para mostrar toda la información que tengas en tu panel. Haz clic en «Aceptar» para terminar de crear el evento.

Ve a la paleta Eventos y haz clic en el signo «+» para añadir un nuevo evento.

  1. En el cuadro de diálogo, haz clic en «Elegir activador», pasa el ratón por encima de la sección «Ratón» y selecciona «Activar».
  2. En «Elegir acción», selecciona «Girar elemento» y selecciona la flecha.
  3. Para el valor, selecciona el «Fijo» 180°. Haz clic en «Aceptar» para terminar de crear tu evento.acc 1

Con el «Rectángulo» seleccionado, ve a la paleta Eventos y haz clic en «Copiar todos los eventos».
Selecciona el siguiente rectángulo (Opción 2), y pega todos los eventos; edita los eventos para redirigir el objetivo y ajustar el tamaño y la rotación.
Repite con el resto de «Opciones».

Simula tu prototipo.