Back

showPopup

JS Py

Hello World

Content:
- Examples
- Properties
- Methods

"Popup" is like a short notification that quickly appears on the screen, providing extra options or information in a concise and unobtrusive manner.

pop = ui.showPopup( msg, options?, duration?, action? ) → ui object: Popup

Here are the available methods for the Popup Component.

Examples

Example - Basic

class Main extends App
{
    onStart()
    {
        // Create a fullscreen layout with objects vertically centered.
        this.main = ui.addLayout("main", "Linear", "VCenter,FillXY")

        // Add button control to the main layout
        this.btn1 = ui.addButton(this.main, "Show Popup")

        // Add a callback handler when the button is touched
        this.btn1.setOnTouch( this.onTouch )
    }

    onTouch()
    {
        // Display popup on the Top with transition Grow
        ui.showPopup("Hello from popup!")
    }
}

from hybrid import ui

def OnStart():
    main = ui.addLayout("main", "Linear", "VCenter,FillXY")
    btn1 = ui.addButton(main, "Show Popup")
    btn1.setOnTouch(onTouch)

def onTouch(event):
    ui.showPopup("Hello from popup!")

Copy All Run

Example - Popup with transition

class Main extends App
{
    onStart()
    {
        // Creates a fullscreen layout with objects vertically centered.
        this.main = ui.addLayout("main", "Linear", "VCenter,FillXY")
        this.main.setChildMargins(0, 0, 0, 0.02)

        // Adds first button to the main layout
        this.btn1 = ui.addButton(this.main, "Top & Grow", "Primary")
        this.btn1.setOnTouch( this.onTouch1 )

        // Adds second button to the main layout
        this.btn2 = ui.addButton(this.main, "Bottom and Slide", "Secondary")
        this.btn2.setOnTouch( this.onTouch2 )
    }

    onTouch1()
    {
        // Display popup on the Top with transition Grow
        ui.showPopup("Hello world.", "Top,Grow")
    }

    onTouch2()
    {
        // Display popup on the Bottom with transition Slide in 1.5 seconds.
        ui.showPopup("Hello world.", "Bottom,Slide", 1500)
    }
}

class Main extends App
    onStart()
        # Creates a fullscreen layout with objects vertically centered.
        this.main = ui.addLayout("main", "Linear", "VCenter,FillXY")
        this.main.setChildMargins(0, 0, 0, 0.02)

        # Adds first button to the main layout
        this.btn1 = ui.addButton(this.main, "Top & Grow", "Primary")
        this.btn1.setOnTouch( this.onTouch1 )

        # Adds second button to the main layout
        this.btn2 = ui.addButton(this.main, "Bottom and Slide", "Secondary")
        this.btn2.setOnTouch( this.onTouch2 )

    onTouch1()
        # Display popup on the Top with transition Grow
        ui.showPopup("Hello world.", "Top,Grow")

    onTouch2()
        # Display popup on the Bottom with transition Slide in 1.5 seconds.
        ui.showPopup("Hello world.", "Bottom,Slide", 1500)

Copy All Run

Example - With action

class Main extends App
{
    onStart()
    {
        // Create a fullscreen layout with objects vertically centered
        this.layMain = ui.addLayout("main", "Linear", "VCenter,FillXY")

        // Add a button control to the main layout
        this.btn = ui.addButton(this.layMain, "Show Popup")

        // Add a callback handler when the button is touched
        this.btn.setOnTouch( this.showMessage )
    }

    showMessage()
    {
        // Show a popup with additional action
        this.snackbar = ui.showPopup("Please login to continue", "Bottom,Center", "", "Login")

        // Add a callback handler when the action is touched
        this.snackbar.setOnAction( this.onAction )
    }

    onAction()
    {
        // Hide the popup when the action button is click
        this.snackbar.hide()
        ui.showPopup("Login is click. Show login Page.")
    }
}

class Main extends App
    onStart()
        # Create a fullscreen layout with objects vertically centered
        this.layMain = ui.addLayout("main", "Linear", "VCenter,FillXY")

        # Add a button control to the main layout
        this.btn = ui.addButton(this.layMain, "Show Popup")

        # Add a callback handler when the button is touched
        this.btn.setOnTouch( this.showMessage )

    showMessage()
        # Show a popup with additional action
        this.snackbar = ui.showPopup("Please login to continue", "Bottom,Center", "", "Login")

        # Add a callback handler when the action is touched
        this.snackbar.setOnAction( this.onAction )

    onAction()
        # Hide the popup when the action button is click
        this.snackbar.hide()
        ui.showPopup("Login is click. Show login Page.")

Copy All Run

Properties

The following properties are available on the Popup object:

duration → Number

text → String

Methods

The following methods are available on the Popup object:

getPosition() → Object

hide()

setOnAction( callback )

setOnClose( callback )

setPosition( vertical?, horizontal? )

show()

Number: Time in milliseconds. Pass this if you don't want the default auto hide duration.

String: “The message to display on the pop-up.”

String: “A comma separated options.
Duration: `Short`”, “ `Long`
Vertical Alignment: `Top`”, “ `Bottom`
Horizontal Alignment: `Left`”, “ `Center`”, “ `Right`
Action options: `Icon`”, “ `HideOnAction`
Transition: `Grow`”, “ `Fade`”, “ `Slide`”, “ `Collapse`”, “ `Zoom`”

String: “Action button text”

String: “Vertical alignment. Values can be `Top` `Bottom`”

String: “Horizontal alignment. Values can be `Left` `Center` and `Right`”

function()

pop.duration
Sets or returns the duration of the popup in milliseconds.

pop.getPosition
Returns the position of the popup. The returned object is of the form { vertical, horizontal }

pop.hide
Hide the popup.

pop.setOnAction
Adds an action callback when the user touches the action button. The btnText param must
be provided in order to create an action button.

pop.setOnClose
Adds an onClose callback to your popup.

pop.setPosition
Updates the position of the popup.

pop.show
Show the popup.

pop.text
Sets or returns the text of the popup.