ActionSheet

Extends Popup

A pop up dialog that offers a selection. Is automatically disposed when closed.

Import this type with “const {ActionSheet} = require('tabris');

Properties

actions

Type: {title: string, image?: Image, style?: ‘default’|‘cancel’|‘destructive’}[]

An array of objects describing the actions to be displayed. Each action must have a title and it can also have an image. Actions with the style cancel or destructive are displayed in a special way.

message

Type: string

A descriptive message for the available actions.

title

Type: string

The title of the action sheet.

Events

actionsChanged

Fired when the actions property has changed.

Event Parameters

  • target: this The widget the event was fired on.

  • value: {title: string, image?: Image, style?: ‘default’|‘cancel’|‘destructive’}[] The new value of actions.

close

Fired when the action sheet was closed.

messageChanged

Fired when the message property has changed.

Event Parameters

  • target: this The widget the event was fired on.

  • value: string The new value of message.

select

Fired when an action was selected.

Event Parameters

  • target: this The widget the event was fired on.

  • index: number The index of the selected action.

titleChanged

Fired when the title property has changed.

Event Parameters

  • target: this The widget the event was fired on.

  • value: string The new value of title.

Example

const {ActionSheet, TextView, Button, ui} = require('tabris');

new Button({
  left: 16, right: 16, top: 16,
  text: 'Show ActionSheet'
}).on({select: showActionSheet})
  .appendTo(ui.contentView);

let selectionTextView = new TextView({
  left: 16, right: 16, top: ['prev()', 16],
  alignment: 'center'
}).appendTo(ui.contentView);

function showActionSheet() {
  new ActionSheet({
    title: 'Actions',
    message: 'Select any of the actions below to proceed.',
    actions: [
      {title: 'Search', image: {src: 'resources/search-black-24dp@3x.png', scale: 3}},
      {title: 'Share', image: {src: 'resources/share-black-24dp@3x.png', scale: 3}},
      {title: 'Settings', image: {src: 'resources/settings-black-24dp@3x.png', scale: 3}},
      {title: 'Delete', image: {src: 'resources/delete-black-24dp@3x.png', scale: 3}, style: 'destructive'},
      {title: 'Cancel', image: {src: 'resources/close-black-24dp@3x.png', scale: 3}, style: 'cancel'},
    ]
  }).on({
    select: ({target: actionSheet, index}) => selectionTextView.text = `"${actionSheet.actions[index].title}" selected`,
    close: () => console.log('ActionSheet closed')
  }).open();
}