Angular Toast 通知服务 | ng-hub-ui-toast
standalone 的 Angular toast 通知服务，支持 Signals、生命周期 observables、进度条、六个位置以及完整的 CSS 变量主题化。
API 参考
这里是 toast 的完整契约：你可以绑定、监听、投影和设置主题的一切，都集中在一处。接入你需要的部分，自定义你想要的样式——它是 standalone 的，且对 signal 友好。
输入
尚未记录任何输入项。
输出
尚未记录任何输出项。
模板
尚未记录任何模板。
CSS 变量
用 15 个 CSS 变量为每一个像素设置主题。在 :root 处覆盖它们，或将其限定到某个容器范围内。
布局与间距
用于控制 toast 尺寸、圆角、内边距和阴影的令牌。
| 变量 | 默认值 | 类型 | 描述 |
|---|---|---|---|
--hub-toast-width | 22rem | length | 每个 toast 卡片的最大宽度。 18rem26rem |
--hub-toast-border-radius | 0.375rem | length | toast 卡片的圆角半径。 00.75rem |
--hub-toast-padding-x | 1rem | length | toast 主体内部的水平内边距。 0.75rem1.25rem |
--hub-toast-padding-y | 0.75rem | length | toast 主体内部的垂直内边距。 0.5rem1rem |
--hub-toast-gap | 0.5rem | length | 容器中堆叠 toast 之间的间距。 0.25rem0.75rem |
--hub-toast-shadow | 0 2px 8px rgba(0,0,0,.25) | shadow | toast 卡片投射的阴影。 none0 4px 20px rgba(0,0,0,.18) |
颜色
背景、前景和强调色令牌。内置类型会从 --hub-sys-color-<type>-* 覆盖强调色。
| 变量 | 默认值 | 类型 | 描述 |
|---|---|---|---|
--hub-toast-bg | #323232 | color | toast 卡片的背景颜色。 #fffvar(--bs-dark) |
--hub-toast-color | #ffffff | color | toast 主体文本颜色。 #212529var(--bs-body-color) |
--hub-toast-title-color | inherit | color | toast 标题文本颜色。 #fffvar(--bs-emphasis-color) |
--hub-toast-accent | transparent | color | 左边框或高亮颜色；对于内置类型会自动从 DS 令牌族中设置。 var(--hub-sys-color-primary)#0d6efd |
进度条
用于在 toast 底部渲染的倒计时进度条的令牌。
| 变量 | 默认值 | 类型 | 描述 |
|---|---|---|---|
--hub-toast-progress-height | 4px | length | 进度条条带的高度。 2px6px |
--hub-toast-progress-bg | rgba(255,255,255,.4) | color | 进度条填充的背景颜色。 rgba(0,0,0,.2)var(--bs-primary) |
容器
用于承载所有可见 toast 的固定 overlay 容器的令牌。
| 变量 | 默认值 | 类型 | 描述 |
|---|---|---|---|
--hub-toast-container-gap | 0.5rem | length | 容器中相邻 toast 之间的垂直间距。 0.25rem1rem |
--hub-toast-container-offset | 1rem | length | 从屏幕边缘到容器的距离。 0.5rem2rem |
--hub-toast-zindex | 1090 | number | toast 容器相对于其他 overlay 的堆叠顺序。 10509999 |
样式与主题
尚未记录任何样式示例。本节将包含自定义方案和主题示例。