WaveMaker Docs

WaveMaker Docs

  • Get started
  • Widgets
  • How-to
  • Releases
  • Login
  • Start free trial

›Container

Widgets & Prefabs Library

  • Widgets Library
  • Prefabs Overview

Cards

  • Overview
  • Creating a Card
  • Data Source
  • Templates
  • Configuration
  • Behavior Settings
  • Properties, Events & Methods
  • Use Cases

Data Table

  • Overview
  • Creating a Data Table
  • Data Source
  • Layouts
  • Configuration
  • Field Configuration
  • Row Expansion
  • Actions
  • Events & Methods
  • Use Cases

List

  • Overview
  • Creating a List
  • Data Source
  • Templates
  • Configuration
  • Behavior Settings
  • Properties, Events & Methods
  • Use Cases

Form

  • Overview
  • Creating a Form
  • Data Source
  • Layouts
  • Configuration
  • Fields Configuration
  • Events & Methods

Live Form

  • Overview
  • Creating a Live Form
  • Data Source
  • Layouts
  • Configuration
  • Fields Configuration
  • Actions
  • Events & Methods
  • Use Cases

Form Widgets

  • Button
  • Button Group
  • Text
  • Number
  • Textarea
  • Select
  • Chips
  • Currency
  • Radioset
  • Checkbox
  • CheckboxSet
  • Toggle
  • Switch
  • Date,  Time and  Datetime
  • Calendar
  • FileUpload
  • Color Picker
  • Slider
  • Rating Widget
  • Select Locale

Live Filter

  • Overview
  • Creating a Live Filter
  • Data Source
  • Layouts
  • Configuration
  • Field Configuration
  • Actions
  • Events & Methods
  • Use Cases

Container

  • Accordion
  • Container
  • Panel
  • Tabs
  • Tile
  • Wizard

Basic Widgets

  • Anchor
  • HTML
  • Icon
  • Iframe
  • Label
  • Message
  • Progress Bar
  • Richtext Editor
  • Search
  • Search - Basic Usage
  • Spinner
  • Tree
  • Media -  Audio,  Picture &  Video Widgets

Charts

  • Chart Widgets
  • Callback Event

Navigation

  • Breadcrumb
  • Creating a Breadcrumb
  • Dropdown Menu
  • Dropdown Menu - Basic Usage
  • Nav
  • Nav Bar
  • Popover
  • Popover - Basic Usage

Advanced Widgets

  • Carousel
  • Login
  • Marquee

Dialog Widgets

  • Modal Windows/ Dialogs
  • Alert Dialog
  • Confirm Dialog
  • IFrame Dialog
  • Design Dialog
  • Page Dialog
  • Login Dialog

Mobile & Device Widgets

  • Camera
  • Media List
  • Segmented Control
  • Barcode Scanner

Prefabs

  • Youtube
  • Googlemaps
  • QRCode
  • Box Viewer Prefab
  • OAuth

    • OAuth Prefabs
    • Box
    • Facebook
    • Google
    • Instagram
    • LinkedIn
Edit

Tile

Tile is a container for other widgets used to present a set of objects. Tile widget lets you to directly add an image, text box, video, or web code to user dashboard. Functions similar to the container but it comes with some default styling which makes it different from a container. Users cannot create partials using tile.

Tiles can be used while creating Dashboard like UI where you need to show analytics data.

When to use Tile:

  • Unlike other containers, its size is limited, and it is not recommended to place too many widgets and/or complex widgets.

Properties

You can also use the Conditional Class property from the Style tab to set the class based upon a condition. See here for How to.

PropertyDescription
NameThe name is a unique identifier for tile.
Layout
WidthThe width of your widget can be specified in px or % (i.e 50px, 75%).
HeightThe width of your widget can be specified in px or % (i.e 50px, 75%).
Behavior
ShowShowing determines whether or not a component is visible. It is a bindable property.
Load on Demand (visible only when show property is bound to a variable)When this property is set and show property is bound, the initialization of the widget will be deferred till the widget becomes visible. This behavior improves the load time. Use this feature with caution, as it has a downside (as we will not be able to interact with the widget through script until the widget is initialized). When show property is not bound the widget will be initialized immediately.
AnimationThis property controls the animation of an element. The animation is based on the CSS classes and works only in the run mode.
Format
Horizontal AlignSet text alignment horizontally.

Events

EventDescription
Mouse Events
On clickThis event handler is called whenever the click event is triggered on a widget.
On double clickThis event handler is called whenever the double click event is triggered on a widget.
On mouse overThis event fires when the mouse hovers over this widget.
On mouse outThis event fires when the mouse moves away from this widget.
On mouse enterThis event handler is called whenever the mouse enters the widget.
On mouse leaveThis event handler is called whenever the mouse leaves the widget.
Touch Events
On tapThis event handler is called whenever the tap event is triggered on a widget.
On double tapThis event handler is called whenever the double tap event is triggered on a widget.
On swipe upThis event handler is called whenever a swipeup event is triggered.
On swipe downThis event handler is called whenever a swipe down event is triggered.
On swipe leftThis event handler is called whenever a swipeleft event is triggered.
On swipe rightThis event handler is called whenever a swiperight event is triggered.
On pinch inThis event handler is called whenever pinch event is triggered.
On pinch outThis event handler is called whenever pinch out event is triggered.
Keyboard Events
On enter key pressWhen the user hits ENTER/Return while the focus is in this editor, execute the specified event handler.
Last updated on 11/27/2019 by Swetha Kundaram
← TabsWizard →
  • Properties
  • Events
WaveMaker
  • PRICING
  • PARTNERS
  • CUSTOMERS
  • ABOUT US
  • CONTACT US
Terms of Use | Copyright © 2013-2019 WaveMaker, Inc. All rights reserved.