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. 

Image 15521

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".

Image 15522

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.

Image 26499

    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).

    Image 15525

    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

    Image 15530

    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. 

    Image 15531

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

    Image 15532


    ¿Le resulta útil este artículo?
    © 2023 Netex Knowledge Factory. Todos los derechos reservados. Aviso Legal | Política de Privacidad | Política de Cookies.
    -