抽屉Drawer
你可能会说
从右边滑出来一块面板看详情，背后的列表还能看见。
从屏幕边缘滑出的覆盖层面板，用于展示承载较多内容的辅助操作。在项目列表旁查看详情或调整筛选时可打开抽屉。无论在手机上占满屏幕还是只占一侧，都需要清楚的标题、关闭入口和焦点管理。
也常被叫作抽屉组件侧边滑出面板侧边抽屉
什么时候用
- 列表点开看详情：不跳页，看完关掉接着逛任务详情
- 筛选条件面板：选项多，弹窗放不下筛选进行中已完成确定
- 稍长的二级表单：编辑资料、添加成员编辑成员林小hu邮箱保存
- 移动端导航菜单：从左侧滑出的经典用法首页组件模板设置
什么时候不用
- 确认危险操作：使用 弹窗 Modal 让任务更聚焦确认删除？取消删除
- 只有简短内容：使用 气泡卡片 Popover 或 文字提示 Tooltip统计共 3 条记录
- 在抽屉内继续打开抽屉：层级会难以返回和理解
- 多步骤长流程：使用新页面配合 步骤条 Steps1填写信息2确认订单3完成支付
组成结构 · Anatomy
任务详情 ×
关闭保存
贴边滑出的容器，只遮住部分页面
标题加关闭，说清这是什么
详情、筛选或表单，能承载更长排版与较多操作项
可选，放保存 / 关闭
常见变体 · Variants
右侧抽屉Right
任务详情 ×
查看详情或填写表单时
左侧抽屉Left
导航 ×
承载导航菜单时
底部抽屉Bottom
分享给 ×
移动端选择操作或分享时
典型使用场景
列表行详情
首页改版设计进行中
支付流程走查已完成
新手引导文案未开始
任务详情×
进行中 · 林小hu
筛选面板
筛选×
状态
☑ 进行中 ☐ 已完成
负责人
☑ 林小hu ☐ oil-oil
编辑成员表单
编辑成员×
移动端菜单
首页
组件
模板
设置