Card, CardNavigator, CardHeader and CardFooter Containers
Description
Create animated transitions between screens using Card containers.
Discussion
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)
Adding a Card Container
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:
How to Transition Between Cards
To transition from one Card to another Card you use a JavaScript method. You can use Action JavaScript to define this code.
Select the CardNavigator Actions action.
The CardNavigator Actions has two actions:
- Action
- Description
- Navigate to card
Transitions to a nested Card within a CardNavigator
- Get CardNavigator info
Gets information about a CardNavigator and stores the info in a Javascript variable. The data in this variable is an object that includes properties such as a list of the child Cards, the name of the currently visible Card, the name of the first, last, next, and previous Card, etc.
The image below shows the builder for the Navigate to card action.
The builder allows you to specify the CardNavigator to navigate, the target Card, the type of transition, the animation length, and optional JavaScript to execute when the transition completes.
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).
Summary of Navigate to Card Properties
- Property
- Description
- 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.
- onTransitionComplete
JavaScript code to execute when the transition completes.
Card and CardNavigator Properties
Card and CardNavigator containers have three additional properties:
- Property
- Description
- 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.)
Centering a Card or CardNavigator in a PanelCard
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.
Videos
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.