Snackbar 消息条

底部（或顶部）居中的轻量反馈条。open 属性受控，多条自动纵向堆叠（每方向最多 3 条）；悬停/聚焦/页面隐藏时暂停计时并按剩余时长续走；oas-close 事件以 detail.reason 区分关闭途径（timeout / escape / close / swipe / evict / group），由外部负责移除 open。

基础用法

受控打开

打开

最近事件：—

示例代码

closable 开启关闭按钮（建议 duration="0" 常驻条必开）；按 Esc 可关闭——焦点在消息条内时关当前，无焦点时关最老一条。

操作按钮

操作按钮（撤销）

打开（带撤销）

示例代码

富内容插槽

默认插槽覆盖 message 属性

打开富内容照片已上传 — 查看相册

示例代码

插槽内容支持图标、链接、强调等富文本；有插槽内容时 message 属性不参与渲染（也不参与同内容合并）。

方向与偏移

方向与偏移

底部（默认）顶部底部 + 偏移 80

示例代码

堆叠与排队

堆叠 / 排队

连发四条（挤掉最老）连发四条（排队依次展示）

最近事件：—

示例代码

多条同向打开时纵向堆叠不重叠，最新一条贴屏幕边缘；默认超限（3 条）挤掉最老的一条（reason: evict）。加 queue 属性改为排队：栈满时等待，前面的关闭后依次补位（oas-open 在真正展示时才派发）。

暂停计时与进度

hover/focus 暂停 + 计时进度条

打开（6 秒 + 进度）

示例代码

悬停、聚焦（Tab 到操作/关闭按钮）或切换浏览器标签页时暂停计时，恢复后按剩余时长续走（不重置满时长）；进度条随暂停冻结。no-pause 可关闭全部自动暂停。

同内容合并

group 合并 + 计数徽标

连点两次保存

示例代码

设置 group 后，同组同文案的新消息不另开一条，而是并入既有条目并展示 ×n 计数、重置计时（被合并的元素收到 oas-close，reason: group）。

滑动关闭与常驻

滑动关闭（触屏）/ 常驻条

打开常驻条

示例代码

swipe 开启纵向滑动关闭（位移超过阈值松手抛出，reason: swipe）；duration="0" 常驻不自动关闭，必须提供关闭路径（closable 或操作按钮）。

API

oas-snackbar

属性

属性	说明	类型	默认值
action-text	操作按钮文案	string	—
closable	右侧显示 ✕ 关闭按钮（点击关闭，oas-close detail.reason=close）	boolean	—
direction	位置方向	—	—
duration	自动关闭时长（ms）	string	4000
group	同内容合并分组键：同方向 + 同 group + 同 message 的新条目并入既有条目（计数徽标 ×N + 计时重置），自身派发 oas-close（reason=group）不展示；默认插槽内容不参与合并	string	—
message	文案	string	—
no-pause	禁用自动暂停：hover / 焦点 / 页面隐藏不再冻结计时（默认三者都会暂停）	boolean	—
offset	距屏幕边缘偏移（px）	string	24
open	是否显示（受控）	boolean	—
progress	显示计时进度条（底部 2px，JS 记账驱动 scaleX，暂停即冻结）	boolean	—
queue	栈满排队：同方向在屏满 3 条时 FIFO 排队等空位补位展示（未设置则挤掉最老一条，reason=evict）	boolean	—
swipe	启用滑动关闭：纵向拖拽 ≥48px 关闭（顺势抛出离场）	boolean	—

事件

事件	说明
oas-action	点击操作按钮时派发
oas-close	到期自动关闭时派发（受控模式不自改 open），detail: { reason }
oas-open	打开时派发

插槽

名称	说明
默认	通知内容

CSS 变量

CSS 变量	说明	默认值
--oas-glass-blur	—	none
--oas-glass-refraction	液态玻璃边缘折射滤镜（data-glass 生效，默认 none）；局部停用覆盖为空值（--oas-glass-refraction: ;）——不得用 none（与 button 态的 brightness() 混排会使整条 filter 声明非法）	none
--oas-glass-ring	—	transparent

• open 受控：到期只派发 oas-close，由外部负责移除 open；单实例复用时 message 变更不会重启计时，新消息请先关后开或新建元素。
• 同方向最多堆叠 3 条（纵向排列不重叠，最新贴边），超出时最老的一条收到 oas-close（reason: evict）；queue 模式改为 FIFO 排队补位。
• 无障碍：始终为 role="status" + aria-live="polite" + aria-atomic="true"（反馈条不使用打断式播报）；多条堆叠时仅最新一条的按钮参与 Tab 序（其余 inert），组件不抢占焦点。