这是一份关于 Syncfusion Angular 通知类 UI 组件(Notifications)的实现指南技能,包名为 @syncfusion/ej2-angular-notifications,覆盖 Message、Skeleton、Toast、Badge 四个组件,并配套 references/ 只读文档(如 getting-started、api、accessibility、how-to 等)。
一、Message(选择器 ejs-message,模块 MessageModule) 用途:显示带严重级别图标和颜色的上下文消息,向用户传达信息重要程度。 主要能力:severity 属性支持 Normal、Success、Info、Warning、Error 五种级别,默认 Normal;variant 视觉样式支持 Text、Outlined、Filled,默认 Text;showIcon 控制是否显示严重级别图标;showCloseIcon 添加关闭图标,并通过 (closed) 事件响应关闭行为,可用 visible 属性恢复显示;支持 cssClass 自定义图标与样式,内容对齐(left 默认、e-content-center、e-content-right),圆角/方形边框,纯 CSS 渲染,以及通过 <ng-template #content> 提供富 HTML 模板。 使用方式:通过 ng add @syncfusion/ej2-angular-notifications 安装,在 styles.css 中引入 ej2-base 与 message 的 material3 主题;在独立组件中 import MessageModule,模板中写 <ejs-message content="..."></ejs-message>。 无障碍:符合 WCAG 2.2 / Section 508,具备 WAI-ARIA 属性(role=alert、aria-label)、键盘交互(Tab、Enter/Space 关闭)、enableRtl 的 RTL 支持与屏幕阅读器行为。 API:属性包括 content、cssClass、enablePersistence、enableRtl、locale、severity、showCloseIcon、showIcon、variant、visible;方法 destroy()、getPersistData();事件 closed、created、destroyed。
二、Skeleton(选择器 ejs-skeleton,模块 SkeletonModule) 用途:为正在加载或尚未渲染的内容提供视觉占位,提升感知性能并降低加载期间的认知负担。 主要能力:shape 支持 Text、Circle、Square、Rectangle,其中 Circle/Square 需要设置 width;shimmerEffect 支持 Wave(默认)、Pulse、Fade 并可动态切换;可用 cssClass 自定义样式、调整宽高、用 visible 控制可见性、通过 CSS 变量与 Theme Studio 主题化。 使用方式:引入 SkeletonModule 后,在模板中按布局组合多个 <ejs-skeleton>,例如头像用 Circle、姓名与描述用 Text、内容区用 Rectangle;也可结合 *ngIf 在加载时显示骨架、加载完成后渲染真实内容。 适用场景:数据网格加载行、图片画廊占位、信息流/时间线卡片、个人资料页布局预览、带头像列表、模态框内容、产品卡片、仪表盘部件骨架。 无障碍:符合 WCAG 2.2 / Section 508,支持屏幕阅读器与实时区域、WAI-ARIA(role、aria-label、aria-live、aria-busy)、RTL、键盘导航与焦点管理、色彩对比要求。 API:属性 shape(默认 Text)、shimmerEffect(默认 Wave)、width、height、visible、cssClass、label(默认 "Loading…")、enableRtl、enablePersistence;类型定义 SkeletonType、ShimmerEffect。
三、Toast(选择器 ejs-toast) 用途:非阻塞式通知组件,在屏幕指定位置显示简短消息,超时后自动消失。 主要能力:可配置 title 与 content;自定义目标容器;showCloseButton 显示关闭按钮;showProgressBar 与 progressDirection 进度条;newestOnTop 新消息置顶;宽高自定义;icon 图标;cssClass 语义类型(e-success、e-info、e-warning、e-danger);enableHtmlSanitizer、enableRtl、locale;位置支持预定义 X/Y(Left、Center、Right / Top、Bottom)及自定义像素或百分比,可在不同位置显示多个 Toast;动画可配置显示/隐藏效果、时长与缓动,默认 FadeIn/FadeOut;模板支持 HTML 字符串、元素 ID 以及 Angular ng-template(#template、#title、#content),并可通过 show() 参数动态传入;操作按钮通过 buttons 属性与点击处理配置(ButtonModelPropsModel)。 超时与事件:timeOut 默认 5000ms,悬停时 extendedTimeout 默认 1000ms,timeOut 为 0 时为静态 Toast 不自动关闭;事件包括 created、open、close、click、beforeOpen、beforeClose、beforeSanitizeHtml、destroyed,并有事件参数类型与取消模式。 工具服务:ToastUtility.show() 可用最少代码显示 Toast,预定义类型 Information、Success、Error、Warning,也支持完整 ToastModel 参数(含事件与定位)。 使用方式:ng add @syncfusion/ej2-angular-notifications 安装,styles.css 引入 ej2-base、ej2-buttons、ej2-popups 及 notifications 的 material3 主题;import ToastModule,模板中使用 <ejs-toast> 并通过 ViewChild 调用 show()。 How-To 指南涵盖:点击关闭、防止重复 Toast、限制最大可见数量、动态模板、渲染 ng-template、多位置显示、自定义进度条主题、打开前播放音频、移动端滑动关闭、显示不同类型等。 API:方法 show()、hide()、destroy();类型 ToastAnimationSettingsModel、ToastPositionModel、ButtonModelPropsModel。
四、Badge 资料中提及 Badge 属于本技能覆盖组件之一,但未提供其详细说明、安装或 API 内容,暂未提供。
限制与说明:所有 references/ 下链接为只读文档,且说明不安装或执行任何包;快速开始中的样式导入为使用方样式表引用。各组件的价格、授权平台等信息资料中未提供。