配置与使用抽屉组件-多端低代码开发平台魔笔-阿里云

简介

抽屉从父窗体边缘滑入，覆盖住部分父窗体内容。用户在抽屉内操作时不必离开当前任务，操作完成后，可以平滑地回到原任务。

当需要一个附加的面板来控制父窗体内容，这个面板在需要时呼出。比如，控制界面展示样式，往界面中添加内容。
当需要在当前任务流中插入临时任务，创建或预览附加内容。比如展示协议条款或创建子对象。

更多信息可查看弹窗与抽屉。

配置项

分类	配置	示例	说明
展示区域	顶部		是否展示抽屉顶部标题栏。
展示区域	底部		是否展示抽屉底部操作栏。
交互	点击遮罩关闭		开启时，点击遮罩将默认触发`cancel` 事件。
	ESC关闭		开启时，按下 ESC 将默认触发`cancel` 事件。
	关闭后销毁子节点		默认情况下，抽屉关闭时会销毁其中的子节点。区别：如果抽屉内有 Image 组件，销毁子节点会导致每次打开抽屉时重新请求图片资源；而保留子节点时，只有第一次打开抽屉会请求图片资源，之后再次打开则不会。
样式	隐藏抽屉		控制抽屉的默认展示状态，为`true` 时将隐藏展示抽屉。该配置对应的组件属性值为`hidden`，在调用`show`方法时，hidden 状态将为 false。调用`toggleHidden`时，hidden 状态将取反。
	尺寸		设置抽屉的展示尺寸。
	抽屉位置		设置抽屉的展示位置。
	显示遮罩		是否显示遮罩。
	显示关闭按钮		是否展示顶部栏的关闭按钮。
CSS 样式	背景色		抽屉背景色，详情参见通用属性。
	顶部背景色		顶部区域背景色，详情参见通用属性。
	顶部内边距		顶部区域内边距，详情参见通用属性。
	顶部下边框		顶部区域下边框，详情参见通用属性。
	内容区背景色		内容区背景色，详情参见通用属性。
	内容区内边距		内容区内边距，详情参见通用属性。
	底部背景色		底部区域背景色，详情参见通用属性。
	底部内边距		底部区域内边距，详情参见通用属性。
	底部上边距		底部区域下边框，详情参见通用属性。
	关闭按钮左边距		关闭按钮距离标题的左边距
	关闭按钮右边距		关闭按钮距离标题的右边距

属性与方法

名称	类型	示例	说明
hidden	boolean	`drawerFrame.hidden`	当前组件是否隐藏
hide	func	`drawerFrame.hide()`	隐藏抽屉
show	func	`drawerFrame.show()`	展示抽屉
toggleHidden	func	`drawerFrame.toggleHidden()`	切换抽屉隐藏状态

事件回调

配置	说明
	点击遮罩、关闭按钮或按下 ESC 时将共同触发的事件。新增的抽屉默认将触发`hide`方法。
	在抽屉显示动画完成后将触发的事件
	在抽屉关闭动画完成后将触发的事件