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

# ActionSheet

动作面板


## API


### Props

|名称 | 说明 | 类型 | 默认值 |
|:---------------|:--------|:----|:----------|
| 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 |  |

### 调用 【不推荐】

```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 (
      <View>
        {[
          { text: 'QQ', data: 'qq' },
          { text: '微信', data: 'wx' },
          { text: '微博', data: 'wb' },
          { text: '钉钉', data: 'dd' },
          { text: '朋友圈', data: 'wxf' }
        ].map((s, i) => (
          <View key={i} onClick={() => handler(s)}>
            <Text>{s.text}</Text>
          </View>
        ))}
      </View>
    )
  }
}, function(e) {
  console.log(e); // e.text/e.data
});
```

### CSS API

| 名称 | 说明 |
|:---------------|:--------|
| `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` | 取消按钮文案 |