Popup

Function of Popup component is similar to Page that basically containing all components of 1 page and displaying on the screen The only different thing is the animation when appear. Instead of page-to-page swiping, "Popup" appears from bottom to top, and it always appear on the upper layer of an app.

Usage

In most of the cases, "Popup" component located inside a "Page" and waiting for an action occurred such as "Button" pressed to call it out.

Action [ Created | Shown ]

Simply click the action you want to define and drag components inside.

Created:

Mostly used to define further UI design within the Popup.

Shown:

It's used to define an action once "Popup" is shown on screen.

Example

Pop an "Alert" to notice user about "Final Sale" discount. The logic is showed below. ( ) is used to define the action we selected and [ ] is used to define the properties we set:

Button -> (Pressed) -> Popup -> (Shown) -> Alert [Title: Final Sale, Content: 60% OFF!]

Properties

Simply click a gear on the right hand corner of related "Grid" component to edit the properties.

Popup Mode [ slide | fade | none ] - It's used to define the animation when "Popup" appear.

Visibility [ Visible | Invisible ] - It's used to define whether the "Popup" is appear immediately or waiting for an action occurred. Set Visible if you want to appear the "Popup" immediately.

Transparent [ Yes | No ] - It's used to define if the background of the "Popup" is transparent or not.