Actionsheet 行动面板

优质
小牛编辑
138浏览
2023-12-01

行动面板组件。

Usage

全部引入

import { Actionsheet } from 'beeshell';

按需引入

import Actionsheet from 'beeshell/dist/components/Actionsheet';

Examples

image

Code

详细 Code

import { Actionsheet } from 'beeshell';

<Actionsheet
  ref={(c) => { this._actionsheet = c; }}
  header='选择品类'
  data={[
    {
      label: '选项1',
      value: '1'
    },
    {
      label: '选项2',
      value: '2',
    },
    {
      label: '选项3',
      value: '3'
    },
  ]}
  cancelable={false}
  onPressConfirm={(item) => {
    console.log('confirm');
  }}
  onPressCancel={() => {
    console.log('cancel')
  }}>
</Actionsheet>

this._actionsheet.open()
this._actionsheet.close()

API

继承 SlideModal 组件的所有 Props、Methods。

Props

NameTypeRequiredDefaultDescription
headerstring/ReactElementfalse'标题'头部,是字符串时代表标题文案,是 ReactElement 时代表头部渲染区域
footerstring/ReactElementfalse'取消'底部按钮,是字符串时代表按钮文案,是 ReactE 时代表按钮渲染区域
dataArraytrue[]数据源,数组中是对象,必须有 label 属性用于展示
maxShowNumnumberfalsenull最多显示多少项,如果设置该值,超过后列表将变为可滚动
cancelablebooleanfalsetrue点击蒙层是否消失
useSafeAreaViewbooleanfalsefalse是否开启安全区域,兼容 iPhoneX
renderItemFunctionfalsenull自定义渲染项。参数包括数据项,数据项索引,返回一个 ReactElement
onPressCancelFunctionfalsenull取消按钮点击回调
onPressConfirmFunctionfalsenull点击某项回调。参数为数据项和索引