← 返回 Web 词条

底部操作列表

Web需自己实现

Web 原生没有这个

Web 没有专门的底部操作列表元素。需要这种交互时通常用对话框承载一列按钮,并按模态对话框处理焦点、关闭和键盘操作。

通常怎么做:使用 <dialog> 放置一列与当前任务直接相关的按钮,并遵循模态对话框的无障碍要求。

适用范围:桌面与移动端主流浏览器

社区一般叫它 Action Sheet

它是在当前操作需要你从少量选项里立刻做决定时,从屏幕底部出现的一列操作。

  • 点了以后从下面冒出一排选项
  • 底下弹出来让我选一个的东西
  • 长按后下面出来的那几个按钮
  • 底部操作列表
  • 操作选项弹窗
  • 动作列表
  • 底部选项列表

其他平台的相似实现

iOS原生支持
Action Sheet本平台没有对应叫法

Action Sheet 只提供与当前操作有关的选项,取消项和破坏性操作有明确位置与样式。

看 iOS 视角 →
Android需自己实现
该平台没有原生实现

Android 没有名为 Action Sheet 的独立 Material 组件。

看 Android 视角 →

使用规范

什么时候用

  • 让用户从少量、与当前任务直接相关的操作中立刻选一个
  • 需要把破坏性操作与普通操作清楚区分,并保留一个取消出口
  • 移动端空间有限,操作列表适合从屏幕底部靠近拇指的位置出现

什么时候别用

  • 需要展示表单、图片或大段内容 → 用 Bottom Sheet 或整页
  • 只是确认一个明确的是非问题 → 用 Alert 或 Dialog
  • 选项很多、需要搜索或分组 → 用单独的选择页面

容易混淆

Web 出处

查看 Web / iOS / Android 完整对照 →概念页上还有可交互示例。