Deck
amx:deck
A Deck component is a container that shows one of its child components at a time. When changing children, the transition can be animated. The deck can be navigated forward and backwards.
This component is commonly used on tablets and phones.
For examples of transitions, see Animated Transitions doc.
Appearance
Appearance characteristics for this component.
- Transition: The deck can change its child components with one of the following transitions: none, fade, flipUp, flipDown, flipStart, flipEnd, slideUp, slideDown, slideStart, and slideEnd.
- Direction: Different transitions can be used when going forward and backwards.
Behavior
Common behaviors for this component.
- The important part of a deck component is its child component called amx:transition.
- amx:transition: Specifies a transition for a deck component. It consists of the following attributes:
- Trigger Type: Sets what type of navigation will trigger the transition. It can be either backNavigate or forwardNavigate.
- Transition: Sets the transition that occurs when children change in the container. It can be one of the following transitions: none, fade, flipUp, flipDown, flipStart, flipEnd, slideUp, slideDown, slideStart, and slideEnd.
Usage
Usage guidelines for this component.
- Add animated transitions cautiously and use them consistently throughout your app.
- Transitions should start immediately on the action that triggers them.
- Consider the cultures that you are designing for if sliding left or right has other meanings.
Sample
AMX sample code for this component.
<amx:deck id="deck1"
rendered="#{pageFlowScope.pRendered}"
styleClass="#{pageFlowScope.pStyleClass}"
inlineStyle="width:95px;height:137px;overflow:hidden;
#{pageFlowScope.pInlineStyle}"
landmark="#{pageFlowScope.pLandmark}"
shortDesc="#{pageFlowScope.pShortDesc}"
displayedChild="#{pageFlowScope.pDisplayedChild}">
<amx:transition triggerType="#{pageFlowScope.pTriggerType}"
transition="#{pageFlowScope.pTransition}"/>
<amx:transition triggerType="#{pageFlowScope.pTriggerType2}"
transition="#{pageFlowScope.pTransition2}"/>
<amx:commandLink id="linkCardBack1" text="Card Back">
<amx:setPropertyListener from="linkCardA"
to="#{pageFlowScope.pDisplayedChild}"/>
</amx:commandLink>
<amx:commandLink id="linkCardA1" text="Card Front A">
<amx:setPropertyListener from="linkCardB"
to="#{pageFlowScope.pDisplayedChild}"/>
</amx:commandLink>
<amx:commandLink id="linkCardB1" text="Card Front B">
<amx:setPropertyListener from="linkCardC"
to="#{pageFlowScope.pDisplayedChild}"/>
</amx:commandLink>
<amx:commandLink id="linkCardC1" text="Card Front C">
<amx:setPropertyListener from="linkCardD"
to="#{pageFlowScope.pDisplayedChild}"/>
</amx:commandLink>
<amx:commandLink id="linkCardD1" text="Card Front D">
<amx:setPropertyListener from="linkCardE"
to="#{pageFlowScope.pDisplayedChild}"/>
</amx:commandLink>
<amx:commandLink id="linkCardE1" text="Card Front E">
<amx:setPropertyListener from="linkCardBack"
to="#{pageFlowScope.pDisplayedChild}"/>
</amx:commandLink>
</amx:deck>
Related
