@rax-ui/action-sheet NPM

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