Drawer
抽屉
MobileWebDesktop上手难度: 中等
从屏幕边缘滑出来的一块面板，通常是侧面的，也可以是底部的。
Live Demo
真的可以点抽屉会盖住这一半页面
你刚才看到的这个：点左上角汉堡按钮从左边滑出的菜单、购物车里从右侧滑出的「已选商品」面板、小红书侧滑出的设置。
它到底是什么
Drawer 的定义特征是「从边缘滑入 + 推开或遮住原页面」。底部滑出的 Drawer 往往就是 Bottom Sheet；真正有区别的是侧边 Drawer——它用来承载导航或筛选，不打断主流程。
抽屉侧边抽屉drawer侧滑面板滑出面板off-canvas
Anatomy · 它由什么组成
Overlay遮罩层
半透明黑，可点击关闭
Panel面板
侧边滑入，宽度 280–320px
Handle边缘把手
可选，提示可滑出
Content内容
导航项或表单
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 移动端需要容纳底部导航放不下的入口 | 用 |
| 筛选条件较多，需要一个完整面板承载 | 用 |
| 主内容需要保持可见（对比筛选结果） | 视情况 |
| 需要一次展示大量信息（帮助、详情） | 不用 |
Drawer 里如果再放 Tabs 和 Accordion，就已经是个页面了——不如直接导航过去。
多个 Drawer 互相嵌套（抽屉里开抽屉）会让返回逻辑变得混乱。
Similar Patterns
别搞混一句话区分：从屏幕边缘滑出来的一块面板，通常是侧面的，也可以是底部的。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
加一个从左侧滑出的 Drawer，宽 300px，承载主导航；汉堡按钮唤起，遮罩点击或 Esc 关闭，关闭后焦点返回按钮。
不要只对 AI 说
Bad → Better不要这样对 AI 说
加个能滑出来的侧边面板。
改成这样说
加左侧 Drawer（宽 300px）：汉堡按钮唤起、40% 遮罩、Esc 与点遮罩关闭、focus trap、关闭后焦点归还按钮、锁定背景滚动，≥1024px 时改为常驻 Sidebar。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。