抽屉Drawer
提示与状态反馈从屏幕边缘打开一块临时工作区
抽屉适合在不离开当前页面的情况下查看详情、调整筛选或完成稍长任务。无论占据部分还是整个屏幕，都要有明确标题、关闭入口和正确的焦点管理。
任务详情 ×
关闭保存
什么时候用
- 列表点开看详情：不跳页，看完关掉接着逛任务详情
- 筛选条件面板：选项多，弹窗放不下筛选进行中已完成确定
- 稍长的二级表单：编辑资料、添加成员编辑成员林小hu邮箱保存
- 移动端导航菜单：从左侧滑出的经典用法首页组件模板设置
什么时候不用
- 危险操作确认 → 用 弹窗 Modal 更聚焦确认删除？取消删除
- 就一两行内容 → 用 气泡卡片 Popover 或 文字提示 Tooltip统计共 3 条记录
- 抽屉里再开抽屉 → 层层套娃回不去
- 多步骤长流程 → 新页面配 步骤条 Steps1填写信息2确认订单3完成支付
组成结构 · Anatomy
任务详情 ×
关闭保存
1抽屉面板Drawer贴边滑出的容器，只遮住部分页面
2标题栏Header标题加关闭，说清这是什么
3内容区Body详情、筛选或表单，比弹窗能装
4底部操作Footer可选，放保存 / 关闭
常见变体 · Variants
右侧抽屉Right
任务详情 ×
看详情、填表单的首选方向，最常用
左侧抽屉Left
导航 ×
放导航菜单，移动端最经典的用法
底部抽屉Bottom
分享给 ×
手机上分享、选操作，贴着拇指用
典型使用场景
列表行详情
首页改版设计进行中
支付流程走查已完成
新手引导文案未开始
任务详情×
进行中 · 林小hu
筛选面板
筛选×
状态
☑ 进行中 ☐ 已完成
负责人
☑ 林小hu ☐ oil-oil
编辑成员表单
编辑成员×
移动端菜单
首页
组件
模板
设置