Back

addBottomSheet

JS Py
Hello World
Content:
- Properties
- Methods

The BottomSheet in Material Design is a UI component anchored at the screen bottom.

bts = ui.addBottomSheet( title, options ) → ui object: BottomSheet

It's a good practice to avoid adding a notch when your bottomsheet has a title, or leftAction or rightAction

These are the methods available for the BottomSheet component.

Example - Basic

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 Bottom Sheet", "Primary")
        this.btn.setOnTouch( this.btn_onTouch )

        this.bts = ui.addBottomSheet( "My title" );

        // Create a button and add it to the bottomsheet layout.
        var btn = ui.addButton(this.bts.layout, "Button", "Secondary");
        btn.margins = [0, "1rem", 0, "1rem"];
    }

    btn_onTouch()
    {
        // show the bottomsheet
        this.bts.show();
    }
}
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 Bottom Sheet", "Primary")
        this.btn.setOnTouch( this.btn_onTouch )

        this.bts = ui.addBottomSheet( "My title" )

        # Create a button and add it to the bottomsheet layout.
        btn = ui.addButton(this.bts.layout, "Button", "Secondary")
        btn.margins = [0, "1rem", 0, "1rem"]

    btn_onTouch()
        # show the bottomsheet
        this.bts.show()
Copy All       Run      

Example - Bottomsheet with notch

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 Bottom Sheet", "Primary")
        this.btn.setOnTouch( this.btn_onTouch )

        this.bts = ui.addBottomSheet("", "Notch");

        // Create a button and add it to the bottomsheet layout.
        var btn = ui.addButton(this.bts.layout, "Button", "Primary");
        btn.margins = [0, "1rem", 0, "1rem"];
    }

    btn_onTouch()
    {
        // show the bottomsheet
        this.bts.show();
    }
}
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 Bottom Sheet", "Primary")
        this.btn.setOnTouch( this.btn_onTouch )

        this.bts = ui.addBottomSheet("", "Notch")

        # Create a button and add it to the bottomsheet layout.
        btn = ui.addButton(this.bts.layout, "Button", "Primary")
        btn.margins = [0, "1rem", 0, "1rem"]

    btn_onTouch()
        # show the bottomsheet
        this.bts.show()
Copy All       Run      

Example - Complete example

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 Bottom Sheet", "Primary")
        this.btn.setOnTouch( this.btn_onTouch )

        // Create a bottom sheet with the given options.
        // HideOnAction: Hide the bottomsheet on action click.
        // CloseAction and MoreAction: Add a left close action and right more action.
        // NoCancel: Prevent the bottomsheet from closing when the more action is click.
        this.bts = ui.addBottomSheet("", "HideOnAction,CloseAction,MoreAction,NoCancel");
        this.bts.title = "My details"
        this.bts.description = "This is a long description."
        this.bts.setOnAction( this.onAction );

        // Create a button and add it to the bottomsheet layout.
        var btn = ui.addButton(this.bts.layout, "Button", "Primary");
        btn.margins = [0, "1rem", 0, "1rem"];
    }

    btn_onTouch()
    {
        // show the bottomsheet
        this.bts.show();
    }

    onAction(name, icon) {
        ui.showPopup( name );
    }
}
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 Bottom Sheet", "Primary")
        this.btn.setOnTouch( this.btn_onTouch )

        # Create a bottom sheet with the given options.
        # HideOnAction: Hide the bottomsheet on action click.
        # CloseAction and MoreAction: Add a left close action and right more action.
        # NoCancel: Prevent the bottomsheet from closing when the more action is click.
        this.bts = ui.addBottomSheet("", "HideOnAction,CloseAction,MoreAction,NoCancel")
        this.bts.title = "My details"
        this.bts.description = "This is a long description."
        this.bts.setOnAction( this.onAction )

        # Create a button and add it to the bottomsheet layout.
        btn = ui.addButton(this.bts.layout, "Button", "Primary")
        btn.margins = [0, "1rem", 0, "1rem"]

    btn_onTouch()
        # show the bottomsheet
        this.bts.show()

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

Properties

The following properties are available on the BottomSheet object:

description → String
layout → Object
leftActionIcon → String
rightActionIcon → String
title → String

Methods

The following methods are available on the BottomSheet object:

hide()
setOnAction( cb )
setOnClose( cb )
setOnOpen( cb )
show()
String: “An optional bottomsheet title.”
String: “A comma separated options. Values are:
`"Notch"` to add a small notch at the top of the bottomsheet.
`"HideOnAction"` to hide the bottomsheet when actions are click.
`"CloseAction"` add a close action at the left.
`"MoreAction"` add a more action at the right.
`"NoCancel"` to disable the default closing event when the backdrop is click.”
function( name , icon )
function()
bts.description
Sets or returns the bottomsheet description.
bts.hide
Hide the bottom sheet.
bts.layout
Returns the layout of the bottomsheet. This is where you add your ui components.
bts.leftActionIcon
Sets or returns the left action icon.
bts.rightActionIcon
Sets or returns the right action icon.
bts.setOnAction
Add a callback handler when the left and right action is click when they are provided.
bts.setOnClose
Add a callback handler on close event.
bts.setOnOpen
Add a callback handler on open event.
bts.show
Show the bottom sheet.
bts.title
Sets or returns the bottomsheet title.