Reveal

Reveal lets you show an element with an optional animation.

Look, I faded in!

Example

Documentation


<t:reveal effect="fade" widgetVar="r1">
    <h1>Look, I faded in!</h1>
</t:reveal>

<button class="button primary" onclick="TW('r1').toggle()">Fade in/out</button>

Reveal lets you show an element with an optional animation.

Info

Tag name	reveal
Component type	io.tornadofaces.component.Reveal
Renderer type	io.tornadofaces.component.RevealRenderer

Attributes

Name	Description	Required
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
onload	Show the element on DOM load. Defaults to false.	false
effect	Animation effect for the reveal. Valid options are "fade", "none". Defaults to "fade".	false
mode	Reveal by using "visiblity" or "display" CSS property. Defaults to "display".	false
duration	Effect duration in milliseconds. Defaults to 500.	false
rendered	Should this component be rendered?	false

Client Side API

Widget: TornadoFaces.widget.Reveal

Method	Return type	Description
show()	void	Show the reveal content.
hide()	void	Hide the reveal content.
toggle()	void	Hide or show the reveal content.