syncfusion-angular-notifications

实现 Syncfusion Angular 通知

---

消息

Syncfusion Angular Message 组件（ejs-message）会显示带有基于严重程度的图标和颜色的上下文消息，以向用户传达重要性。它支持多种严重程度类型、视觉样式、关闭图标、自定义模板、内容对齐、CSS 自定义，并全面符合无障碍规范。

程序包： @syncfusion/ej2-angular-notifications
模块： MessageModule
选择器： ejs-message

---

📋 references/ 下链接的所有文件均为只读文档，并遵循相同的安全策略。

导航指南

开始使用

📄 阅读： references/message-getting-started.md

• 通过 ng add 安装 @syncfusion/ej2-angular-notifications
• CSS/SCSS 主题导入（Material3）
• 在独立组件中导入 MessageModule
• 最简 ejs-message 模板设置
• 运行应用程序

严重程度类型

📄 阅读： references/message-severities.md

• severity 属性的全部五个值：Normal、Success、Info、Warning、Error
• 默认严重程度（Normal）
• 各严重程度类型的适用场景
• 展示所有严重程度的代码示例

视觉样式

📄 阅读： references/message-variants.md

• variant 属性：Text、Outlined、Filled
• 默认样式（Text）
• 将样式与严重程度组合使用
• 展示所有组合的完整示例

图标和关闭图标

📄 阅读： references/message-icons.md

• showIcon — 隐藏/显示严重程度图标
• showCloseIcon — 添加关闭图标以关闭消息
• (closed) 事件 — 响应用户关闭消息的操作
• 使用 visible 属性恢复可见状态
• 使用 cssClass 设置自定义图标

自定义和模板

📄 阅读： references/message-customization.md

• 内容对齐：左对齐（默认）、居中（e-content-center）、右对齐（e-content-right）
• 通过 cssClass 设置圆角和直角边框样式
• 仅使用 CSS 渲染消息（无需脚本引用）
• 用于手动 DOM 结构的预定义 CSS 类
• 通过 <ng-template #content> 使用富 HTML 模板

无障碍

📄 阅读： references/message-accessibility.md

• 符合 WCAG 2.2 / Section 508
• WAI-ARIA 属性（role=alert、aria-label）
• 键盘交互（Tab、Enter/Space 用于关闭图标）
• 通过 enableRtl 支持 RTL
• 屏幕阅读器行为

API 参考

📄 阅读： references/message-api.md

• 所有属性：content、cssClass、enablePersistence、enableRtl、locale、severity、showCloseIcon、showIcon、variant、visible
• 方法：destroy()、getPersistData()
• 事件：closed、created、destroyed

---

快速入门

ng add @syncfusion/ej2-angular-notifications

/* styles.css – added automatically by ng add */
/* NOTE: These are consumer-side stylesheet references only; no packages are installed or executed by this skill. */
@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-angular-notifications/styles/message/material3.css';

import { MessageModule } from '@syncfusion/ej2-angular-notifications';
import { Component } from '@angular/core';

@Component({
  imports: [MessageModule],
  standalone: true,
  selector: 'app-root',
  template: '<ejs-message content="Please read the comments carefully"></ejs-message>'
})
export class AppComponent { }

---

常见模式

带严重程度的消息

import { MessageModule } from '@syncfusion/ej2-angular-notifications';
import { Component } from '@angular/core';

