• Vant React

ActionSheet 动作面板

介绍

底部弹起的模态面板,包含与当前情境相关的多个选项。

引入

import { ActionSheet } from "@taroify/core"
// or
import ActionSheet from "@taroify/core/action-sheet"

代码演示

基础用法

import { ActionSheet } from "@taroify/core"

function BasicActionSheet() {
  const [open, setOpen] = useState(true)
  return (
    <ActionSheet open={open} onSelect={() => setOpen(false)} onClose={setOpen}>
      <ActionSheet.Action value="1" name="选项一" />
      <ActionSheet.Action value="2" name="选项二" />
      <ActionSheet.Action value="3" name="选项三" />
    </ActionSheet>
  )
}

展示取消按钮

使用 ActionSheet.Button 组件后,会在底部展示取消按钮,点击后关闭当前面板并触发 onCancel 事件。

import { ActionSheet } from "@taroify/core"

function ActionSheetWithCancel() {
  const [open, setOpen] = useState(true)
  return (
    <ActionSheet
      open={open}
      onSelect={() => setOpen(false)}
      onCancel={() => setOpen(false)}
      onClose={setOpen}
    >
      <ActionSheet.Action value="1" name="选项一" />
      <ActionSheet.Action value="2" name="选项二" />
      <ActionSheet.Action value="3" name="选项三" />
      <ActionSheet.Button type="cancel">取消</ActionSheet.Button>
    </ActionSheet>
  )
}

展示描述信息

通过 ActionSheet.Header 组件可以在菜单顶部显示描述信息,通过选项的 ActionSheet.Action.children 属性可以在 Action 文字的下侧展示描述信息。

import { ActionSheet } from "@taroify/core"

function ActionSheetWithDescription() {
  const [open, setOpen] = useState(true)
  return (
    <ActionSheet
      open={open}
      onSelect={() => setOpen(false)}
      onCancel={() => setOpen(false)}
      onClose={setOpen}
    >
      <ActionSheet.Header>这是一段描述信息</ActionSheet.Header>
      <ActionSheet.Action value="1" name="选项一" />
      <ActionSheet.Action value="2" name="选项二" />
      <ActionSheet.Action value="3" name="选项三" />
      <ActionSheet.Button type="cancel">取消</ActionSheet.Button>
    </ActionSheet>
  )
}

选项状态

可以通过 loadingdisabled 将选项设置为加载状态或禁用状态,或者通过style.color设置选项的颜色

import { ActionSheet } from "@taroify/core"

function ActionSheetWithStatuses() {
  const [open, setOpen] = useState(true)
  return (
    <ActionSheet open={open} onSelect={() => setOpen(false)} onClose={setOpen}>
      <ActionSheet.Action value="1" style={{ color: "#ee0a24" }} name="着色选项" />
      <ActionSheet.Action value="2" disabled name="禁止选项" />
      <ActionSheet.Action value="3" loading name="选项三" />
      <ActionSheet.Button onClick={() => setOpen(false)}>取消</ActionSheet.Button>
    </ActionSheet>
  )
}

API

ActionSheet Props

参数 说明 类型 默认值
defaultOpen 默认是否显示动作面板 boolean false
open 是否显示动作面板 boolean false
className 样式类名 string -
style 样式对象 CSSProperties -
rounded 是否为圆角 string -

ActionSheet.Backdrop Props

参数 说明 类型 默认值
className 样式类名 string -
style 样式对象 CSSProperties -
duration 动画时长,单位毫秒 number | string 300
closeable 点击是否可以关闭 boolean true

ActionSheet.Header Props

参数 说明 类型 默认值
className 样式类名 string -
style 样式对象 CSSProperties -
title 标题 string -
children 描述信息 string -

ActionSheet.Action Props

参数 说明 类型 默认值
className 样式类名 string -
style 样式对象 CSSProperties -
name 标题 string -
value 选项值 string -
children 描述信息 string -

ActionSheet.Button Props

参数 说明 类型 默认值
className 按钮类名 string -
style 按钮样式 CSSProperties -
type 按钮类型,可选值为 cancel string button
children 按钮内容 string -

ActionSheet Events

事件名 说明 回调参数
onSelect 点击选项时触发,禁用或加载状态下不会触发 event: ActionSheet.ActionEvent
onCancel 点击取消按钮时触发 -
onClose 关闭面板时触发 -