动作面板 ActionSheet

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

安装

npm install antd-mobile@5.43.0

antd-mobile 是移动网页组件库，不是 React Native 或小程序组件。React 19 项目需在入口用 unstableSetRender 注册 createRoot，否则 Toast、Dialog 等命令式 API 无法渲染；深色模式通过 <html data-prefers-color-scheme="dark"> 切换。

示例来自 Ant Design Mobile 官方仓库（MIT），固定在 npm 5.43.0 对应的提交；示例中的 DemoBlock 等展示辅助组件由 JGuang 重写，不属于 antd-mobile 的 API。

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

何时使用

由用户操作触发，提供一组与当前场景操作相关的两个或多个选项，让用户在不离场的情况下完成操作。

示例

ActionSheet

属性

属性	说明	类型	默认值	版本
actions	面板选项列表	`Action[]`	`[]`
afterClose	完全关闭后触发	`() => void`	-
cancelText	取消按钮文字，如果设置为空则不显示取消按钮	`ReactNode`	-
closeOnAction	点击选项后是否关闭	`boolean`	`false`
closeOnMaskClick	点击背景蒙层后是否关闭	`boolean`	`true`
destroyOnClose	不可见时是否销毁 `DOM` 结构	`boolean`	`false`
forceRender	强制渲染内容	`boolean`	`false`
extra	顶部的额外区域	`ReactNode`	-
getContainer	指定挂载的 `HTML` 节点，默认为 `body`，如果为 `null` 的话，会渲染到当前节点	`HTMLElement \| () => HTMLElement \| null`	`document.body`
onAction	点击选项时触发，禁用或加载状态下不会触发	`(action: Action, index: number) => void`	-
onClose	关闭时触发	`() => void`	-
onMaskClick	点击背景蒙层时触发	`() => void`	-
popupClassName	`ActionSheet` 弹出层类名	`string`	-
safeArea	是否开启安全区适配	`boolean`	`true`
visible	显示隐藏	`boolean`	`false`
styles	语义化结构 style	`Partial<Record<''body' \| 'mask', CSSProperties>>`	-	5.33.0

Action

属性	说明	类型	默认值
danger	是否为危险状态	`boolean`	`false`
description	描述	`ReactNode`	-
disabled	是否为禁用状态	`boolean`	`false`
key	唯一标记	`string \| number`	-
onClick	点击时触发	`() => void`	-
text	标题	`ReactNode`	-
bold	标题是否加粗	`boolean`	`false`

指令式

可以通过指令式的方式使用 ActionSheet：

const handler = ActionSheet.show(props)

可以通过调用 ActionSheet 上的 show 方法直接打开动作面板，其中 props 参数的类型同上表，但不支持传入 visible 属性。

当动作面板被关闭后，组件实例会自动销毁。

show 方法的返回值为一个组件控制器，包含以下属性：

属性	说明	类型
close	关闭动作面板	`() => void`