Bottom Sheet
底部弹出面板
Mobile上手难度: 中等
从屏幕底部往上滑出来的一块面板，停在那儿不占满全屏。
Live Demo
真的可以点你刚才看到的这个：照片 App 点「编辑」后从底部升起的编辑面板、地图 App 点搜索后的筛选面板、微信点「+」后弹出的「拍摄 / 从相册选 / 扫一扫」列表。
它到底是什么
Bottom Sheet 是移动端最讨喜的容器：它保留了「我还在原来的页面」的感觉，同时又能展开一个专注的操作区。最常见的两种形态是：固定高度的选择面板，和纯操作按钮列表（Action Sheet）。
底部弹窗bottom sheet底部抽屉底部弹出层action sheet底部面板
Anatomy · 它由什么组成
Scrim遮罩
半透明黑，不完全遮蔽底层
Surface面板
顶部圆角 16px，从底部升起
Drag Handle拖拽条
顶部居中短横线，提示可拖
Title标题
可选，居中
Content内容
选项列表或表单
Handle / Grabber抓手
向下拖动可关闭
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 移动端需要一个轻量的选择或操作面板 | 用 |
| 想保留底层页面上下文（用户还能看到自己在哪） | 用 |
| 操作项在 3–8 个之间 | 用 |
| 内容需要全屏深度（长表单、编辑器） | 不用 |
| 桌面端 Web 界面 | 视情况 |
内容超过半屏时，Bottom Sheet 会让用户失去「页面」的锚点感，这时用全屏页面更稳。
要严格「拦住」用户必须做决定时，Modal 的阻断感更强。
Similar Patterns
别搞混一句话区分：从屏幕底部往上滑出来的一块面板，停在那儿不占满全屏。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
点击「筛选」后从屏幕底部打开 Bottom Sheet：高度根据内容自适应，最大不超过视口 70%，背景保留并加半透明遮罩，顶部有拖拽 Handle，向下拖动或点击遮罩关闭。
不要只对 AI 说
Bad → Better不要这样对 AI 说
点一下从底下弹个东西出来。
改成这样说
点击「筛选」后打开 Bottom Sheet：高度按内容自适应、max-height 70vh、顶部圆角 16px + Drag Handle，背景加 40% 遮罩保留可见，可通过下滑/点遮罩/取消按钮/ESC 四种方式关闭。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。