抽屉 Drawer

定义

抽屉又名侧拉浮层，是在不离开主路径的情况下，提供给用户的辅助窗口。其主要用于：
执行相对简单的操作（如连续进行审批），浏览更多信息（如查看不复杂的内容详情），填写/录入相对简单的信息（如填写并提交一个相对简单的表单）等。

组件样式与交互说明

抽屉分为阻碍式和非阻碍式两种。

1. 阻碍式：有遮罩，遮罩下的内容不可操作，无法通过点击遮罩区域收起抽屉；适用于需要聚焦、强阻断的分支流程；
2. 非阻碍式：无遮罩，点击内容层/非抽屉区域可收起抽屉；适用于相对轻量、弱阻断的分支任务。

[出现方式] 抽屉的广泛能力，可以从上、下、左、右四个方向滑动出现；目前我们仅使用自右向左滑动的出现方式。
[动效] 抽屉进入屏幕时使用减速曲线实现快速进入，表明他们已经以峰值速度行进了；抽屉暂时离开屏幕时应该使用夏普曲线，因为元素随时可能返回屏幕，且在屏幕外不会距离屏幕太远。

减速曲线图示：

夏普曲线图示：

[尺寸] 抽屉的高度自适应浏览器高度；宽度有三个尺寸：S=600px；M=800px；L=1000px
[阴影] 抽屉在于临时层，阻碍式\非阻碍式均使用：阴影3_左

[规则] 抽屉最多可叠加2个，可按需选择抽屉大小（即第一层抽屉尺寸不需要强制大于第二层抽屉）；抽屉/双层抽屉上最多可再叠加一个弹窗。

抽屉S示意

抽屉M示意

抽屉L示意

双层抽屉示意

构成元素

抽屉由头部、底部容器&内容、底部按钮(组)构成。

1. 头部

头部高度=52px，标题字号=18px

2. 底部容器&内容

底部容器相当于一个大卡片，卡片内边距 Padding(l, r, t, b) = 20px
内容的具体规则跟随不同内容类型而定（如筛选区域、表单、表格、详情 等）

3. 底部按钮(组)（可选）

当需要“关闭”以外的行动点时，统一使用底部按钮组；规则同“底部按钮组”
当操作只有“关闭”，则无需额外放置行动点（使用右上角的“×”）

构成元素规则示意

典型案例

常规表单抽屉

复杂多层表单抽屉

复杂嵌套表单抽屉

带筛选表格抽屉

复杂逻辑树抽屉

抽屉表单详情

快速翻页

当有快速切换的诉求时（如快速审批、浏览 等），可使用左/右快速翻页，提升操作效率

相关规范链接

1.底部按钮组

点击此链接查看

2.表单-单列

点击此链接查看

3.表格

点击此链接查看

4.表单页

点击此链接查看
**

设计稿链接 (Sketch)

点击此链接查看