跳到主要内容

Actionsheet 动作面板

介绍​

从底部弹出的动作菜单面板。

用法​

基础​

const [showBase, setShowBase] = useState(false);
<OsButton 
  onClick={() => {
    setShowBase(true);
  }}
>
  弹出 Actionsheet
</OsButton>
<OsActionsheet
  isShow={showBase}
  onClose={() => {
    setShowBase(false);
  }}
>
  <OsActionsheetItem
    title='满599元减去100'
    onClick={() => {
      setShowBase(false);
    }}
  ></OsActionsheetItem>
  <OsActionsheetItem
    title='满249元减50'
    disabled
    onClick={() => {
      setShowBase(false);
    }}
  ></OsActionsheetItem>
  <OsActionsheetItem
    title='满88元打8折'
    disabled
    onClick={() => {
      setShowBase(false);
    }}
  ></OsActionsheetItem>
  <OsActionsheetItem
    title='满69元减10'
    disabled
    onClick={() => {
      setShowBase(false);
    }}
  ></OsActionsheetItem>
</OsActionsheet>

带取消按钮​

const [showWithCancelBtn, setShowWithCancelBtn] = useState(false);
<OsButton
  onClick={() => {
    setShowWithCancelBtn(true);
  }}
>
  弹出带取消按钮的 Actionsheet
</OsButton>
<OsActionsheet
  cancelText='取消'
  isShow={showWithCancelBtn}
  onClose={() => {
    setShowWithCancelBtn(false);
  }}
>
  <OsActionsheetItem
    title='满599元减去100'
    onClick={() => {
      setShowWithCancelBtn(false);
    }}
  ></OsActionsheetItem>
  <OsActionsheetItem
    title='满249元减50'
    onClick={() => {
      setShowWithCancelBtn(false);
    }}
  ></OsActionsheetItem>
  <OsActionsheetItem
    title='满88元打8折'
    onClick={() => {
      setShowWithCancelBtn(false);
    }}
  ></OsActionsheetItem>
  <OsActionsheetItem
    title='满69元减10'
    onClick={() => {
      setShowWithCancelBtn(false);
    }}
  ></OsActionsheetItem>
</OsActionsheet>

带标题​

const [showWithTitle, setShowWithTitle] = useState(false);
<OsButton
  onClick={() => {
    setShowWithTitle(true);
  }}
>
  弹出带标题的 Actionsheet
</OsButton>
<OsActionsheet
  title='带标题的 Actionsheet'
  isShow={showWithTitle}
  onClose={() => {
    setShowWithTitle(false);
  }}
>
  <OsActionsheetItem
    title='满599元减去100'
    onClick={() => {
      setShowWithTitle(false);
    }}
  ></OsActionsheetItem>
  <OsActionsheetItem
    title='满249元减50'
    onClick={() => {
      setShowWithTitle(false);
    }}
  ></OsActionsheetItem>
  <OsActionsheetItem
    title='满88元打8折'
    onClick={() => {
      setShowWithTitle(false);
    }}
  ></OsActionsheetItem>
  <OsActionsheetItem
    title='满69元减10'
    onClick={() => {
      setShowWithTitle(false);
    }}
  ></OsActionsheetItem>
</OsActionsheet>

自定义内容​

const [showWithCustomContent, setShowWithCustomContent] = useState(false);
<OsButton
  onClick={() => {
    setShowWithCustomContent(true);
  }}
>
  弹出自定义内容的 Actionsheet
</OsButton>
<OsActionsheet
  title='自定义内容的 Actionsheet'
  isShow={showWithCustomContent}
  onClose={() => {
    setShowWithCustomContent(false);
  }}
>
  <View className='custom-content'>
    <Text>这是自定义内容</Text>
  </View>
</OsActionsheet>

API​

属性​

参数说明类型默认值
isShow是否显示弹窗，必选booleanfalse
title面板标题，可选string-
cancelText取消按钮文案，可选string-

方法​

函数名说明参数
onClose面板关闭时的回调，可选-

API-OsActionsheetItem​

属性​

参数说明类型默认值
list选项标题string-
disabled选项是否失效booleanfalse

方法​

函数名说明参数
onClick点击时的回调-