抽屉 · Drawer
英文：Drawer
常用组件难度：入门 ★
🗣️一句话大白话
从屏幕左、右或底部滑出的面板，可展示导航、筛选、设置或详情。一个从屏幕左侧、右侧或底部滑出的面板，可以展示导航、筛选、设置或详情。
🖼️样图参考
🎬真实场景
移动导航、筛选、设置、详情预览、购物车、通知中心
📮你可以这样说
「Punk 的项目列表点击卡片后，从右侧打开一个 Project Detail Drawer，桌面端宽度为 420px， 显示封面、简介、技术栈和访问链接； 页面主体仍然可见但不可操作，手机端让 Drawer 从底部打开并接近全屏。」
通过 AI绘图 工作台生成（模型 API 额度由此消耗）；未配置模型密钥时会提示失败原因。
⚠️边界与常见误解
- ▸误解：Drawer 和 Modal 一样。实际 Drawer 保留页面上下文（主体可见），适合详情/筛选等非阻断任务
🚫什么时候别用
- ✗需要完全专注的对话型任务（用 Modal）
🧩常见变体
右侧详情 Drawer底部筛选 Drawer移动端全屏 Drawer
🕸️知识关系图
这个词条与相关术语、AI绘图 知识的连接关系