Drawer 抽屉

屏幕边缘滑出的浮层面板。

适用：

• 不想离开当前任务，用户操作完成后，可以平滑地回到到原任务
• 需要在当前任务流中插入临时任务，创建或预览附加内容，比如展示协议条款，创建子对象
• 过于丰富的信息量和复杂的操作

通用原则

• 可选是否搭配遮罩：抽屉层级最高，默认情况下它的出现将遮罩页面的所有内容，遮罩背后的元素不可交互，除非关闭抽屉。可根据情况选择关闭遮罩，此时页面内容支持交互，抽屉会一直存在，对页面内容进行遮挡直到用户关闭抽屉。
• 始终可被关闭：用户可点击抽屉外的遮罩来关闭抽屉；除此之外，抽屉还需要独立的「关闭」入口
• 谨慎克制：需要克制地使用，尽量避免在抽屉中唤起另一层抽屉；承载的内容应该有所克制，尽量控制在一屏内，繁重的操作和密集的信息更适合设计为独立的页面
• 操作明确：抽屉中的操作要非常明确，用户可以快速做出选择，并继续回到上一个流程中去。

类型

基础

结构简单、通用性强的基础抽屉。可选是否带 Footer 操作。

层级

流程复杂，有分支任务，需要进入二级抽屉。

构成

1. Header
   1. 标题：标题应清晰传达当前抽屉的目的，文案请遵循文案与语气中的规范
   2. 关闭：用户可主动点击来关闭当前的抽屉
   3. 返回：进入二次抽屉后显示
2. 容器
3. 操作区
   1. 首要操作位于最右侧，建议并列放置 2 个操作项
   2. 如果只提供一个操作，则必须是确认操作
   3. 如果提供了两个操作，则必须一个是确认，一个是取消
4. 扩展区
   1. Footer 左侧为扩展区，可以承载独立操作项、行内提醒、辅助说明信息等；如果放置 Link，则必须为新开浏览器标签页面的形式。

行为

出现

• 从父窗体边缘滑入，覆盖住部分父窗体内容
• 任何控件都可触发抽屉。
• 会中断用户当前任务流程，应谨慎使用，因为不是每个选择或任务都需要中断。

内部滚动

• 左右出现时，高度为浏览器可显示内容的高度。
• 上下出现时，宽度为浏览器可显示内容的宽度。
• Header 与 Footer 始终固定。

过渡

在需要进入二级抽屉的场景，二级的抽屉的高度/宽度比父级要小一个等级，需用动画来做过渡。

关闭

用户有三种方法关闭当前的抽屉：

• 【默认方式】点击抽屉外的遮罩区域，在严重情况下可禁用
• 点击抽屉右上角的关闭图标按钮
• 使用键盘中的 ESC 键，在严重情况下可禁用

样式

位置

尺寸

左右抽屉：

上下抽屉：