底部抽屉
Bottom Sheet
别名:底部抽屉底部面板上拉面板手机底部弹出来的面板底部弹层bottom sheetaction sheet
这是什么
从屏幕底边升起、覆盖在当前页面之上的面板，顶部有抓手可供拖动或下滑关闭。打断程度介于模态框与 气泡卡片之间：有遮罩但拇指可及、可下滑快速收起。是移动端承接筛选、分享、短表单的默认容器， 桌面端应改用侧边抽屉或居中对话框。
名词辨析
「抽屉」有歧义：底部抽屉（Bottom Sheet）指从底边升起的面板；侧边抽屉（Drawer）从左右边缘滑入； 系统对话框的 sheet 是居中弹出的文档式窗口；表格软件的 sheet 则指工作表，与浮层无关。
交互实验室
试一试，再决定怎么用打开底部抽屉，拖动抓手在档位间切换，再下滑关闭，感受它与侧边抽屉的差别。
正在加载实验室…
使用时关注什么
- 01下滑或点遮罩可关闭，Esc 同样有效
- 02面板贴底升起，操作按钮落在拇指热区
✓ 适用场景
- 移动端筛选、排序、分享等短任务，需覆盖在当前页上
- 操作列表或选项数量有限，单手拇指可达
- 内容比一行 tooltip 多、比整页流程短
✕ 不适用场景
- 桌面端为主的界面（改用 drawer 或 modal）
- 需要强制决策、不可轻易关闭（改用 modal）
- 长表单或长篇阅读（改为全屏页面更稳）
常见形式
固定高度
Fixed height
内容量可预期，一次到位不拖拽
可拖拽档位
Draggable detents
抓手拖到半开 / 全开档位，iOS Sheet 风格
全屏展开
Full expand
上拉占满屏幕，适合长内容或键盘弹出
实现要点
position: fixedtransformtransitiontouch-action面板 fixed 贴底，用 transform: translateY(100%) ↔ 0 收放（不要动 height，GPU 友好）； 顶部抓手为 36×4 圆角条。拖拽档位用 pointer 事件跟踪 dy，松手按阈值吸附到最近档位； 下滑超过阈值关闭。遮罩淡入、body 滚动锁定、焦点移入面板，Esc 关闭；尊重 prefers-reduced-motion。
平台 API
<dialog>role="dialog"aria-modal="true"代码里叫什么
同一控件在不同体系里的叫号——用对名字，Prompt 和检索才准。
| 体系 | 名称 |
|---|---|
| iOS | UISheetPresentationController |
| MUI | SwipeableDrawer |
| Radix | Dialog |
横向对比
查看完整对比 →相关概念
从屏幕边缘（多为右侧或左侧）滑入、通常带遮罩的面板。比模态框轻：能承载较长内容又不离开当前页面， 关闭后原样回到上下文；移动端常以左滑导航或底部抽屉的形式出现。
组件替代方案覆盖在页面之上、带半透明遮罩的对话框，打断用户当前流程，要求先完成弹窗内的任务或决策。 遮罩阻断与底层页面的交互，焦点被暂时困在弹窗内，是容器类浮层中打断程度最高的一种。
组件替代方案在列表顶部按住并向下拖动，出现随拖动距离变化的加载指示，超过阈值后松手即重新拉取最新数据。 它解决的是"内容可能已经过期"的问题——用户主动、可预期地请求更新， 而不是被动等待自动轮询，刷新的时机和结果都由自己掌控。
交互模式搭配使用