You can use the Flip Content UI Pattern to display information that when, for example, is clicked, flips and displays different information.
How to use the Flip content UI Pattern
In Service Studio, in the Toolbox, search for
The Flip Content widget is displayed.
From the Toolbox, drag the Flip Content widget into the Main Content area of your application's screen.
By default, the Flip Content widget contains CardFront and CardBack placeholders.
Add the required content for the front and back placeholders inside the Flip Content widget.
In this example, we add images by dragging the Image widget into the CardFront and CardBack placeholders and from the Image dropdown, selecting an image from the sample OutSystems UI images.
On the Properties tab, you can customize the Flip Content's look and feel by setting any of the (optional) properties.
After following these steps and publishing the module, you can test the pattern in your app.
|IsFlipped (Boolean): Optional||If True, the CardFront content is displayed first before flipping. If False, the CardBack content is displayed first before flipping. This is the default.|
|FlipSelf (Boolean): Optional||If True, the content flips event is triggered with on click. This is the default. If False, you can define the action that triggers the flip.|
|ExtendedClass (Text): Optional||Add custom style classes to the Flip Content UI Pattern. You define your custom style classes in your application using CSS.