底部操作列表浮层

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

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

示例

示例可交互

Web / iOS / Android 对照

Web需自己实现

桌面与移动端主流浏览器

Action Sheet

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

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

Android需自己实现

Android 手机 / 平板;不含 Wear OS、TV、Auto

Action Sheet

Android 没有名为 Action Sheet 的独立 Material 组件。少量操作通常用菜单,确实需要从底部呈现并保留更多说明时再使用 Modal Bottom Sheet。

通常怎么做:少量紧邻触发点的操作用 Menu;需要底部容器时用 Modal Bottom Sheet。

使用规范

什么时候用

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

什么时候别用

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

容易混淆

给 AI 的提示词

这条词条还没有经过验证的实现提示词。