抽屉Drawer

你可能会说

从右边滑出来一块面板看详情，背后的列表还能看见。

从屏幕边缘滑出的覆盖层面板，用于展示承载较多内容的辅助操作。在项目列表旁查看详情或调整筛选时可打开抽屉。无论在手机上占满屏幕还是只占一侧，都需要清楚的标题、关闭入口和焦点管理。

也常被叫作抽屉组件侧边滑出面板侧边抽屉

任务详情 ×

关闭保存

你可以这样告诉 AI Agent

在订单列表右侧打开编辑收货地址的抽屉，保留背景订单和原滚动位置。抽屉要有标题、关闭入口和保存反馈；请验证键盘焦点、关闭返回位置以及小屏布局。

组成结构 · Anatomy

任务详情 ×

关闭保存

贴边滑出的容器，只遮住部分页面

标题加关闭，说清这是什么

详情、筛选或表单，能承载更长排版与较多操作项

可选，放保存 / 关闭

常见变体 · Variants

右侧抽屉Right

任务详情 ×

查看详情或填写表单时

左侧抽屉Left

导航 ×

承载导航菜单时

底部抽屉Bottom

分享给 ×

移动端选择操作或分享时

典型使用场景

列表行详情

首页改版设计进行中

支付流程走查已完成

新手引导文案未开始

任务详情×

进行中 · 林小hu

筛选面板

筛选×

状态 ☑ 进行中　☐ 已完成负责人 ☑ 林小hu　☐ ans-studio

编辑成员表单

编辑成员×

移动端菜单

首页组件模板设置

快速练习

A. 在页面中央打开尺寸固定的小确认弹窗B. 跳转到独立地址页，保存后回到列表顶部C. 从右侧打开可关闭的编辑抽屉，保留列表背景