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
NameDescriptionRequired
styleClassStyles to apply to the ul element.false
styleCSS Styles applied to the ul element.false
boxRender flip panel as a boxfalse
modeFlipping from back to front can either spin in reverse or continue in the same direction. Valid options are "reverse", "continue". Defaults to "reverse".false
durationNumber of milliseconds for the flip effect. Defaults to 400.false
flippedShould 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
onFlipJavaScript callback when card is flippedfalse
renderedShould 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.