ActionSheet（操作列表）

继承自Popup

提供操作选择的弹出框。关闭时自动销毁。

通过“const {ActionSheet} = require('tabris');”引入该类

属性

actions

描述可供选择的操作的对象数组。每个操作必须要有一个标题，也可以包含一个图片。cancel或destructive类型的操作会被特殊显示。

message

Type: string

可用操作的描述信息。

title

Type: string

操作列表的标题。

Events

actionsChanged

actions属性变化时触发。

Event Parameters

• target: this 事件触发的控件。

• value: {title: string, image?: Image, style?: ‘default’|’cancel’|’destructive’}[] actions属性被设置的新的值。

close

操作列表被关闭时触发。

messageChanged

message属性变化时触发。

Event Parameters

• target: this 事件触发的控件。

• value: string message属性被设置的新的值。

select

当一个操作被选中时触发。

Event Parameters

• target: this 事件触发的控件。

• index: number 被选中的操作的索引。

titleChanged

title属性改变时触发。

Event Parameters

• target: this 事件触发的控件。

• value: string title属性被设置的新的值。

示例

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: 'images/search-black-24dp@3x.png', scale: 3}},
      {title: 'Share', image: {src: 'images/share-black-24dp@3x.png', scale: 3}},
      {title: 'Settings', image: {src: 'images/settings-black-24dp@3x.png', scale: 3}},
      {title: 'Delete', image: {src: 'images/delete-black-24dp@3x.png', scale: 3}, style: 'destructive'},
      {title: 'Cancel', image: {src: 'images/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();
}