Try Install Learn Blog API Packages GitHub
Pages

Ui.ActionSheet

An action sheet comes up from the bottom of the screen and displays actions a user can take.

  • usually this component is used in mobile resolutions
  • showing the component returns a promise which is resolved when closed
  • the keyboard focus is trapped in the list (tab and shift-tab)
  • when closed the focus is returned to the last focused element before opening

States

focusedElement
:
Maybe(Dom.Element)
=
Maybe::Nothing

The previously focused element.

items
:
Array(Ui.NavItem)
=
[]

The displayed items.

open
:
Bool
=
false

The state of the component (open / closed).

resolve
:
Function(Void, Void)
=
(value : Void) { void }

The resolve function.

size
:
Number
=
16

The base size of the component.

theme
:
Maybe(Ui.Theme)
=
Maybe::Nothing

The theme for the action sheet.

Functions

handleClose
(
event
:
Html.Event
)
:
Promise(Never, Void)

The close event handler.

handleItemClick
(
onClick
:
Function(Html.Event, Promise(Never, Void))
event
:
Html.Event
)

The item click event handler.

handleLinkClick
(
href
:
String
event
:
Html.Event
)

The link click event handler.

hide
:
Promise(Never, Void)

Hides the component.

render
:
Html

Renders the component.

renderContents
(
iconAfter
:
Html
iconBefore
:
Html
label
:
String
group
:
Bool
onClick
:
Function(Html.Event, Promise(Never, Void))
)

Renders the contents of the item.

renderItem
(
item
:
Ui.NavItem
)
:
Html

Renders the given navigation item.

show
(
items
:
Array(Ui.NavItem)
)
:
Promise(Never, Void)

Shows the component with the given items.

showWithOptions
(
size
:
Number
theme
:
Maybe(Ui.Theme)
items
:
Array(Ui.NavItem)
)
:
Promise(Never, Void)

Shows the component with the given items and options.