The BottomSheet in Material Design is a UI component anchored at the screen bottom.
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 click to expand contents
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();
}
}
{
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()
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()
Example - Bottomsheet with notch click to expand contents
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();
}
}
{
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()
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()
Example - Complete example click to expand contents
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 );
}
}
{
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 )
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 )
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 )
show()