showPopover

Content:
- Examples
- Properties
- Methods

Popover is very useful on showing additional info or displaying instructions especially when the control is click or hovered.

pvr = ui.showPopover( parent, text?, position?, width?, height? ) → ui object: Popover

These are the methods available for the Popover Component.

Examples

Example - Basic click to expand contents

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

        // Creates a button control where to attached the popover
        this.btn = ui.addButton(this.main, "Show Popover")

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

    onTouch() {
        // Display a popover when the button is click
        ui.showPopover(this.btn, "This is a text to be displayed.")
    }
}

Copy All

Example - Positioning click to expand contents

class Main extends App
{
    onStart()
    {
        this.aorigin = "tl"
        this.torigin = "tl"

        // Creates a fullscreen layout with objects vertically centered.
        this.main = ui.addLayout("main", "Linear", "VCenter,FillXY")
        this.main.setChildMargins(null, 2, null, 2, "rem")

        var lay = ui.addLayout(this.main, "Linear", "Horizontal", 1)
        lay.childSpacing = "around"

        var sels = "Top-Left,Top-Center,Top-Right,Center-Left,Center-Center,Center-Right,Bottom-Left,Bottom-Center,Bottom-Right"

        // Selection of anchor origin or position on parent control
        this.selAOrigin = ui.addSelect(lay, sels.split(","), "Filled", 0.4)
        this.selAOrigin.label = "anchorOrigin"
        this.selAOrigin.setOnTouch(m => {
            m = m.toLowerCase()
            var c = m.split("-")
            this.aorigin = c[0][0]+c[1][0] // get the initials only
            this.update()
        })

        // Selection of transform origin or position on popover itself
        this.selTOrigin = ui.addSelect(lay, sels.split(","), "Filled", 0.4)
        this.selTOrigin.label = "transformOrigin"
        this.selTOrigin.setOnTouch(m => {
            m = m.toLowerCase()
            var c = m.split("-")
            this.torigin = c[0][0]+c[1][0] // get the initials only
            this.update()
        })

        this.posTxt = ui.addText(this.main, "Position: tl,tl")

        this.btn = ui.addButton(this.main, "Show here")
    }

    update() {
        var pos = this.aorigin+","+this.torigin
        this.posTxt.text = "Position: "+pos

        // Show the popover message with the current position setting
        this.pop = ui.showPopover(this.btn, "This is a popover message", pos)

        // Hide the popover after a second
        setTimeout(() => {
            this.pop.hide()
        }, 1000)
    }
}

Copy All

Example - Advanced click to expand contents

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

        // Creates a button where to attached the popover.
        this.btn = ui.addButton( this.main, "Show Popover" )
        this.btn.setOnTouch( this.onTouch )
    }

    onTouch() {
        // Display a custom popover when the button is click.

        // Create a layout with `null` parent to be pass into the popover
        var lay = ui.addLayout(null, "Linear", "VCenter,Left")
        lay.setChildMargins(0.1, 0.05, 0.1, 0.05)

        // you can add text
        ui.addText(lay, "Header", "h5")

        // you can add as many text as you can
        ui.addText(lay, "This is a very long text to display in this popover", "Left")

        // you can also add button
        this.popBtn = ui.addButton(lay, "Close", "Outlined", "Secondary")
        this.popBtn.setOnTouch( this.closePopover )

        // pass the layout into the `ui.showPopover` method
        this.pop = ui.showPopover( this.btn, lay, "bl,tr")
    }

    closePopover() {
        this.pop.hide()
    }
}

Copy All

Properties

The following properties are available on the Popover object:

backImage → String

fontFile → String

Methods

The following methods are available on the Popover object:

hide()

show()

Examples

Example - Basic click to expand contents

Example - Positioning click to expand contents

Example - Advanced click to expand contents

Properties

Methods

loading