syncfusion-angular-notifications

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion Angular Notifications

Syncfusion Angular通知组件实现指南

Message

The Syncfusion Angular Message component (

ejs-message

) displays contextual messages with severity-based icons and colors to communicate importance to the user. It supports multiple severity types, visual variants, close icon, custom templates, content alignment, CSS customization, and full accessibility compliance.

Package:

@syncfusion/ej2-angular-notifications

Module:

MessageModule

Selector:

ejs-message

📋 All files linked under
references/
are read-only documentation and comply with the same security policy as this skill.

Syncfusion Angular Message组件（

ejs-message

）可显示带有基于严重级别的图标和颜色的上下文消息，向用户传达信息的重要性。它支持多种严重级别类型、视觉变体、关闭图标、自定义模板、内容对齐、CSS自定义，并完全符合无障碍访问标准。

包：

@syncfusion/ej2-angular-notifications

模块：

MessageModule

选择器：

ejs-message

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

Navigation Guide

导航指南

Getting Started

快速入门

📄 Read: references/message-getting-started.md

Installing

@syncfusion/ej2-angular-notifications

via

ng add

CSS/SCSS theme imports (Material3)
```
MessageModule
```
import in standalone component
Minimal
```
ejs-message
```
template setup
Running the application

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

通过

ng add

安装

@syncfusion/ej2-angular-notifications

CSS/SCSS主题导入（Material3）
在独立组件中导入
```
MessageModule
```
最简
```
ejs-message
```
模板设置
运行应用

Severity Types

严重级别类型

📄 Read: references/message-severities.md

```
severity
```
property with all five values: Normal, Success, Info, Warning, Error
Default severity (Normal)
When to choose each severity type
Code example with all severities

📄 阅读： references/message-severities.md

```
severity
```
属性的五个取值：Normal、Success、Info、Warning、Error
默认严重级别（Normal）
各严重级别的适用场景
包含所有严重级别的代码示例

Visual Variants

视觉变体

📄 Read: references/message-variants.md

```
variant
```
property: Text, Outlined, Filled
Default variant (Text)
Combining variant with severity
Full example showing all combinations

📄 阅读： references/message-variants.md

```
variant
```
属性：Text、Outlined、Filled
默认变体（Text）
变体与严重级别的组合
展示所有组合的完整示例

Icons and Close Icon

图标与关闭图标

📄 Read: references/message-icons.md

```
showIcon
```
— hide/show the severity icon
```
showCloseIcon
```
— add a close icon to dismiss messages
```
(closed)
```
event — react when user closes a message
Restoring visibility with
```
visible
```
property
Custom icon using
```
cssClass
```

📄 阅读： references/message-icons.md

```
showIcon
```
— 显示/隐藏严重级别图标
```
showCloseIcon
```
— 添加关闭图标以关闭消息
```
(closed)
```
事件 — 用户关闭消息时触发响应
使用
```
visible
```
属性恢复可见性
通过
```
cssClass
```
自定义图标

Customization and Templates

自定义与模板

📄 Read: references/message-customization.md

Content alignment: left (default), center (
```
e-content-center
```
), right (
```
e-content-right
```
)
Rounded and square border styles via
```
cssClass
```
CSS-only message rendering (no script reference)
Predefined CSS classes for manual DOM structure
Rich HTML template via
```
<ng-template #content>
```

📄 阅读： references/message-customization.md

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

Accessibility

无障碍访问

📄 Read: references/message-accessibility.md

WCAG 2.2 / Section 508 compliance
WAI-ARIA attributes (
```
role=alert
```
,
```
aria-label
```
)
Keyboard interaction (Tab, Enter/Space for close icon)
RTL support via
```
enableRtl
```
Screen reader behavior

📄 阅读： references/message-accessibility.md

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

API Reference

API参考

📄 Read: references/message-api.md

All properties:

content

cssClass

enablePersistence

enableRtl

locale

severity

showCloseIcon

showIcon

variant

visible

Methods:
```
destroy()
```
,
```
getPersistData()
```
Events:
```
closed
```
,
```
created
```
,
```
destroyed
```

📄 阅读： references/message-api.md

所有属性：

content

、

cssClass

、

enablePersistence

、

enableRtl

、

locale

、

severity

、

showCloseIcon

、

showIcon

、

variant

、

visible

方法：
```
destroy()
```
、
```
getPersistData()
```
事件：
```
closed
```
、
```
created
```
、
```
destroyed
```

