---
display: ActionSheet
family: other
---

ActionSheet

动作面板

API

$3

|名称 | 说明 | 类型 | 默认值 |
|:---------------|:--------|:----|:----------|
| visible | 是否显示 | boolean | false |
| title | 标题 | string | |
| buttons | 按钮列表 | ActionButtonProps ||
| items | 分享项列表, 设置此项后开启 gallery 模式 | ActionItemProps ||
| onHide | 隐藏时回调 | (reason: string) => void | |
| onClick | 点击时的回调 | (rowIndex?: number, index: number, e) => void | |
| onEnter | 开始进入时回调函数 | () => void | |
| onExit | 开始退出时回调函数 | () => void | |
| onEntering | 正在进入时回调函数 | () => void | |
| onExiting | 正在退出时回调函数 | () => void | |
| onEntered | 进入后回调函数 | () => void | |
| onExited | 退出后回调函数 | () => void | |

$3

``jsx
import ActionSheet from '@rax-ui/action-sheet';

// 按钮列表
ActionSheet.show({
buttons: [
'朝阳区',
'西城区',
'海淀区',
{
a: 1, // 自定义数据
text: '东城区', // 文案,
style: {
backgroundColor: 'white' // 按钮样式
},
textStyle: {
color: 'red' // 按钮文案样式
}
}
]
}, function(e) {
console.log(e);
// 按钮数据：e.text/e.index/e.a
// 点击取消/蒙层：e.cancel/e.mask
});

// 自定义内容
ActionSheet.show({
title: '分享到',
content(handler) {
return (

{[
{ text: 'QQ', data: 'qq' },
{ text: '微信', data: 'wx' },
{ text: '微博', data: 'wb' },
{ text: '钉钉', data: 'dd' },
{ text: '朋友圈', data: 'wxf' }
].map((s, i) => (
handler(s)}>
{s.text}

))}

)
}
}, function(e) {
console.log(e); // e.text/e.data
});
`

$3

| 名称 | 说明 |
|:---------------|:--------|
| action-sheet | 面板 |
| action-sheet__body | 面板主体 |
| action-sheet__footer | 面板底部 |
| action-sheet__title | 面板标题 |
| action-sheet__title__text | 面板标题文案 |
| action-sheet__content | 面板内容 |
| action-sheet__button | 面板按钮 |
| action-sheet__button--first | 第一个面板按钮 |
| action-sheet__button__text | 面板按钮文案 |
| action-sheet__cancel | 取消按钮 |
| action-sheet__cancel__text` | 取消按钮文案 |