Back

showActionSheet

JS Py
Hello World
Content:
- Properties
- Methods

An Action Sheet is a list dialog implementation of bottom sheet displaying contextual actions or options, used to streamline user interactions in mobile apps.

acs = ui.showActionSheet( title, list, options, onSelect ) → ui object: ActionSheet

These are the available methods for the ActionSheet component.

Example - Complete example of actionsheet

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

        // Add a button to the main layout to show the actionsheet when click
        this.btn = ui.addButton(this.main, "Show actionsheet", "Primary")
        this.btn.setOnTouch( this.btn_onTouch )
    }

    btn_onTouch()
    {
        var choices = [
            ["person", "Account"],
            ["share", "Send to email"],
            ["delete", "Remove"],
        ];
        this.act = ui.showActionSheet("", choices, "Icon", this.onSelect);
        this.act.description = "This is the text";
        this.act.setColor("Remove", "orange");
    }

    onSelect( name, icon ) {
        ui.showPopup( icon );
    }
}
class Main extends App
    onStart()
        # Create a fullscreen layout with objects vertically centered
        this.main = ui.addLayout("main", "Linear", "VCenter,FillXY")

        # Add a button to the main layout to show the actionsheet when click
        this.btn = ui.addButton(this.main, "Show actionsheet", "Primary")
        this.btn.setOnTouch( this.btn_onTouch )

    btn_onTouch()
        choices = [
            ["person", "Account"],
            ["share", "Send to email"],
            ["delete", "Remove"],
        ]
        this.act = ui.showActionSheet("", choices, "Icon", this.onSelect)
        this.act.description = "This is the text"
        this.act.setColor("Remove", "orange")

    onSelect( name, icon )
        ui.showPopup( icon )
Copy All       Run      

Properties

The following properties are available on the ActionSheet object:

description → String
title → String

Methods

The following methods are available on the ActionSheet object:

setColor( name, color )
setColorByIndex( index, color )
Number: The index of list item.
String: “The custom actionsheet title.”
String: “A comma separated actionsheet options. Values are
`"Icon"` render a leading icon.
`"NoCancel"` remove the default `"Cancel"` option.”
String: “The list item text.”
String: “A css supported color. Available format are: `hexadecimal`”, “ `color-names`”, “ `rgb`”, “ `rgba` ...”
List: The list items to show. If `"icon"` option is passed, each element in this list array is of the form `[icon, name]`.
function()
acs.description
Sets or returns the description text for the action sheet.
acs.setColor
Sets the color of the list item by its name.
acs.setColorByIndex
Sets the color of the list item by its corresponding index. If you want to set the color of the list using its name, see setColor method.
acs.title
Sets or returns the title text of the action sheet.