Quick Start

快速开始

bash

ng add @syncfusion/ej2-angular-notifications

css

/* 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';

typescript

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 { }

bash

ng add @syncfusion/ej2-angular-notifications

css

/* styles.css – 由ng add自动添加 */
/* 注意：这些仅为消费者端样式表引用；本技能不会安装或执行任何包。 */
@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-angular-notifications/styles/message/material3.css';

typescript

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 { }

Common Patterns

常见模式

Message with Severity

带严重级别的消息

typescript

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 { }

typescript

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 { }

Dismissable Message with Close Icon

可关闭的消息（带关闭图标）

typescript

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;
  }
}

typescript

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 Variant with Severity

带严重级别的填充变体

typescript

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 { }

typescript

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 { }

Key Props at a Glance

关键属性一览

Property	Type	Default	Purpose
`content`	`string \| object`	`null`	Text, HTML, or template content to display
`severity`	`string`	`'Normal'`	Severity type: Normal, Success, Info, Warning, Error
`variant`	`string`	`'Text'`	Visual style: Text, Outlined, Filled
`showIcon`	`boolean`	`true`	Show/hide the severity icon
`showCloseIcon`	`boolean`	`false`	Show/hide the close icon
`visible`	`boolean`	`true`	Show or hide the entire message
`cssClass`	`string`	`''`	Custom CSS class(es) appended to root element
`enableRtl`	`boolean`	`false`	Right-to-left rendering
`enablePersistence`	`boolean`	`false`	Persist component state across page reloads
`locale`	`string`	`''`	Override global culture/localization

属性	类型	默认值	用途
`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

The Skeleton component provides a visual placeholder for content that is loading or yet to be rendered. It helps improve perceived performance by showing users what content is coming, reducing cognitive load during loading states.

Package:

@syncfusion/ej2-angular-notifications

Module:

SkeletonModule

Selector:

ejs-skeleton

Skeleton组件为正在加载或尚未渲染的内容提供视觉占位符。它通过向用户展示即将加载的内容形态，减少加载过程中的认知负担，提升感知性能。

包：

@syncfusion/ej2-angular-notifications

模块：

SkeletonModule

选择器：

ejs-skeleton

When to Use This Skill

适用场景

Loading placeholders: Display skeleton layouts while fetching data from APIs
Shimmer animations: Add Wave, Pulse, or Fade effects to loading states
Multiple shapes: Build complex layouts using Circle, Square, Rectangle, and Text shapes
Accessibility: Ensure loading states are accessible with ARIA attributes and screen reader support
Custom styling: Apply custom CSS classes and themes to match your design system
Conditional rendering: Show/hide skeletons based on data loading states
RTL support: Implement right-to-left layouts with the Skeleton component

📋 All files linked under
references/
are read-only documentation and comply with the same security policy as this skill.

加载占位符：从API获取数据时显示骨架布局
微光动画：为加载状态添加Wave、Pulse或Fade效果
多种形状：使用圆形、方形、矩形和文本形状构建复杂布局
无障碍访问：确保加载状态通过ARIA属性和屏幕阅读器支持无障碍访问
自定义样式：应用自定义CSS类和主题以匹配设计系统
条件渲染：根据数据加载状态显示/隐藏骨架
RTL支持：为Skeleton组件实现从右到左布局

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

Navigation Guide

导航指南

Getting Started

快速入门

📄 Read: references/skeleton-getting-started.md

Installation and package setup
Dependencies and CSS imports
Basic skeleton implementation
Angular 19+ standalone architecture
Running your application with Skeleton

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

安装与包设置
依赖项与CSS导入
基础骨架实现
Angular 19+独立架构
运行包含Skeleton的应用

Shapes and Layout Design

形状与布局设计

📄 Read: references/skeleton-shapes.md

Circle shapes for avatars and profile pictures
Square shapes for thumbnails and icons
Rectangle shapes for images and cards
Text shapes for paragraphs and content
Combining shapes to build complete layouts
Responsive sizing and responsive design

📄 阅读： references/skeleton-shapes.md

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

Shimmer Effects and Animation

微光效果与动画

📄 Read: references/skeleton-shimmer-effects.md

Wave effect (default animation)
Pulse effect (fade in/out animation)
Fade effect (opacity change animation)
Changing effects dynamically
Performance considerations for multiple skeletons

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

Wave效果（默认动画）
Pulse效果（淡入淡出动画）
Fade效果（透明度变化动画）
动态切换效果
多骨架组件的性能考量

Styling and Customization

样式与自定义

📄 Read: references/skeleton-styles-customization.md

Using cssClass for custom styling
Customizing wave/background colors
Setting width and height dimensions
Controlling visibility with the visible property
CSS variables for theming
Theme Studio integration

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

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

Accessibility Features

无障碍访问特性

📄 Read: references/skeleton-accessibility.md

WCAG 2.2 and Section 508 compliance
Screen reader support and live regions
WAI-ARIA attributes (role, aria-label, aria-live, aria-busy)
Right-to-Left (RTL) support
Keyboard navigation and focus management
Color contrast requirements
Accessibility validation tools

📄 阅读： references/skeleton-accessibility.md

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

API Reference

API参考

📄 Read: references/skeleton-api.md

All properties with descriptions and defaults
Methods and lifecycle management
Event handling patterns
Type definitions (SkeletonType, ShimmerEffect)
Property usage examples
Complete API documentation

📄 阅读： references/skeleton-api.md

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

Quick Start

快速开始

typescript

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>
      <!-- Avatar skeleton -->
      <ejs-skeleton shape="Circle" width="60px"></ejs-skeleton>
      
      <!-- Name and description skeletons -->
      <ejs-skeleton width="30%" height="15px"></ejs-skeleton>
      <ejs-skeleton width="50%" height="15px"></ejs-skeleton>
      
      <!-- Content skeleton -->
      <ejs-skeleton shape="Rectangle" width="100%" height="150px"></ejs-skeleton>
    </div>
  `
})
export class AppComponent {}

