Tokyo - Componentes | Imagen volteable
Última modificación:
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:
