ActionSheet 动作面板

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

何时使用

由用户操作触发,提供一组与操作相关的两个或多个选项,让用户在不离场的情况下完成操作。相比于对话框,动作面板的位置更适合于在大屏幕时代的单手操作

代码示例

基本使用

属性

type IActionItem = {
text: string
key: string
icon: string;
description?: string;
danger?: boolean;
disabled?: boolean;
}

属性类型必填默认值说明
visiblebooleanfalse是否可见
actionsIActionItem[][]面板选项列表
titlestring-标题
cancelTextstring取消取消按钮文字
classNamestring-类名

事件

事件名说明类型
onAction点击选项时触发,禁用状态下不会触发(item: IActionItem, index, event) => void
onClose关闭时触发(event) => void

CSS 变量

CSS 变量名称说明
--am-actionsheet-danger-color危险状态字体颜色
--am-actionsheet-icon-widthicon宽度
--am-actionsheet-icon-heighticon高度