反馈 · 11 / 21
Snackbar st-snackbar
消息条：open 控制显示、duration 到时自动关闭、color 换成 M3 角色色。action 插槽放一个用 color 着色的 st-button；toast 是固定在左下角、可堆叠的命令式版本。
显示、隐藏与 action 插槽
open 是布尔属性，页面里用 attr:open 绑定数据。action 插槽放操作按钮；按钮颜色必须用 st-button 的 color 属性（默认 secondary 底上用 on-secondary）；内联 style 也能生效，但不会自动配对 on-角色色。
open / action示例代码
<st-snackbar attr:open="snackOpen">
已删除 1 个项目
<st-button slot="action" variant="text" color="on-secondary" on:click="snackOpen = false">撤销</st-button>
</st-snackbar>
<st-button on:click="snackOpen = true">显示消息条</st-button>
<script>
export default async () => ({
data: { snackOpen: false },
});
</script>duration 自动关闭与 close
duration 是毫秒数，只在 open 存在时生效，到时自动关闭并派发 close。因为自动关闭是组件内部移除 open，页面数据不会自动变回 false，建议在 on:close 里手动复位，否则再次置 true 不会重新打开。
duration / on:close示例代码（自动关闭后复位状态）
<st-snackbar attr:open="autoOpen" duration="3000" on:close="onAutoClose">
设置已保存
</st-snackbar>
<script>
export default async () => ({
data: { autoOpen: false, closeCount: 0 },
proto: {
openAuto() {
this.autoOpen = true;
},
onAutoClose() {
this.autoOpen = false; // 内部移除 open 不会回写数据
this.closeCount += 1;
},
},
});
</script>color 语义换色
color 接受 M3 角色名或 color 工具里的自定义变量名，底色用角色色、文字自动配对 on-角色色。红色底上的操作按钮改用 color="on-error"，不要用内联 color。
colorattr:color示例代码
<st-snackbar open color="success">保存成功</st-snackbar>
<st-snackbar open color="error">
上传失败
<st-button slot="action" variant="text" color="on-error">重试</st-button>
</st-snackbar>
<!-- color 是标签属性，可随数据切换 -->
<st-snackbar attr:open="colorOpen" attr:color="barColor">...</st-snackbar>命令式 toast 与堆叠
toast 固定在视口左下角，可同时存在多条（后出的在下），每条独立计时。字符串参数默认 3 秒；对象参数支持 message / duration / color，duration: 0 表示只手动关闭。toast 自带滑入滑出动画。
window.__site.toast示例代码
import toast from "/packages/snackbar/toast.js";
const t = toast("已保存全部更改");
toast({ message: "同步完成", color: "success", duration: 4000 });
const sticky = toast({ message: "点 ✕ 关闭", duration: 0 });
sticky.close(); // 手动关闭（close 幂等）
// 连续调用即堆叠，每条独立计时
toast("第 1 条");
toast("第 2 条");
toast("第 3 条");长文本与操作区排版
默认宽度 14.286em–34.286em（200–480px），长消息自动换行，高度完全由内容决定。检测到 action 插槽有内容时，上下内边距会自动收紧到 0.286em，让 40px 按钮撑出 M3 的 48dp 高度。
long message / action示例代码
<st-snackbar attr:open="longOpen">
网络连接已断开，正在尝试重新连接……
<st-button slot="action" variant="text" color="on-secondary" on:click="openDetail">
查看详情
</st-button>
</st-snackbar>JS hide() 与原生样式定制
el.hide() 会关闭消息条并派发 close（和 duration 到时的路径一致）；页面里通过 this.shadow.$("#id") 取实例。视觉在宿主上，圆角、底色、文字色都能直接用原生 style 覆盖，不需要额外变量。
hide() / inline style示例代码
<st-snackbar id="snack" attr:open="open">这条由 JS 关闭</st-snackbar>
<script>
export default async () => ({
data: { open: false },
proto: {
hideSnackbar() {
this.shadow.$("#snack").hide(); // 关闭并派发 close
this.open = false;
},
},
});
</script>
<st-snackbar open style="border-radius: 999px; background: var(--md-sys-color-error); color: var(--md-sys-color-on-error);">
胶囊形消息
</st-snackbar>属性
| 属性 | 类型 | 默认 | 说明 |
|---|---|---|---|
open | boolean | 无 | 显示；页面里用 attr:open="key" 绑定 |
duration | number（毫秒） | 无 | open 存在时计时，到时自动关闭并派发 close |
color | M3 角色名 / 自定义变量名 | 无 | 角色色底 + on-角色色文字；未设置时 secondary |
插槽 / 事件 / 注意
- 插槽：默认消息文本；
action放操作按钮（颜色用 st-button 的 color 属性）。 - 事件：
close（bubbles + composed），duration 到时或el.hide()时派发；外部移除 open 不派发。 - 命令式：
toast(message | options)返回{ close, el }，左下角堆叠；duration: 0 不自动消失。 - 默认值：宽 14.286–34.286em、圆角 0.286em、padding
0.571em 1em（有 action 时上下 0.286em）；显隐即时切换，无内建动画。 - 定位由外部决定；页面里放在 .demo-stage 中已由 docs.css 设为 static，实际应用通常自己包 fixed 容器或直接用 toast。