---
nav:
path: /components
group:
title: Feedback
order: 12
toc: 'content'
---
# ActionSheet
Actions menu panel that pops up from the bottom. Triggered by a user action, providing a set of two or more options related to the action, allowing the user to complete the action without leaving the field. Compared with the dialog box, the position of the action panel is more suitable for the scene of one-handed operation in the era of large screen.
## Introduction
In `index.json` Introducing Components in
```json
"usingComponents": {
#if ALIPAY
"ant-action-sheet": "antd-mini/es/ActionSheet/index"
#endif
#if WECHAT
"ant-action-sheet": "antd-mini/ActionSheet/index"
#endif
}
```
## Code Sample
### Basic use
> `ant-action-sheet` Components must pass `visible` Property controls the show/hide state.`actions` property passes in the data to drive the options rendering.
```xml
Open Panel
```
```js
Page({
data: {
visible: true,
actions: [
{
text: 'copy',
key: 'copy',
},
{
text: 'modify',
key: 'modify',
},
],
},
handleOpen() {
this.setData({
visible: true,
});
},
handleClose(e) {
this.setData({
visible: false,
});
},
handleAction(item, index, e) {
#if ALIPAY
if (item.key === 'delete') {
my.confirm({
content: 'are you sure?',
});
return;
}
my.alert({ content: `you clicked ${item.key}` });
#endif
#if WECHAT
const [clickItem, clickIndex] = item.detail;
wx.showToast({ title: `you clicked ${clickItem.key}(${clickIndex})` });
#endif
},
});
```
### Option Status
> [actions](#actionsheetitem) Each of the items provided `icon` `danger` `description` `disabled` Used to set the option state.
```xml
```
```js
Page({
data: {
actions: [
{
text: 'copy',
key: 'copy',
description: 'select copy content',
},
{
text: 'modify',
key: 'modify',
disabled: true,
},
{
text: 'delete',
key: 'delete',
danger: true,
},
{
text: 'backup',
key: 'backup',
description: 'select backup content',
icon: 'https://gw.alipayobjects.com/mdn/rms_e7937b/afts/img/A*I0oNS4RCQzUAAAAAAAAAAAAAARQnAQ',
},
{
text: 'save',
key: 'save',
icon: 'https://gw.alipayobjects.com/mdn/rms_e7937b/afts/img/A*BNczQ7hmp2gAAAAAAAAAAAAAARQnAQ',
},
{
text: 'sync',
key: 'sync',
icon: 'https://gw.alipayobjects.com/mdn/rms_e7937b/afts/img/A*eRaVSrV56dIAAAAAAAAAAAAAARQnAQ',
},
],
},
});
```
### Demo Code
#ff3141
| #ff4a58
| Hazardous color |
| --actionsheet-title-color | #999999
| #616161
| Title Color |
| --actionsheet-item-color | #333333
| #c5cad1
| Item Color |
| --actionsheet-item-active-bg | #eeeeee
| #2b2b2b
| Entries Activate Background Color |
| --activesheet-item-cancel-bg | #f5f5f5
| #121212
| Entries cancel background color |