typescript

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 {}

Common Patterns

常见模式

Pattern 1: Card Loading Skeleton

模式1：卡片加载骨架

Display a skeleton layout matching a card component during data loading:

typescript

@Component({
  selector: 'app-card-skeleton',
  template: `
    <div class='card-skeleton'>
      <!-- Avatar -->
      <div class='avatar-section'>
        <ejs-skeleton shape="Circle" width="50px"></ejs-skeleton>
      </div>
      <!-- Content -->
      <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>
      <!-- Actions -->
      <div class='action-section'>
        <ejs-skeleton shape="Rectangle" width="30%" height="36px"></ejs-skeleton>
      </div>
    </div>
  `
})
export class CardSkeletonComponent {}

数据加载期间显示与卡片组件匹配的骨架布局：

typescript

@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 {}

Pattern 2: List Loading with Pulse Effect

模式2：带脉冲效果的列表加载

Show multiple skeleton rows with a pulsing shimmer effect:

typescript

@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 {}

显示多个带有脉冲微光效果的骨架行：

typescript

@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 {}

Pattern 3: Conditional Skeleton Rendering

模式3：条件骨架渲染

Show skeleton while loading, hide when content is ready:

typescript

@Component({
  selector: 'app-conditional-skeleton',
  template: `
    <!-- Show skeleton while loading -->
    <div *ngIf="isLoading">
      <ejs-skeleton shape="Rectangle" width="100%" height="200px" 
                    shimmerEffect="Wave"></ejs-skeleton>
    </div>
    <!-- Show content when loaded -->
    <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);
  }
}

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

typescript

@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() {
    // 模拟加载
    setTimeout(() => {
      this.isLoading = false;
      this.imageUrl = 'assets/image.jpg';
    }, 2000);
  }
}

Key Properties

关键属性

Property	Type	Default	Purpose
`shape`	SkeletonType	'Text'	Defines skeleton shape: Text, Circle, Square, Rectangle
`shimmerEffect`	ShimmerEffect	'Wave'	Animation effect: Wave, Pulse, Fade
`width`	string \| number	''	Skeleton width (required for Circle/Square)
`height`	string \| number	''	Skeleton height
`visible`	boolean	true	Controls skeleton visibility
`cssClass`	string	''	Custom CSS class for styling
`label`	string	'Loading…'	Aria-label for accessibility
`enableRtl`	boolean	false	Enable right-to-left layout
`enablePersistence`	boolean	false	Persist state between page reloads

属性	类型	默认值	用途
`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标签
`enableRtl`	boolean	false	启用从右到左布局
`enablePersistence`	boolean	false	页面刷新后保留状态

Common Use Cases

常见使用场景

Data Grid Loading: Show skeleton rows while grid data is loading from server
Image Gallery: Display placeholder rectangles while images download
Feed/Timeline: Show multiple skeleton cards while loading feed items
Profile Page: Combine shapes to preview profile layout
List with Avatars: Use Circle + Text shapes for user lists
Modal Content: Display skeleton inside dialogs during async operations
Product Cards: Build skeleton matching product card layout
Dashboard: Create skeleton layouts for dashboard widgets

数据网格加载：从服务器加载网格数据时显示骨架行
图片画廊：图片下载期间显示占位矩形
动态流/时间线：加载动态流内容时显示多个骨架卡片
个人资料页面：组合形状预览个人资料布局
带头像的列表：使用Circle + Text形状构建用户列表
模态框内容：异步操作期间在对话框内显示骨架
产品卡片：构建与产品卡片匹配的骨架
仪表盘：为仪表盘小部件创建骨架布局

Toast

The Syncfusion Angular Toast (

ejs-toast

) is a non-blocking notification component that displays brief messages at a defined position on the screen. Toasts auto-dismiss after a configurable timeout and support rich content via templates, action buttons, icons, and progress bars.

Syncfusion Angular Toast组件（

ejs-toast

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

Navigation Guide

导航指南

Getting Started

快速入门

📄 Read: references/getting-started.md

Prerequisites and dependencies
Installing
```
@syncfusion/ej2-angular-notifications
```
Adding CSS/theme imports
Basic toast setup (standalone + NgModule)
Showing a toast on component creation
Running the application

📄 阅读： references/getting-started.md

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

Configuration

配置

📄 Read: references/configuration.md

Title and content properties
Custom target container
Show/hide close button (
```
showCloseButton
```
)
Progress bar (
```
showProgressBar
```
,
```
progressDirection
```
)
Newest on top (
```
newestOnTop
```
)
Width and height customization
Icon using
```
icon
```
property
```
cssClass
```
for semantic types (e-success, e-info, e-warning, e-danger)
```
enableHtmlSanitizer
```
,
```
enableRtl
```
,
```
locale
```

📄 阅读： references/configuration.md

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

Position and Animation

位置与动画

📄 Read: references/position-and-animation.md

Predefined X/Y positions (Left, Center, Right / Top, Bottom)
Custom pixel/percentage positions
Multiple toasts in different positions
Animation configuration (
```
show
```
/
```
hide
```
effects, duration, easing)
Default animation (FadeIn/FadeOut)

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

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

Templates and Action Buttons

模板与操作按钮

📄 Read: references/template-and-buttons.md

HTML string and element ID templates
Angular
```
ng-template
```
with
```
#template
```
,
```
#title
```
,
```
#content
```
Dynamic templates via
```
show()
```
method arguments
Action buttons with
```
buttons
```
property and click handlers
```
ButtonModelPropsModel
```
configuration

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

HTML字符串和元素ID模板
带
```
#template
```
、
```
#title
```
、
```
#content
```
的Angular
```
ng-template
```
通过
```
show()
```
方法参数实现动态模板
带
```
buttons
```
属性和点击处理函数的操作按钮
```
ButtonModelPropsModel
```
配置

Timeout and Events

超时与事件

📄 Read: references/timeout-and-events.md

```
timeOut
```
property (default 5000ms)
```
extendedTimeout
```
on hover (default 1000ms)
Static toast (timeOut: 0)

All events:

created

open

close

click

beforeOpen

beforeClose

beforeSanitizeHtml

destroyed

Event argument types and cancellation patterns

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

```
timeOut
```
属性（默认5000ms）
悬停时的
```
extendedTimeout
```
（默认1000ms）
静态Toast（timeOut: 0）

所有事件：

created

、

open

、

close

、

click

、

beforeOpen

、

beforeClose

、

beforeSanitizeHtml

、

destroyed

事件参数类型与取消模式

Toast Utility Service

Toast工具服务

📄 Read: references/toast-utility.md

```
ToastUtility.show()
```
for minimal-code toasts
Predefined types: Information, Success, Error, Warning
Full
```
ToastModel
```
argument usage with events and positioning
When to use utility vs component approach

📄 阅读： references/toast-utility.md

使用
```
ToastUtility.show()
```
实现极简代码的Toast
预定义类型：Information、Success、Error、Warning
结合事件和定位的完整
```
ToastModel
```
参数用法
工具类与组件方式的适用场景

How-To Guides

操作指南

📄 Read: references/how-to.md

Close toast on click/tap
Prevent duplicate toasts
Restrict maximum visible toasts
Add dynamic templates
Render Angular
```
ng-template
```
in toast
Show multiple toasts in various positions
Customize progress bar theme and sizing
Play audio before toast opens
Prevent toast close with mobile swipe
Show different types of toast

📄 阅读： references/how-to.md

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

API Reference

API参考

📄 Read: references/api.md

All properties with types and defaults
Methods:
```
show()
```
,
```
hide()
```
,
```
destroy()
```
All events with argument type links

ToastAnimationSettingsModel

ToastPositionModel

ButtonModelPropsModel

📄 阅读： references/api.md

所有属性的类型与默认值
方法：
```
show()
```
、
```
hide()
```
、
```
destroy()
```
所有事件的参数类型链接

ToastAnimationSettingsModel

、

ToastPositionModel

、

ButtonModelPropsModel

Quick Start

快速开始

typescript

// 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(); }
}

Install:

bash

ng add @syncfusion/ej2-angular-notifications

CSS (styles.css):

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';

typescript

// app.ts (Angular独立组件)
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(); }
}

