Menu

List Select Plugin

The list select plugin lets you present a list of options to the user with an optional Cancel button. The input to the rest of the UI will be blocked until the list select is dismissed, either by cancelling or selecting an option.

const listSelect = await ListSelectPlugin.init()
listSelect.setTitle('There are 3 options')
listSelect.setList([
    {id: 'four', label: 'four'},
    {id: 'five', label: 'five'},
    {id: 'six', label: 'six'}
])
listSelect.setCancelable(false)
const result = await listSelect.show()

if (!result.cancelled) {
    // Do something with result.selected
}

List Select w/ Cancel

IOS Android

List Select w/o Cancel

IOS Android

Methods

ListSelectPlugin.init() #

Creates and returns a promise which resolves to an instance of the list select plugin.


setTitle(title) #

Sets title of list select view.


addItem(item) #

Append an item to the list of selectable options in the list select.

Example

listSelect.addItem({
    id   : "item_id",
    label: "Item 1"
})

setList(list) #

Set the contents of the entire option list. This will overwrite any previously added items.

Example

listSelect.setList([
    {id: "item_1", label: "Item 1"},
    {id: "item_2", label: "Item Two"},
    {id: "item_3", label: "3"}
])

setCancelable(cancelable) #

Sets whether or not to display a Cancel button where the user can dismiss the list select without selecting an option.


show(options) #

Presents the list select view on top of the current view. All input to the rest of the screen is blocked until either a list item or the Cancel button is selected.

This returns a promise which resolves to an object with two properties: