← 返回 Web 词条
底部操作列表
Web 原生没有这个
Web 没有专门的底部操作列表元素。需要这种交互时通常用对话框承载一列按钮,并按模态对话框处理焦点、关闭和键盘操作。
通常怎么做:使用 <dialog> 放置一列与当前任务直接相关的按钮,并遵循模态对话框的无障碍要求。
它是在当前操作需要你从少量选项里立刻做决定时,从屏幕底部出现的一列操作。
- 点了以后从下面冒出一排选项
- 底下弹出来让我选一个的东西
- 长按后下面出来的那几个按钮
- 底部操作列表
- 操作选项弹窗
- 动作列表
- 底部选项列表
其他平台的相似实现
iOS原生支持
Action Sheet本平台没有对应叫法Action Sheet 只提供与当前操作有关的选项,取消项和破坏性操作有明确位置与样式。
看 iOS 视角 →Android需自己实现
该平台没有原生实现Android 没有名为 Action Sheet 的独立 Material 组件。
看 Android 视角 →使用规范
什么时候用
- 让用户从少量、与当前任务直接相关的操作中立刻选一个
- 需要把破坏性操作与普通操作清楚区分,并保留一个取消出口
- 移动端空间有限,操作列表适合从屏幕底部靠近拇指的位置出现
什么时候别用
- 需要展示表单、图片或大段内容 → 用 Bottom Sheet 或整页
- 只是确认一个明确的是非问题 → 用 Alert 或 Dialog
- 选项很多、需要搜索或分组 → 用单独的选择页面
容易混淆
Web 出处
查看 Web / iOS / Android 完整对照 →概念页上还有可交互示例。