Componentes | Imagen volteable

El componente Imagen Volteable permite crear una imagen interactiva que, al pulsarla, se gira y puede mostrar texto, audio o vídeo.

Se trata de un componente que podremos añadir dentro de pantallas, popups y columnas.

Este es un componente complejo que consta de Items volteables en su interior.

Y los items volteables constan, a su vez, de una imagen y el contenido que se mostrará al girar (un texto, un vídeo, un audio...).

El componente y sus ítems tienen propiedades específicas. Para configurarlo correctamente, debemos seleccionar cada elemento. Podremos hacerlo desde el camino de migas o desde la pestaña "Estructura".

Proceso de configuración

1. Selecciona el componente Volteador y accede a sus propiedades. Ahí podrás:

Darle un título.
Seleccionar una vista
- Vista estándar.
- Vista personalizada. Esta vista permitirá configurar y personalizar los colores del componentes y otros elementos adicionales.
Elegir el estilo del componente (con borde o sin borde).
Modificar el ancho y la alineación.
Indicar si el componente influye en la completitud de los objetivos de la unidad.

Recuerda que si eliges la Vista "Personalizado", se activarán nuevas propiedades que te permitirán:

Elegir un color de fondo o una imagen de fondo para el componente.
Mostrar el título del reverso de la tarjeta volteable.

2. Selecciona el elemento Item de volteador y accede a sus propiedades. Aquí podrás:

Definir el estilo de giro de la imagen (vertical, horizontal...).
Determinar el ancho que ocupará en pantalla.
Modificar el color del icono asociado al componente. Por defecto, asume el color primario de la unidad.
Decidir si se muestra o no el icono asociado al componente.

Si has elegido la Vista "Personalizado", adicionalmente podrás :

Mostrar un borde y definir el color de ese borde.
Establecer un color de fondo para la carátula de la imagen volteable y una opacidad. Resultará útil si hemos añadido en este componente una imagen en formato png trasparente.
Establecer una imagen de fondo para la carátula y su tipo, es decir, cómo se comportará (si se repite, si no se repite).
Establecer un color de fondo para el reverso de la imagen volteable y una opacidad.
Establecer una imagen de fondo para el reverso y su tipo (si se repite o no).

3. Pulsa sobre la imagen del Item de volteador y, en sus propiedades, define qué imagen se mostrará. Recuerda: si la imagen es más pequeña que el espacio disponible, se verá a su tamaño, no se reescalará. Solo se reducirá en caso de que sea más grande que el espacio disponible.

Adicionalmente, podrás añadir dentro de la imagen créditos y/o un pie de foto.

4. Por último, selecciona de nuevo el Item de volteador y, en la pestaña Añadir podrás decidir qué elementos aparecerán cuando la imagen gire: textos, audios o vídeos. Añade los elementos que consideres necesarios y configúralos. Recuerda que, si el contenido es muy amplio, se generará un scroll interno dentro del componente.

Así, podrás configurar elementos interactivos como este: