<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.