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 | |

调用 【不推荐】

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 | 取消按钮文案 |