Card, CardNavigator, CardHeader and CardFooter Containers
Create animated transitions between screens using Card containers.
The Card, CardNavigator, CardHeader, and CardFooter containers can be used to create animated transitions between different content areas in an app. You can either perform slide or 3D flip animations between content areas that are wrapped in Card containers.
This functionality is inspired by the Gmail login dialog, shown in the animated image below:
In the Gmail example shown above, a slide transition is used.
The content you want to animate must be wrapped in a Card container.
The CardNavigator container allows you to transition from one nested Card to another nested Card.
The Card and CardNavigator containers can both include headers and footers. These are added using the CardHeader and CardFooter containers.
CardNavigator containers can only contain nested CardContainers (and CardHeader and CardFooter containers)
To add a Card, CardNavigator, CardHeader, or CardFooter container, select the [Container] item in the Data Controls section from the UX Builder toolbox.
Then select the container type from the dialog:
Select the CardNavigator Actions action.
The CardNavigator Actions has two actions:
- Navigate to card
Transitions to a nested Card within a CardNavigator
- Get CardNavigator info
The image below shows the builder for the Navigate to card action.
When you specify the target Card, you can use special target Card names as shown in the image below:
The transition types are show in the image below. The slide type supports different slide directions (left, right, up, down). The flip type supports different flip directions (ltr - left to right, rtl - right to left, ttb - top to bottom, and btt - bottom to top).
- Card navigator
Name of the CardNavigator
- Target card name
Target Card within the specified CardNavigator
- Transition type
The type of transition to use:
- slide-left: Card slides in from the left.
- slide-right: Card slides in from the right.
- slide-up: Card slides in from the bottom.
- slide-down: Card slides in from the top.
- flip-ltr: Card flips over from the left.
- flip-rtl: Card flips over from the right.
- flip-ttb: Card flips down from the top.
- flip-btt: Card flips up from the bottom.
- Transition duration
The number of milliseconds for the transition. If you want to switch from on nested Card to another without an animated transition, set the transition duration to 0.
Card and CardNavigator containers have three additional properties:
- Center card horizontally
Displays the Card or CardNavigator centered horizontally on the page. You must specify a width for the Card or CardNavigator.
- Center card vertically
Display the Card or CardNavigator centered vertically on the page. You must specify a height for the Card or CardNavigator
- Container border
The border style to display around the Card or CardNavigator.
The Container border can be one of the pre-defined border styles shown below:
If you want a completely custom border style set the style to Default and define the custom style in the Container style property. If you select one of the pre-defined border styles all of the the settings in the Container style property are ignored.
The center horizontally and center vertically options are only available if the Card or CardNavigator is not nested inside another container (such as a PanelCard, plain Container, etc.)
It is quite common to want to center (both horizontally and vertically) content in a PanelCard. However the Card and CardNavigator options to center content are not available if the Card or CardNavigator is nested inside another container.
In the case of a PanelCard, you can use the PanelCard's Center panel contents property to center the content.
Using Card and CardNavigator Containers to Create Animated Transitions
A common UI pattern in web applications is to create animated transitions between different content areas.
In this video, we show how the CardNavigator container can be used to create flip and slide transitions between different content that has been wrapped in Card containers.