安装：

bash

ng add @syncfusion/ej2-angular-notifications

CSS (styles.css):

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';

Common Patterns

常见模式

Success/Error/Warning/Info Toast

成功/错误/警告/信息Toast

typescript

// 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' });

typescript

// 使用cssClass实现语义化颜色
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' });

Quick Toast via ToastUtility

通过ToastUtility快速创建Toast

typescript

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

typescript

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

Toast with Progress Bar + Close Button

带进度条+关闭按钮的Toast

html

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

html

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

Toast Positioned Bottom-Center

底部居中的Toast

typescript

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

html

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

typescript

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

html

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

Action Buttons

操作按钮

typescript

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

typescript

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

Static Toast (no auto-dismiss)

静态Toast（不自动关闭）

html

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

html

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

Key Properties

关键属性

Property	Type	Default	Purpose
`title`	any	null	Toast heading text or HTML
`content`	any	null	Toast body text or HTML
`timeOut`	number	5000	Auto-dismiss after ms (0 = static)
`position`	ToastPositionModel	{X:'Left',Y:'Top'}	Screen position
`showCloseButton`	boolean	false	Show × dismiss button
`showProgressBar`	boolean	false	Show countdown progress bar
`progressDirection`	string	'Rtl'	Progress bar direction (Ltr/Rtl)
`newestOnTop`	boolean	true	Insert new toasts before old ones
`cssClass`	string	null	Custom CSS classes
`icon`	string	null	CSS class for top-left icon
`target`	string/Element	null	Container element (default: body)
`width`	string/number	'300'	Toast width
`height`	string/number	'auto'	Toast height
`buttons`	ButtonModelPropsModel[]	[{}]	Action buttons
`animation`	ToastAnimationSettingsModel	FadeIn/FadeOut	Show/hide animation
`extendedTimeout`	number	1000	Extra time on hover
`enableRtl`	boolean	false	Right-to-left rendering

