Drawer 抽屉

抽屉是从屏幕一侧滑出的抽屉式的面板，唤出时会覆盖住部分屏幕内容。

---

开发说明

多了三种预设宽度。

其他样式上的变化。

基础抽屉

承载展示性的信息内容。当页面空间有限时，可用抽屉增大页面扩展性。

可操作的抽屉

操作类抽屉在抽屉中承载需要编辑或操作的表单，可在用户需要操作时使用。

不同尺寸

五种尺寸：

Token	Value(px)	Usage
--drawer-xss	400	表单编辑查看。
--drawer-xs	600	表单编辑查看。
--drawer-sm	800	表单编辑查看。
--drawer-md	1200	表格数据选择和编辑。
--drawer-lg	Full Width (margin-left: 16px)	表格数据选择和编辑，常用于数据比较多的情况。

交互状态

1. 黑色蒙层的点击 ：普通信息展示的抽屉可通过点击黑色蒙层来关闭对话框；若是信息编辑的抽屉，不建议点击黑色蒙层关闭对话框，容易造成已填写数据的丢失。
2. 溢出内容的展示 ：若正文内容超过抽屉的最大高度，内容部分可垂直滚动，滚动时标题和行动按钮保持固定，抽屉内容不可以支持横向滚动。

何时使用

• 展示辅助信息 ：结合页面内容进行辅助信息的展示。
• 信息快捷输入 ：不中断当前流程的情况下，进入信息的快捷输入。

何时不使用

• 当抽屉中内容过少，且无需高频操作，建议使用 对话框 ，而非 抽屉 。

文案指南

• 标题：应该简短，使用动词和名词的组合，清楚地描述任务或目的。
• 正文 ：应仅包含与完成当前任务相关的内容，如果需要包含PDF等参考文档，请将其作为链接包含在正文中。
• 行动按钮：对添加、删除和保存等操作使用描述性词语。

布局

• 整体区域布局，抽屉在整个页面出现。
• 局部区域布局，抽屉仅在当前操作的区域内出现，而不会覆盖整个页面。