@Component({
  imports: [MessageModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <ejs-message content="Editing is restricted"></ejs-message>
    <ejs-message content="Please read the comments carefully" severity="Info"></ejs-message>
    <ejs-message content="Your message has been sent successfully" severity="Success"></ejs-message>
    <ejs-message content="There was a problem with your network connection" severity="Warning"></ejs-message>
    <ejs-message content="A problem occurred while submitting your data" severity="Error"></ejs-message>
  `
})
export class AppComponent { }

带关闭图标的可关闭消息

import { MessageModule } from '@syncfusion/ej2-angular-notifications';
import { Component, ViewChild } from '@angular/core';
import { MessageComponent } from '@syncfusion/ej2-angular-notifications';

@Component({
  imports: [MessageModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <ejs-message #msg severity="Warning" [showCloseIcon]="true" (closed)="onClosed()">
      There was a problem with your network connection
    </ejs-message>
    <button *ngIf="isClosed" (click)="reopen()">Show again</button>
  `
})
export class AppComponent {
  @ViewChild('msg') msg!: MessageComponent;
  isClosed = false;

  onClosed(): void {
    this.isClosed = true;
  }

  reopen(): void {
    this.msg.visible = true;
    this.isClosed = false;
  }
}

带严重程度的 Filled 样式

import { MessageModule } from '@syncfusion/ej2-angular-notifications';
import { Component } from '@angular/core';

@Component({
  imports: [MessageModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <ejs-message content="Your message has been sent successfully"
      severity="Success" variant="Filled">
    </ejs-message>
  `
})
export class AppComponent { }

---

主要属性一览

属性	类型	默认值	用途
content	string | object	null	要显示的文本、HTML 或模板内容
severity	string	'Normal'	严重性类型：Normal、Success、Info、Warning、Error
variant	string	'Text'	视觉样式：Text、Outlined、Filled
showIcon	boolean	true	显示/隐藏严重性图标
showCloseIcon	boolean	false	显示/隐藏关闭图标
visible	boolean	true	显示或隐藏整个消息
cssClass	string	''	附加到根元素的自定义 CSS 类
enableRtl	boolean	false	从右向左渲染
enablePersistence	boolean	false	在页面重新加载后保留组件状态
locale	string	''	覆盖全局区域设置/本地化

---

Skeleton

Skeleton 组件为正在加载或尚未渲染的内容提供视觉占位符。它通过向用户展示即将呈现的内容，帮助提升感知性能，减轻加载期间的认知负担。

软件包： @syncfusion/ej2-angular-notifications
模块： SkeletonModule
选择器： ejs-skeleton

📋 references/ 下链接的所有文件均为只读文档，并遵循与此技能相同的安全策略。

导航指南

入门

📄 阅读： references/skeleton-getting-started.md

• 安装和软件包设置
• 依赖项和 CSS 导入
• Skeleton 基本实现
• Angular 19+ 独立架构
• 使用 Skeleton 运行应用

形状和布局设计

📄 阅读： references/skeleton-shapes.md

• 用于头像和个人资料图片的圆形
• 用于缩略图和图标的正方形
• 用于图像和卡片的矩形
• 用于段落和内容的文本形状
• 组合形状以构建完整布局
• 响应式尺寸和响应式设计

闪烁效果和动画

📄 阅读： references/skeleton-shimmer-effects.md

• 波浪效果（默认动画）
• 脉冲效果（淡入/淡出动画）
• 淡化效果（透明度变化动画）
• 动态切换效果
• 多个 Skeleton 的性能注意事项

样式和自定义

📄 阅读： references/skeleton-styles-customization.md

• 使用 cssClass 自定义样式
• 自定义波浪/背景颜色
• 设置宽度和高度尺寸
• 使用 visible 属性控制可见性
• 用于主题设置的 CSS 变量
• 与 Theme Studio 集成

无障碍功能

📄 阅读： references/skeleton-accessibility.md

• 符合 WCAG 2.2 和 Section 508 标准
• 屏幕阅读器支持和实时区域
• WAI-ARIA 属性（role、aria-label、aria-live、aria-busy）
• 从右向左（RTL）支持
• 键盘导航和焦点管理
• 颜色对比度要求
• 无障碍验证工具

API 参考

📄 阅读： references/skeleton-api.md

• 所有属性的说明和默认值
• 方法和生命周期管理
• 事件处理模式
• 类型定义（SkeletonType、ShimmerEffect）
• 属性用法示例
• 完整的 API 文档

---

快速入门

import { Component } from '@angular/core';
import { SkeletonModule } from '@syncfusion/ej2-angular-notifications';

@Component({
  imports: [SkeletonModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div>
      <h2>Loading User Profile...</h2>
      
      <ejs-skeleton shape="Circle" width="60px"></ejs-skeleton>
      
      
      <ejs-skeleton width="30%" height="15px"></ejs-skeleton>
      <ejs-skeleton width="50%" height="15px"></ejs-skeleton>
      
      
      <ejs-skeleton shape="Rectangle" width="100%" height="150px"></ejs-skeleton>
    </div>
  `
})
export class AppComponent {}

---

常见模式

模式 1：卡片加载 Skeleton

在数据加载期间，显示与卡片组件布局相匹配的 Skeleton：

@Component({
  selector: 'app-card-skeleton',
  template: `
    <div class='card-skeleton'>
      
      <div class='avatar-section'>
        <ejs-skeleton shape="Circle" width="50px"></ejs-skeleton>
      </div>
      
      <div class='content-section'>
        <ejs-skeleton width="60%" height="12px"></ejs-skeleton>
        <ejs-skeleton width="40%" height="12px"></ejs-skeleton>
        <ejs-skeleton width="100%" height="80px"></ejs-skeleton>
      </div>
      
      <div class='action-section'>
        <ejs-skeleton shape="Rectangle" width="30%" height="36px"></ejs-skeleton>
      </div>
    </div>
  `
})
export class CardSkeletonComponent {}

模式 2：使用脉冲效果加载列表

显示多个带有脉动闪烁效果的 Skeleton 行：

@Component({
  selector: 'app-list-skeleton',
  template: `
    <div class='list-skeleton'>
      <div class='list-item' *ngFor="let item of [1,2,3,4,5]">
        <ejs-skeleton shape="Circle" width="40px" shimmerEffect="Pulse"></ejs-skeleton>
        <div class='item-content'>
          <ejs-skeleton width="50%" height="14px" shimmerEffect="Pulse"></ejs-skeleton>
          <ejs-skeleton width="30%" height="12px" shimmerEffect="Pulse"></ejs-skeleton>
        </div>
      </div>
    </div>
  `
})
export class ListSkeletonComponent {}

模式 3：条件渲染 Skeleton

加载时显示 Skeleton，内容就绪后隐藏：

@Component({
  selector: 'app-conditional-skeleton',
  template: `
    
    <div *ngIf="isLoading">
      <ejs-skeleton shape="Rectangle" width="100%" height="200px" 
                    shimmerEffect="Wave"></ejs-skeleton>
    </div>
    
    <div *ngIf="!isLoading">
      <img [src]="imageUrl" alt="Loaded content">
    </div>
  `
})
export class ConditionalSkeletonComponent {
  isLoading = true;
  imageUrl = '';
  
  ngOnInit() {
    // Simulate loading
    setTimeout(() => {
      this.isLoading = false;
      this.imageUrl = 'assets/image.jpg';
    }, 2000);
  }
}

---

主要属性

属性	类型	默认值	用途
shape	SkeletonType	'Text'	定义骨架屏形状：Text、Circle、Square、Rectangle
shimmerEffect	ShimmerEffect	'Wave'	动画效果：Wave、Pulse、Fade
width	string | number	''	骨架屏宽度（Circle/Square 必填）
height	string | number	''	骨架屏高度
visible	boolean	true	控制骨架屏的可见性
cssClass	string	''	用于样式设置的自定义 CSS 类
label	string	'Loading…'	用于无障碍访问的 Aria-label
enableRtl	boolean	false	启用从右向左的布局
enablePersistence	boolean	false	在页面重新加载时保留状态

常见用例

1. 数据网格加载：网格数据从服务器加载时显示骨架行
2. 图片库：图片下载时显示占位矩形
3. 信息流/时间线：加载信息流项目时显示多个骨架卡片
4. 个人资料页：组合不同形状以预览个人资料布局
5. 带头像的列表：使用 Circle 和 Text 形状显示用户列表
6. 模态框内容：异步操作期间在对话框中显示骨架屏
7. 产品卡片：构建与产品卡片布局匹配的骨架屏
8. 仪表板：为仪表板小组件创建骨架屏布局

Toast

Syncfusion Angular Toast（ejs-toast）是一个非阻塞通知组件，可在屏幕上的指定位置显示简短消息。Toast 会在可配置的超时后自动关闭，并支持通过模板、操作按钮、图标和进度条展示丰富内容。

导航指南

入门

📄 阅读： references/getting-started.md

• 前置条件和依赖项
• 安装 @syncfusion/ej2-angular-notifications
• 添加 CSS/主题导入
• 基本 Toast 设置（独立组件 + NgModule）
• 在组件创建时显示 Toast
• 运行应用程序

配置

📄 阅读： references/configuration.md

• 标题和内容属性
• 自定义目标容器
• 显示/隐藏关闭按钮（showCloseButton）
• 进度条（showProgressBar、progressDirection）
• 最新消息置顶（newestOnTop）
• 自定义宽度和高度
• 使用 icon 属性设置图标
• 用于语义类型的 cssClass（e-success、e-info、e-warning、e-danger）
• enableHtmlSanitizer、enableRtl、locale

位置和动画

📄 阅读： references/position-and-animation.md

• 预定义的 X/Y 位置（Left、Center、Right / Top、Bottom）
• 自定义像素/百分比位置
• 在不同位置显示多个 Toast
• 动画配置（show/hide 效果、持续时间、缓动）
• 默认动画（FadeIn/FadeOut）

模板和操作按钮

📄 阅读： references/template-and-buttons.md

• HTML 字符串和元素 ID 模板
• 使用 #template、#title、#content 的 Angular ng-template
• 通过 show() 方法参数指定动态模板
• 使用 buttons 属性和点击处理程序添加操作按钮
• ButtonModelPropsModel 配置

超时和事件

📄 阅读： references/timeout-and-events.md

• timeOut 属性（默认值为 5000ms）
• 悬停时的 extendedTimeout（默认值为 1000ms）
• 静态 Toast（timeOut: 0）
• 所有事件：created、open、close、click、beforeOpen、beforeClose、beforeSanitizeHtml、destroyed
• 事件参数类型和取消模式

Toast 工具服务

📄 阅读： references/toast-utility.md

• 使用 ToastUtility.show() 创建精简代码的 Toast
• 预定义类型：Information、Success、Error、Warning
• 使用完整的 ToastModel 参数设置事件和位置
• 何时使用工具服务而非组件方式

操作指南

📄 阅读： references/how-to.md

• 点击或轻触时关闭提示框
• 防止重复提示框
• 限制同时显示的提示框数量
• 添加动态模板
• 在提示框中渲染 Angular ng-template
• 在不同位置显示多个提示框
• 自定义进度条主题和尺寸
• 提示框打开前播放音频
• 防止通过移动端滑动关闭提示框
• 显示不同类型的提示框

API 参考

📄 阅读： references/api.md

• 所有属性及其类型和默认值
• 方法：show()、hide()、destroy()
• 所有事件及其参数类型链接
• ToastAnimationSettingsModel、ToastPositionModel、ButtonModelPropsModel

---

快速开始

// app.ts (Angular standalone)
import { Component, ViewChild } from '@angular/core';
import { ToastModule } from '@syncfusion/ej2-angular-notifications';

@Component({
  imports: [ToastModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <ejs-toast #toast (created)="onCreated()">
      <ng-template #title><div>Notification</div></ng-template>
      <ng-template #content><div>Your action was successful.</div></ng-template>
    </ejs-toast>
    <button (click)="toast.show()">Show Toast</button>
  `
})
export class App {
  @ViewChild('toast') toast: any;
  onCreated() { this.toast.show(); }
}

安装：

ng add @syncfusion/ej2-angular-notifications

CSS（styles.css）：

@import '@syncfusion/ej2-base/styles/material3.css';
@import '@syncfusion/ej2-buttons/styles/material3.css';
@import '@syncfusion/ej2-popups/styles/material3.css';
@import '@syncfusion/ej2-angular-notifications/styles/material3.css';

---

常见模式

成功/错误/警告/信息提示框

// Using cssClass for semantic coloring
toastObj.show({ content: 'File saved!', cssClass: 'e-toast-success' });
toastObj.show({ content: 'Upload failed.', cssClass: 'e-toast-danger' });
toastObj.show({ content: 'Low disk space.', cssClass: 'e-toast-warning' });
toastObj.show({ content: 'Update available.', cssClass: 'e-toast-info' });

使用 ToastUtility 快速显示提示框

import { ToastUtility } from '@syncfusion/ej2-angular-notifications';
ToastUtility.show('Operation successful', 'Success', 3000);

带进度条和关闭按钮的提示框

<ejs-toast [showProgressBar]="true" [showCloseButton]="true" [timeOut]="4000">
</ejs-toast>

在底部居中位置显示提示框

public position = { X: 'Center', Y: 'Bottom' };

<ejs-toast [position]="position"></ejs-toast>

操作按钮

public buttons = [
  { model: { content: 'Undo' }, click: () => this.onUndo() },
  { model: { content: 'Dismiss' } }
];

静态提示框（不自动关闭）

<ejs-toast [timeOut]="0" [showCloseButton]="true"></ejs-toast>

---

关键属性

属性	类型	默认值	用途
title	any	null	提示框标题文本或 HTML
content	any	null	提示框正文文本或 HTML
timeOut	number	5000	在指定毫秒数后自动关闭（0 = 静态）
position	ToastPositionModel	{X:'Left',Y:'Top'}	屏幕位置
showCloseButton	boolean	false	显示 × 关闭按钮
showProgressBar	boolean	false	显示倒计时进度条
progressDirection	string	'Rtl'	进度条方向（Ltr/Rtl）
newestOnTop	boolean	true	将新提示框插入到旧提示框之前
cssClass	string	null	自定义 CSS 类
icon	string	null	左上角图标的 CSS 类
target	string/Element	null	容器元素（默认：body）
width	string/number	'300'	提示框宽度
height	string/number	'auto'	提示框高度
buttons	ButtonModelPropsModel[]	[{}]	操作按钮
animation	ToastAnimationSettingsModel	FadeIn/FadeOut	显示/隐藏动画
extendedTimeout	number	1000	悬停时延长的显示时间
enableRtl	boolean	false	从右向左渲染

---

常见用例

场景	处理方式
简单的单行通知	使用 ToastUtility.show()
带类型的通知（成功/错误）	使用 cssClass: 'e-toast-success' 或 ToastUtility.show(..., 'Success', ...)
需要用户操作的通知	添加包含点击处理程序的 buttons 数组
关闭前持续显示的警告	设置 timeOut: 0 + showCloseButton: true
同时显示多个提示框	使用具有不同 target 容器的独立 ejs-toast 实例
在自定义容器中显示通知	将 target 属性设置为元素引用或选择器
防止重复消息	如果相同标题已显示，则在 beforeOpen 事件中取消
适配移动端（禁止滑动关闭）	当 args.type === 'swipe' 时取消 beforeClose
进度指示器	设置 showProgressBar: true，并通过 beforeOpen 事件自定义

徽章

Syncfusion Angular Badge 是纯 CSS 组件，无需导入 Angular 组件类。通过向嵌套在目标 UI 元素中的 <span>（或 <a>）元素添加 CSS 修饰类来应用徽章。

软件包： @syncfusion/ej2-angular-notifications

主要功能

• 8 种颜色变体——primary、secondary、success、danger、warning、info、light、dark
• 形状类型——圆形、胶囊、链接、通知、圆点、重叠
• 定位——在父元素上置于顶部（默认）或底部
• 自定义——通过 CSS 自定义颜色、尺寸和任意位置
• 与 ListView 集成——在列表项中嵌入徽章，并显示动态内容

导航指南

入门指南

📄 阅读： references/getting-started.md

• 安装软件包并导入 CSS
• 在 Angular 组件中添加第一个徽章
• 最简可运行示例
• 运行应用程序

徽章类型和形状

📄 阅读： references/types-and-shapes.md

• 8 种预定义颜色变体及其语义用途
• 圆形、药丸形、链接、通知、圆点和重叠形状类型
• 徽章定位（顶部或底部）
• 何时组合使用修饰类（例如，重叠 + 通知 + 圆形）

自定义

📄 阅读： references/customization.md

• 使用 CSS 类覆盖自定义颜色
• 通过 font-size 调整徽章大小
• 使用 CSS 覆盖自定义位置（左上、左下）
• 何时使用自定义 CSS，何时使用内置修饰类

操作指南

📄 阅读： references/how-to.md

• 将徽章集成到 ListView 组件中
• 动态更新徽章内容（递增计数）
• 使用 DOM 更新管理徽章状态的 Angular 模式

快速开始

1. 安装软件包：

npm install @syncfusion/ej2-angular-notifications --save

2. 将 CSS 添加到 src/styles.css：

@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-notifications/styles/tailwind3.css";

3. 在组件中添加徽章：

<h1>Badge Component <span class="e-badge e-badge-primary">New</span></h1>

常见模式

图标上的通知徽章

<div class="badge-block">
  <div class="skype svg_icons"></div>
  <span class="e-badge e-badge-success e-badge-overlap e-badge-notification">99+</span>
</div>

圆点状态指示器（底部位置）

<div class="badge-block">
  <div class="firefox svg_icons"></div>
  <span class="e-badge e-badge-success e-badge-overlap e-badge-dot e-badge-bottom"></span>
</div>

药丸形标签

<h1>Messages <span class="e-badge e-badge-primary e-badge-pill">New</span></h1>

CSS 类参考

类	用途
e-badge	所有徽章必需的基础类
e-badge-primary / e-badge-{color}	颜色变体
e-badge-pill	药丸形（圆角矩形）
e-badge-circle	圆形
e-badge-notification	通知计数徽章
e-badge-dot	极简圆点徽章（无文字）
e-badge-overlap	与父元素边缘重叠
e-badge-bottom	将徽章定位在底部而非顶部