- Components
- Flip Panel
Flip Panel
Flip Panel lets you flip between showing a front and back side on of a card. Each side can have different heights, and the card will animate to the correct hight when you flip it.
front
back
Go back!!
Example
Documentation
<t:flip-panel widgetVar="myPanel">
<f:facet name="front">
<p>front</p>
</f:facet>
<f:facet name="back">
<p>back</p>
</f:facet>
</t:flip-panel>
<button class="button" onclick="TW('myPanel').flip()">Flip</button>
Flip Panel lets you flip between showing a front and back side on of a card. Each side can have different heights, and the card will animate to the correct hight when you flip it.
Info
Tag name | flip-panel |
---|---|
Component type | io.tornadofaces.component.FlipPanel |
Renderer type | io.tornadofaces.component.FlipPanelRenderer |
Attributes
Name | Description | Required |
---|---|---|
styleClass | Styles to apply to the ul element. | false |
style | CSS Styles applied to the ul element. | false |
box | Render flip panel as a box | false |
mode | Flipping from back to front can either spin in reverse or continue in the same direction. Valid options are "reverse", "continue". Defaults to "reverse". | false |
duration | Number of milliseconds for the flip effect. Defaults to 400. | false |
flipped | Should the panel render the back side? | false |
widgetVar |
Widget variable name, accessible via TW('widgetVar') and TornadoFaces.widgets.widgetVar. Use this to load() the data or get the data via val() . Note that the Data component must be wrapped in a Form for the load() function to work. | false |
onFlip | JavaScript callback when card is flipped | false |
rendered | Should this component be rendered? | false |
Client Side Callbacks
onFlip
is called as a tab is flipped.
function onFlip(panel) {
//
}
Ajax Behavior Events
flip
will be called when a card is flipped
<t:flip-panel>
<f:ajax event="flip" listener="#{controller.flipped}">
</t:flip-panel>
public void onFlip(FlipPanelEvent event) {
FlipPanel panel = event.getFlipPanel();
}
The listener will be called with an instance of io.tornadofaces.event.FlipPanelEvent
that contains a reference to the flip panel.
Client Side API
Widget: TornadoFaces.widget.FlipPanel
Method | Params | Return type | Description |
---|---|---|---|
flip() | void | Flip the panel. |