底部操作列表浮层
它是在当前操作需要你从少量选项里立刻做决定时,从屏幕底部出现的一列操作。
- 点了以后从下面冒出一排选项
- 底下弹出来让我选一个的东西
- 长按后下面出来的那几个按钮
- 底部操作列表
- 操作选项弹窗
- 动作列表
- 底部选项列表
示例
示例可交互
Web / iOS / Android 对照
Web需自己实现
桌面与移动端主流浏览器
Action Sheet
Web 没有专门的底部操作列表元素。需要这种交互时通常用对话框承载一列按钮,并按模态对话框处理焦点、关闭和键盘操作。
通常怎么做:使用 <dialog> 放置一列与当前任务直接相关的按钮,并遵循模态对话框的无障碍要求。
iOS原生支持
iOS / iPadOS
Action Sheet
也叫 Confirmation Dialog
SwiftUI: confirmationDialog|UIKit: UIAlertController.Style.actionSheet
Action Sheet 只提供与当前操作有关的选项,取消项和破坏性操作有明确位置与样式。它不是用来承载任意内容的半屏面板。
Android需自己实现
Android 手机 / 平板;不含 Wear OS、TV、Auto
Action Sheet
Android 没有名为 Action Sheet 的独立 Material 组件。少量操作通常用菜单,确实需要从底部呈现并保留更多说明时再使用 Modal Bottom Sheet。
通常怎么做:少量紧邻触发点的操作用 Menu;需要底部容器时用 Modal Bottom Sheet。
使用规范
什么时候用
- 让用户从少量、与当前任务直接相关的操作中立刻选一个
- 需要把破坏性操作与普通操作清楚区分,并保留一个取消出口
- 移动端空间有限,操作列表适合从屏幕底部靠近拇指的位置出现
什么时候别用
- 需要展示表单、图片或大段内容 → 用 Bottom Sheet 或整页
- 只是确认一个明确的是非问题 → 用 Alert 或 Dialog
- 选项很多、需要搜索或分组 → 用单独的选择页面
容易混淆
给 AI 的提示词
这条词条还没有经过验证的实现提示词。