ActionSheet 动作面板
列表型
列表选项为左右两端的列表； 选项为纯文字； 对于警示操作（如不可逆的破坏性操作），建议将更改操作放在最后并用红色标识。 列表型根据选择项内容的差异，可以有以下不同的样式
宫格型
面板左右贯通，根据操作数量使用 3 列或 4 列的宫格结构，尽量使菜单内容饱满。 菜单选项使用图标加文字的形式呈现。 菜单项的数量超过 8 个时，可作翻页处理。
宫格型-多页
组件状态
组件样式
ActionSheet Props
| 名称 | 类型 | 默认值 | 描述 | 必传 |
|---|---|---|---|---|
| className | String | - | 类名 | N |
| style | Object | - | 样式，TS 类型：React.CSSProperties |
N |
| align | String | center | 水平对齐方式。可选项：center/left | N |
| cancelText | String | - | 设置取消按钮的文本 | N |
| count | Number | 8 | 设置每页展示菜单的数量，仅当 type=grid 时有效 | N |
| description | String | - | 动作面板描述文字 | N |
| items | Array | - | 菜单项。TS 类型：Array<string | ActionSheetItem> interface ActionSheetItem { label: string; color?: string; disabled?: boolean; icon?: TNode; badge?: BadgeProps }，Badge API Documents。通用类型定义。详细类型定义 |
N |
| popupProps | Object | {} | 透传 Popup 组件全部属性。TS 类型：PopupProps，Popup API Documents。详细类型定义 |
N |
| showCancel | Boolean | true | 是否显示取消按钮 | N |
| showOverlay | Boolean | true | 是否显示遮罩层 | N |
| theme | String | list | 展示类型，列表和表格形式展示。可选项：list/grid | N |
| visible | Boolean | false | 显示与隐藏 | N |
| defaultVisible | Boolean | false | 显示与隐藏。非受控属性 | N |
| onCancel | Function | TS 类型：(context: { e: MouseEvent }) => void点击取消按钮时触发 |
N | |
| onClose | Function | TS 类型：(trigger: ActionSheetTriggerSource) => void关闭时触发。详细类型定义。 type ActionSheetTriggerSource = 'overlay' | 'command' | 'select' |
N | |
| onSelected | Function | TS 类型：(selected: ActionSheetItem | string, index: number) => void选择菜单项时触发 |
N |
何时使用
需要提供一组与当前场景操作相关的关联操作时使用。
组件搭配使用
动作面板与按钮组合使用，通过按钮点击唤起动作面板。
常见用法
当用户完成一个事件可以通过若干种方式达成，可以用动态面板来承载这若干种方式的操作。
当页面中有一组操作因低频/空间不足不希望外露时，但却必要存在，可以用动作面板来承载，通过“更多”按钮触发
推荐/慎用示例
动作面板中不建议提供太多操作项，若过多项在小屏手机中导致需纵向滚动，体验将会受损。
动作面板中的操作项不建议用icon完成替代文字。
相似组件
| 组件名 | 何时使用 |
|---|---|
| 抽屉 | 需要收折展示一组数量较多的菜单时使用。 |
| 对话框 | 需要用户做一些决定，或这提供完成某个任务是需要的一些额外信息时使用。 |
| 下拉菜单 | 当内容较多时，需要通过筛选快速定位某一类内容时使用。 |
| 选择器 | 当需要在有限的空间展示大量选项供用户选择，或者一组选项由递进层级构成需要用户逐级选择时使用。 |
Vue 2
Vue 3
React
Flutter
Design
MiniProgram
WeCom Group
Welcome to contact us
