Tokyo - Components | Flipimage

The Flipimage component allows you to create an interactive image that rotates and can display text, audio, or video when you click it.

It's a component that you can add inside screens, popups and columns.

This is a complex component with Flipimage items inside.

And the Flipimage items has an image and the content that will be displayed when it rotate(a text, a video, an audio...).

The component and its items have specific properties. To configure it correctly, we must select each item. You can do it from the path of crumbs or from the "Structure" tab.

Setup process

1. Select the Flipimage component and access its properties. There you can:

  • Choose the style of the component (bordered or borderless).
  • Indicate whether the component influences the completeness of the unit objectives.

2. Select the Flipimage Item item and access its properties. Here you can:

  • Define the rotation style of the image (vertical, horizontal...).
  • Determine the width itill occupy on the screen.
  • Modify the color of the icon associated with the component. By default, it assumes the primary color of the unit.
  • Decide whether or not to display the icon associated with the component.

3. Tap on the Flipimage item image and, in its properties, define which image will be displayed. Remember: if the image is smaller than the available space, it will be displayed at its size, it will not be rescaled. It will only be reduced if it is larger than the available space.

In addition, you can add credits and/or a caption within the image.

4. Finally, select the Flipimage Item again and, on the Add tab, you can decide which items will appear when the image rotates: texts, audios or videos. Add the elements you deem necessary and configure them. Remember that if the content is very wide, an internal scroll will be generated within the component.

Thus, you can configure interactive elements like this: