Overlay / 02
Drawer 四向抽屉
抽屉从屏幕四边滑出：右（默认）、左（.left）、上（.top）、下（.bottom）。同一页面演示筛选抽屉、导航抽屉、详情抽屉、通知中心与底部快捷操作，均可用遮罩点击、关闭按钮或 Esc 关闭。
四个方向
.drawer / .left / .top / .bottom
Right
460px / 94vw
从右侧滑出，最常用。承载筛选、详情、配置等纵向表单内容。
Left
.drawer.left
从左侧滑出，用于全局导航、会话列表与移动端主菜单。
Top
.drawer.top
从顶部滑出，高度约 340px。适合通知中心、搜索面板与横幅公告。
Bottom
.drawer.bottom
从底部滑出，移动端友好。适合分享面板与快捷操作面板。
三个典型场景
filter / detail / navigation筛选抽屉
关键词 + 多选 + 时间
抽屉底部固定「重置 / 应用」双按钮
条件回显在触发按钮上
已选 3 个条件 · 结果 128 条
详情抽屉
林
从列表行打开，右侧滑出，不打断列表上下文。适合成员档案、订单详情、日志查看。
在职
已认证
7 个协作项目
导航抽屉
全部组件
浮层弹窗
卡片与布局
多媒体
多级目录 + 当前项高亮，移动端主菜单的常见形态。
结构分层与规范
anatomy| 分区 | 类名 | 说明 |
|---|---|---|
| 遮罩 | .drawer-ov | 半透明模糊遮罩，点击关闭 |
| 头部 | .drawer-head | 标题 + 关闭按钮，固定在顶部 |
| 内容 | .drawer-body | 独立滚动区，超出高度自动出现滚动条 |
| 底部 | .drawer-foot | 操作按钮等宽平分，适合「重置 / 应用」 |
什么时候用抽屉
内容与主列表强相关、需要保留上下文时优先用抽屉；完全独立的流程（登录、支付）更适合弹窗。
避免叠层过多
抽屉里再开抽屉会造成方向迷失，超过两层建议改用页面跳转。