UI APIs

showActionSheet

Display an action sheet menu with multiple options for user selection.

Overview

my.showActionSheet displays an operation menu with multiple action buttons. Users can select one option, and the selected index is returned through the success callback. This is commonly used for presenting a list of actions or options.

Sample Code

HTML

<div class="page">
  <div class="page-description">Action sheet API</div>
  <div class="page-section">
    <h3 class="page-section-title">my.showActionSheet</h3>
    <div class="page-section-demo">
      <button type="button" class="primary" onclick="showActionSheet()">Show Action Sheet</button>
    </div>
  </div>
</div>

JavaScript

function showActionSheet() {
  my.showActionSheet({
    title: 'ActionSheet',
    items: ['Menu 1', 'Menu 2', 'Menu3'],
    cancelButtonText: 'Cancel',
    success: (res) => {
      const btn = res.index === -1 ? 'Cancel' : 'No' + res.index + '';
      my.alert({
        title: `You clicked ${btn} button`,
      });
    },
  });
}

Parameters

Property	Type	Required	Description
`title`	`String`	No	The title of the menu.
`items`	`String Array`	Yes	The text array of the menu button.
`cancelButtonText`	`String`	No	Text on the cancel button, which is "Cancel" by default. Note: This field is invalid for Android and the cancel button will not be displayed.
`destructiveButtonIndex`	`Number`	No	This field specifies the index number of a specific button. The value starts from 0. Used for buttons to delete or clear data or the ones in similar scenarios. The default color is red.
`badges`	`Object Array`	No	For the array with red option. See badges parameters below for the fields in the array.
`success`	`Function`	No	The callback function for a successful API call.
`fail`	`Function`	No	The callback function for a failed API call.
`complete`	`Function`	No	The callback function used when the API call is completed. This function is always executed no matter the call succeeds or fails.

Badges Parameters

Property	Type	Description
`index`	`Number`	The index of the option that needs use red marks, starting from 0.
`type`	`String`	Red mark types. Valid values are: • `none`: no red mark • `point`: red mark • `num`: numerical red mark • `text`: texts in red
`text`	`String`	Customized red mark. • This field is optional when the value of type is none/point/more. • When the value of type is num, but the value of this field has decimals, not greater than 0, or not less than 100, this field is not displayed.

Usage Notes

The items parameter is required and defines the menu options
On Android, the cancel button is not displayed
Use destructiveButtonIndex to highlight destructive actions (like delete) in red
The success callback receives res.index:
- -1 = Cancel button clicked
- 0, 1, 2... = Index of the selected menu item
Use badges to add visual indicators (dots, numbers, or text) to specific options

Examples

Basic Action Sheet

my.showActionSheet({
  title: 'Choose Action',
  items: ['Edit', 'Share', 'Delete'],
  success: (res) => {
    if (res.index === 0) {
      console.log('Edit selected');
    } else if (res.index === 1) {
      console.log('Share selected');
    } else if (res.index === 2) {
      console.log('Delete selected');
    } else if (res.index === -1) {
      console.log('Cancelled');
    }
  },
});

Destructive Action

my.showActionSheet({
  title: 'Manage Item',
  items: ['Edit', 'Share', 'Delete'],
  destructiveButtonIndex: 2, // Highlights "Delete" in red
  cancelButtonText: 'Cancel',
  success: (res) => {
    if (res.index === 2) {
      my.confirm({
        title: 'Confirm Delete',
        content: 'Are you sure?',
        success: (confirmRes) => {
          if (confirmRes.confirm) {
            // Proceed with deletion
          }
        },
      });
    }
  },
});

With Badges

my.showActionSheet({
  title: 'Notifications',
  items: ['Messages', 'Updates', 'Settings'],
  badges: [
    { index: 0, type: 'num', text: '5' },
    { index: 1, type: 'point' },
  ],
  success: (res) => {
    console.log('Selected index:', res.index);
  },
});

my.alert - Simple alert dialog
my.confirm - Confirmation dialog

prompt

Display a prompt dialog with text input for collecting user input.

showLoading / hideLoading

Display and dismiss a loading indicator dialog.