返回
UI · №20 · PLATE
弹窗（怎么选）Modal vs Drawer vs Sheet
弹出来一个框弹窗从旁边滑出来的面板从底下升上来的菜单
先看怎么选
你想「弹个东西出来」？先分清这三种——选错的代价是 agent 给你一个居中大弹窗，而你要的其实是侧边栏。
朱批必须先处理 → Modal；内容多但别离开页面 → Drawer；在手机上 → Bottom Sheet。
LIVE SPECIMEN真的能玩，点点看
模态弹窗
居中、挡住一切，逼你先处理
抽屉
从右侧滑出，页面还在旁边
底部面板
从底部升起，移动端最常见
模态弹窗
Modal (Dialog)
居中弹出、挡住整个页面，逼用户先处理它才能继续。
- 适合
- 删除确认、必填信息、不处理就不能往下走的事。
- 不适合
- 只是展示信息或可有可无的操作——别打断用户。
实现细节与 Prompt
- web
- <dialog> + showModal()
- react
- <Dialog>（Radix/shadcn）
Use a centered modal dialog that blocks the page: dark scrim behind it, focus trapped inside, Escape and scrim-click to dismiss.抽屉
Drawer
从屏幕边缘（常为右侧）滑出的面板，页面还在旁边可见。
- 适合
- 筛选面板、详情侧栏、设置项——需要较多内容但不想让用户「离开」当前页面。
- 不适合
- 简短的确认类操作（杀鸡用牛刀）。
实现细节与 Prompt
- web
- position: fixed + transform 过渡
- react
- <Drawer>（vaul/shadcn）
Use a drawer sliding in from the right side, 400px wide, with the page still visible behind a light scrim; close on scrim click or X button.底部面板
Bottom Sheet
从屏幕底部升起的面板，移动端最常见，可半开/全开。
- 适合
- 移动端的操作菜单、分享面板、筛选项。
- 不适合
- 桌面端大屏（底部升起在大屏上很怪，用 Drawer 或 Modal）。
实现细节与 Prompt
- web
- 同 Drawer，方向改为 bottom
- react
- <Sheet side="bottom">（shadcn）
On mobile, use a bottom sheet that slides up from the bottom edge, with a drag handle at top, supporting half-open and full-open states.详细说明
「我要个弹窗」是最常见的模糊需求之一。弹窗其实是一整类模式，Modal、Drawer、Bottom Sheet 各自适合不同场景。这一页帮你根据「你的场景」选对那一个，并拿到对应的 prompt。