属性	类型	默认值	用途
`title`	any	null	Toast标题文本或HTML
`content`	any	null	Toast主体文本或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	新Toast插入到旧Toast之前
`cssClass`	string	null	自定义CSS类
`icon`	string	null	左上角图标对应的CSS类
`target`	string/Element	null	容器元素（默认：body）
`width`	string/number	'300'	Toast宽度
`height`	string/number	'auto'	Toast高度
`buttons`	ButtonModelPropsModel[]	[{}]	操作按钮
`animation`	ToastAnimationSettingsModel	FadeIn/FadeOut	显示/隐藏动画
`extendedTimeout`	number	1000	悬停时的额外停留时间
`enableRtl`	boolean	false	启用从右到左渲染

Common Use Cases

常见使用场景

Scenario	Approach
Simple one-liner notification	Use `ToastUtility.show()`
Typed notification (success/error)	`cssClass: 'e-toast-success'` or `ToastUtility.show(..., 'Success', ...)`
Notification requiring user action	Add `buttons` array with click handlers
Persistent alert until dismissed	Set `timeOut: 0` + `showCloseButton: true`
Multiple simultaneous toasts	Use separate `ejs-toast` instances with different `target` containers
Notification in custom container	Set `target` property to element reference or selector
Prevent duplicate messages	Cancel in `beforeOpen` event if same title already visible
Mobile-friendly (no swipe dismiss)	Cancel `beforeClose` when `args.type === 'swipe'`
Progress indicator	`showProgressBar: true` , customize via `beforeOpen` event

场景	实现方式
简单单行通知	使用 `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` 事件自定义