syncfusion-react-notifications

实现 Syncfusion React 通知

Toast

Syncfusion React Toast 组件可显示简短、不打扰用户的通知，并在可配置的超时时间后自动关闭。Toast 支持通过模板呈现丰富内容、添加操作按钮、设置进入／退出动画、精确定位，以及通过 ToastUtility 进行编程控制。

🛑 Agentic 使用： 不要自主执行多个步骤。每次操作（安装、运行、创建文件）前都要向用户确认。

软件包与设置

📄 阅读： references/getting-started.md

• 安装 @syncfusion/ej2-react-notifications 🛑 停止 — 不要自主安装软件包。请用户运行：npm install @syncfusion/[email protected] --save。使用 npm audit 验证
• 导入所有必需主题的 CSS
• 基本的 ToastComponent 用法（类组件和函数组件模式）
• 在自定义目标容器中渲染 Toast
• 在 created 事件中触发显示

文档与导航指南

配置与布局

📄 阅读： references/configuration.md

• 设置 title 和 content（纯文本、HTML、元素）
• 用于限定通知范围的自定义 target 容器
• 使用 showCloseButton 手动关闭
• showProgressBar 和 progressDirection（Ltr / Rtl）
• newestOnTop 堆叠顺序
• width 和 height 尺寸（px、%、auto）

定位

📄 阅读： references/position.md

• 九种预定义的 X/Y 位置（Left、Center、Right / Top、Bottom）
• 自定义像素和百分比坐标
• 指定容器元素以进行相对定位
• 在屏幕不同位置显示多个 Toast 实例

超时与关闭

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

• timeOut 属性（默认值为 5000 ms）
• 悬停时的 extendedTimeout（默认值为 1000 ms）
• 使用 timeOut: 0 显示静态持久 Toast
• 在 click 事件中通过 clickToClose 点击关闭
• 使用 beforeClose 阻止移动端滑动关闭

模板与样式

📄 阅读： references/templates-and-styling.md

• 使用 HTML 字符串和 DOM 选择器设置 template 属性
• 在调用 show() 时传入动态模板
• 语义化 CSS 类：e-toast-success、e-toast-info、e-toast-warning、e-toast-danger
• 用于自定义标题、内容、图标和背景的 CSS 选择器

动画

📄 阅读： references/animation.md

• 使用 show 和 hide 效果设置 animation 属性
• 可用效果：FadeIn、FadeZoomIn、SlideBottomIn、ZoomIn、FlipLeftUpIn 等
• 默认值：FadeIn / FadeOut
• 无障碍：减少动态效果的注意事项

Toast 服务与高级模式

📄 阅读： references/toast-services.md

• 使用 ToastUtility.show() 快速显示 Toast，无需实例化组件
• 四种预定义类型：Information、Success、Error、Warning
• 向 ToastUtility.show() 传入完整的 ToastModel
• 在 beforeOpen 时播放音频
• 使用 beforeOpen 限制同时显示的 Toast 数量
• 使用 beforeOpen + close 防止显示重复 Toast

无障碍

📄 阅读： references/accessibility.md

• WAI-ARIA：role="alert"、aria-live="assertive"、aria-label
• 符合 WCAG 2.2、Section 508、ADA 标准
• 支持屏幕阅读器（JAWS、NVDA、VoiceOver）
• 通过 enableRtl 支持 RTL
• 移动端与无障碍检查器验证

API 参考

📄 阅读： references/api.md

• 所有属性的类型、默认值和说明
• show() 和 hide() 方法签名
• 所有事件：beforeOpen、open、click、beforeClose、close、created、destroyed、beforeSanitizeHtml

快速入门示例

🛑 停止 — 请勿擅自启动开发服务器。设置完成后，请让用户运行：npm run dev。

import { ToastComponent } from '@syncfusion/ej2-react-notifications';
import '@syncfusion/ej2-base/styles/tailwind3.css';
import '@syncfusion/ej2-react-notifications/styles/tailwind3.css';
import { useRef } from 'react';

function App() {
  const toastRef = useRef<ToastComponent>(null);

  return (
    <>
      <button onClick={() => toastRef.current?.show()}>Show Toast</button>
      <ToastComponent
        ref={toastRef}
        title="Success!"
        content="Your changes have been saved."
        cssClass="e-toast-success"
        position={{ X: 'Right', Y: 'Bottom' }}
        timeOut={4000}
        showProgressBar={true}
        showCloseButton={true}
      />
    </>
  );
}

快速实用 Toast（无需组件）

import { ToastUtility } from '@syncfusion/ej2-react-notifications';

// Show a success toast instantly
ToastUtility.show('File saved successfully', 'Success', 3000);

// Show an error toast
ToastUtility.show('Connection failed', 'Error', 5000);

常见模式

语义类型 Toast

使用 cssClass 和 e-toast-success、e-toast-info、e-toast-warning、e-toast-danger 来区分视觉效果 — 请参阅 references/templates-and-styling.md。

静态／持久 Toast

将 timeOut: 0 与 showCloseButton: true 一起设置，用于用户必须明确关闭的通知 — 请参阅 references/timeout-and-dismissal.md。

需要执行操作的 Toast

使用 buttons 属性添加忽略／确认／撤销按钮 — 请参阅 references/configuration.md。

防止重复

使用 beforeOpen 事件取消屏幕上已显示的重复 Toast — 请参阅 references/toast-services.md。

限制最多可见的 Toast 数量

使用 beforeOpen 和 element.childElementCount 将同时显示的 Toast 数量限制为 N — 请参阅 references/toast-services.md。

消息

Syncfusion MessageComponent 会显示带有视觉严重性指示（图标和颜色）的上下文消息，向最终用户传达重要性和上下文。它支持五种严重性级别、三种视觉变体、关闭图标关闭、自定义模板，并完全符合无障碍标准。

🛑 Agent 使用须知： 请勿擅自执行多个步骤。每次操作（安装、运行、创建文件）前都必须先向用户确认。

导航指南

入门

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

• 安装 @syncfusion/ej2-react-notifications 🛑 停止 — 请勿擅自安装软件包。请让用户运行：npm install @syncfusion/[email protected] --save。使用 npm audit 验证
• CSS 导入和主题配置
• 渲染第一个 MessageComponent
• 通过 content 属性或 JSX 子元素设置内容
• 运行 Vite 开发服务器

严重性级别

📄 阅读： references/message-severities.md

• 五种严重性级别：普通、成功、信息、警告、错误
• severity 属性的用法和有效值
• 视觉差异（各严重性级别对应的图标和颜色）
• 根据使用场景选择合适的严重性级别

显示变体

📄 阅读： references/message-variants.md

• 三种变体：文本（默认）、轮廓、填充
• variant 属性的用法
• 组合使用变体与严重性
• 视觉取舍及各变体的适用场景

图标和关闭图标

📄 阅读： references/message-icons-and-close.md

• 严重性图标的显示：showIcon 属性（默认值为 true）
• 禁用严重性图标
• 通过 cssClass CSS 覆盖来自定义严重性图标
• 关闭图标：showCloseIcon 属性（默认值为 false）
• 用于关闭回调的 closed 事件处理程序
• 使用 visible 属性切换可见性

自定义和模板

📄 阅读： references/message-customization.md

• 内容对齐：左侧（默认）、居中（e-content-center）、右侧（e-content-right）
• 使用 cssClass 自定义外观
• 仅使用 CSS 渲染消息（无需 JS，纯 HTML + CSS）
• 内容模板：通过 content 属性设置 JSX 元素或渲染函数
• 通过 enableRtl 支持 RTL
• 使用 enablePersistence 持久化

无障碍

📄 阅读： references/message-accessibility.md

• 符合 WCAG 2.2、Section 508 和 ADA 标准
• WAI-ARIA 属性（role=alert、aria-label）
• 键盘导航（Tab、Enter／Space）
• 屏幕阅读器支持

API 参考

📄 阅读： references/message-api.md

• 所有属性及其类型、默认值和说明
• 方法：destroy、getPersistData
• 事件：closed、created、destroyed
• MessageCloseEventArgs 接口
• Severity 和 Variant 枚举值

---

快速入门

🛑 停止 — 请勿自行启动开发服务器。完成设置后，请让用户运行：npm run dev。

npm install @syncfusion/[email protected] --save
npm audit

/* src/App.css */
@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-react-notifications/styles/tailwind3.css';

import { MessageComponent } from '@syncfusion/ej2-react-notifications';
import './App.css';

function App() {
  return (
    <MessageComponent content="Please read the comments carefully" />
  );
}
export default App;

---

常见模式

严重性消息

<MessageComponent content="Editing is restricted" />
<MessageComponent content="Operation completed" severity="Success" />
<MessageComponent content="Read these notes" severity="Info" />
<MessageComponent content="Check your connection" severity="Warning" />
<MessageComponent content="Submission failed" severity="Error" />

Variant + 严重性组合

<MessageComponent content="Editing is restricted" variant="Filled" />
<MessageComponent content="Operation completed" severity="Success" variant="Outlined" />
<MessageComponent content="Submission failed" severity="Error" variant="Filled" />

可关闭消息

import { useState } from 'react';

function App() {
  const [visible, setVisible] = useState(true);
  return (
    <MessageComponent
      content="Your session will expire soon"
      severity="Warning"
      showCloseIcon={true}
      visible={visible}
      closed={() => setVisible(false)}
    />
  );
}

内容模板

const contentTemplate = () => (
  <div>
    <h4>Build succeeded</h4>
    <p>All 42 tests passed.</p>
  </div>
);

<MessageComponent content={contentTemplate} severity="Success" />

---

骨架屏

Syncfusion React SkeletonComponent 会渲染动画占位形状，模拟加载内容的布局。它通过可配置的形状、闪烁动画和全面的无障碍支持，降低用户感知到的加载时间，并向用户传达进度。

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

🛑 Agent 使用： 请勿自行执行多个步骤。每次操作（安装、运行、创建文件）前都要向用户确认。

---

导航指南

开始使用

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

• 安装 @syncfusion/ej2-react-notifications 🛑 停止 — 请勿自行安装软件包。请让用户运行：npm install @syncfusion/[email protected] --save。使用 npm audit 验证
• CSS 主题导入（tailwind3）
• 使用 height 和 width 设置最精简的 SkeletonComponent
• 运行 Vite/React 应用

形状

📄 阅读： references/skeleton-shapes.md

• shape 属性："Circle"、"Square"、"Rectangle"、"Text"（默认值）
• 尺寸规则：Circle/Square 需要设置宽度；Rectangle/Text 需要设置宽度和高度
• 构建包含多种形状的卡片骨架屏布局
• 为头像、图片、文本和图标占位符选择合适的形状

闪烁效果

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

• shimmerEffect 属性："Wave"（默认值）、"Pulse"、"Fade"
• 各种效果类型的视觉表现
• 使用 Pulse 效果的列表骨架屏示例
• 选择与 UI 场景相符的效果

样式和可见性

📄 阅读： references/skeleton-styles.md

• 使用 cssClass 属性自定义 CSS 覆盖样式（波浪颜色、背景、动画速度）
• 根据加载状态使用 visible 属性切换骨架屏的显示或隐藏
• 过渡模式：骨架屏 → 实际内容
• 自定义 CSS 变量

无障碍

📄 阅读： references/skeleton-accessibility.md

• 符合 WCAG 2.2、Section 508、ADA 标准
• WAI-ARIA 属性：role="status"、aria-label、aria-live、aria-busy
• 使用 label 属性设置无障碍骨架屏名称
• 通过 enableRtl 支持 RTL
• 遵循 prefers-reduced-motion 设置

API 参考

📄 阅读： references/skeleton-api.md

• 所有属性：cssClass、enablePersistence、enableRtl、height、label、locale、shape、shimmerEffect、visible、width
• 方法：destroy()
• SkeletonType 和 ShimmerEffect 枚举值

---

快速入门

🛑 停止 — 请勿自行启动开发服务器。完成设置后，请让用户运行：npm run dev。

npm install @syncfusion/[email protected] --save
npm audit

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

import { SkeletonComponent } from '@syncfusion/ej2-react-notifications';
import * as React from 'react';
import './App.css';

function App() {
  return (
    <SkeletonComponent height="15px" width="100%" />
  );
}
export default App;

---

常见模式

个人资料卡片骨架屏

import { SkeletonComponent } from '@syncfusion/ej2-react-notifications';
import * as React from 'react';

function ProfileCardSkeleton() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: '12px', padding: '16px' }}>
      {/* Avatar placeholder */}
      <SkeletonComponent shape="Circle" width="48px" />
      {/* Name and subtitle placeholders */}
      <div style={{ flex: 1 }}>
        <SkeletonComponent width="60%" height="15px" />
        <br />
        <SkeletonComponent width="40%" height="12px" />
      </div>
    </div>
  );
}
export default ProfileCardSkeleton;

数据加载时切换骨架屏

import { SkeletonComponent } from '@syncfusion/ej2-react-notifications';
import * as React from 'react';

function DataCard() {
  const [loading, setLoading] = React.useState(true);
  const [content, setContent] = React.useState('');

  React.useEffect(() => {
    setTimeout(() => {
      setContent('Data loaded successfully');
      setLoading(false);
    }, 2000);
  }, []);

  return (
    <div>
      {loading ? (
        <SkeletonComponent width="80%" height="20px" />
      ) : (
        <p>{content}</p>
      )}
    </div>
  );
}
export default DataCard;

使用 Pulse 效果的闪烁列表

import { SkeletonComponent } from '@syncfusion/ej2-react-notifications';
import * as React from 'react';

function ListSkeleton() {
  return (
    <ul style={{ listStyle: 'none', padding: 0 }}>
      {[1, 2, 3].map((i) => (
        <li key={i} style={{ display: 'flex', gap: '10px', marginBottom: '12px' }}>
          <SkeletonComponent shape="Circle" width="40px" shimmerEffect="Pulse" />
          <div style={{ flex: 1 }}>
            <SkeletonComponent width="70%" height="14px" shimmerEffect="Pulse" />
            <br />
            <SkeletonComponent width="45%" height="12px" shimmerEffect="Pulse" />
          </div>
        </li>
      ))}
    </ul>
  );
}
export default ListSkeleton;

---

主要属性一览

属性	类型	默认值	用途
shape	'Text' | 'Circle' | 'Square' | 'Rectangle'	'Text'	骨架屏形状变体
width	string | number	''	宽度；Circle/Square 必填
height	string | number	''	高度；用于 Rectangle/Text
shimmerEffect	'Wave' | 'Pulse' | 'Fade'	'Wave'	动画样式
visible	boolean	true	显示/隐藏骨架屏
cssClass	string	''	自定义 CSS 类
label	string	'Loading…'	用于辅助功能的 ARIA 标签
enableRtl	boolean	false	从右向左渲染
enablePersistence	boolean	false	在重新加载后保留状态

---

Spinner

用于实现 Syncfusion React Spinner 的技能——操作进行时阻止用户与目标元素交互的加载指示器。

🛑 Agentic 用法： 请勿自主执行多个步骤。每项操作（安装、运行、创建文件）前都要向用户确认。

文档

入门指南

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

• 安装：🛑 停止 — 请勿自主安装软件包。请用户运行：npm install @syncfusion/[email protected] --save。使用 npm audit 验证
• CSS 主题导入（ej2-base + ej2-react-popups）
• 基本函数组件和类组件模式
• createSpinner → showSpinner 工作流
• 显示/隐藏控制
• 全页面覆盖层 Spinner
• 缺失样式和 TypeScript 错误的故障排除

Spinner 功能

📄 阅读： references/spinner-features.md

• 使用 setSpinner 配置全局 Spinner
• 所有 SpinnerType 值（Material、Bootstrap5、Fluent2 等）
• 通过 width 属性设置 Spinner 大小
• Spinner 旁的标签文本
• 自定义 HTML 模板支持
• 显示/隐藏切换模式
• 在同一页面上使用多个 Spinner
• 使用 finally 清理异步数据获取
• React 状态与 Spinner 同步
• 在卡片和模态框中使用 Spinner

API 参考

📄 阅读： references/spinner-api.md

• createSpinner(args: SpinnerArgs) — 完整签名和参数
• showSpinner(container: HTMLElement) — 签名
• hideSpinner(container: HTMLElement) — 签名
• setSpinner(args: SetSpinnerArgs) — 签名
• SpinnerArgs 接口（target、width、label、cssClass、template、type）
• SetSpinnerArgs 接口（template、cssClass、type）
• 全部 11 个 SpinnerType 值
• 各主题的 CSS 导入路径
• 常见的无效 API 使用注意事项

自定义

📄 阅读： references/spinner-customization.md

• 使用 cssClass 自定义 CSS 钩子
• 使用 width 设置 Spinner 图标尺寸
• 使用 template 创建自定义 HTML 动画
• 使用 setSpinner 设置全局默认值
• 通过 CSS 覆盖 Spinner 颜色
• 使用 CSS 设置标签位置
• 自定义覆盖层背景
• 特定主题的类型映射
• 响应式 Spinner 模式

辅助功能

📄 阅读： references/spinner-accessibility.md

• 在加载区域使用 aria-busy
• 使用 aria-live 区域向屏幕阅读器播报
• 高对比度显示使用 type: 'HighContrast'
• 键盘辅助功能（触发焦点、返回焦点）
• 焦点管理模式
• 完整的无障碍 Spinner 模式
• WCAG 2.1 合规性检查清单

快速入门

最简 Spinner（函数组件）

🛑 停止 — 请勿自主启动开发服务器。完成设置后，请用户运行：npm run dev。

import { createSpinner, showSpinner } from '@syncfusion/ej2-react-popups';
import * as React from 'react';
import { useEffect } from 'react';
import './App.css';

function App() {
  useEffect(() => {
    createSpinner({
      target: document.getElementById('container') as HTMLElement
    });
    showSpinner(document.getElementById('container') as HTMLElement);
  }, []);

  return (
    <div id="container" style={{ height: '200px' }} />
  );
}

export default App;

带显示/隐藏切换的 Spinner

import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-react-popups';
import { useEffect, useRef, useState } from 'react';

function DataLoader() {
  const ref = useRef<HTMLDivElement>(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (ref.current) {
      createSpinner({ target: ref.current, label: 'Loading...' });
    }
  }, []);

  const load = async () => {
    setLoading(true);
    showSpinner(ref.current as HTMLElement);
    try {
      await fetchData();
    } finally {
      hideSpinner(ref.current as HTMLElement);
      setLoading(false);
    }
  };

  return (
    <div>
      <button onClick={load} disabled={loading}>Load Data</button>
      <div ref={ref} style={{ height: '200px', position: 'relative' }} />
    </div>
  );
}

全局 Spinner 类型

import { setSpinner } from '@syncfusion/ej2-react-popups';

// Call BEFORE any createSpinner — sets global default type
setSpinner({ type: 'Bootstrap5' });

常见模式

模式 1：异步获取并清理

const fetchWithSpinner = async (container: HTMLElement) => {
  showSpinner(container);
  try {
    const data = await fetch('/api/data').then(r => r.json());
    return data;
  } finally {
    hideSpinner(container); // Always hide, even on error
  }
};

模式 2：同步 React 状态

useEffect(() => {
  if (!ref.current) return;
  if (isLoading) {
    showSpinner(ref.current);
  } else {
    hideSpinner(ref.current);
  }
}, [isLoading]);

模式 3：全页面加载

useEffect(() => {
  createSpinner({ target: document.body, label: 'Initializing...' });
  showSpinner(document.body);

  initializeApp().finally(() => hideSpinner(document.body));
}, []);

模式 4：使用自定义类型的 Spinner

createSpinner({
  target: el,
  type: 'Fluent2',
  width: '40px',
  label: 'Processing...',
  cssClass: 'my-overlay'
});

关键 API 快速参考

函数	签名	用途
createSpinner	(args: SpinnerArgs) => void	在 DOM 元素上初始化加载指示器
showSpinner	(el: HTMLElement) => void	显示现有加载指示器
hideSpinner	(el: HTMLElement) => void	隐藏可见的加载指示器
setSpinner	(args: SetSpinnerArgs) => void	为所有加载指示器设置全局默认值

SpinnerArgs 属性： target（必需）、width、label、cssClass、template、type

SpinnerType 值： 'Material' | 'Material3' | 'Fabric' | 'Bootstrap' | 'Bootstrap4' | 'Bootstrap5' | 'HighContrast' | 'Tailwind' | 'Tailwind3' | 'Fluent' | 'Fluent2'

关键规则

• ❌ 没有 SpinnerComponent 类 — 不存在 import { SpinnerComponent }
• ✅ 仅使用： createSpinner、showSpinner、hideSpinner、setSpinner
• ❌ 不要将 color、size、visible、isLoading 用作 SpinnerArgs — 这些属性不存在
• ✅ 有效的 SpinnerArgs： target、width、label、cssClass、template、type
• ⚠️ 先调用 createSpinner，再调用 showSpinner — 调用顺序很重要
• ⚠️ 将加载指示器逻辑放在 useEffect 中 — 调用 createSpinner 前，DOM 元素必须已存在
• ✅ 务必在 finally 中调用 hideSpinner — 防止加载状态卡住

故障排查

问题	解决方案
加载指示器未显示	确保先调用 createSpinner，再调用 showSpinner；检查 DOM 元素是否存在
加载指示器一直显示	在 finally 块中调用 hideSpinner；检查是否存在未处理的 Promise 拒绝
没有动画	确认已导入 ej2-base 和 ej2-react-popups CSS；必须先导入 ej2-base
TypeScript 错误	进行类型断言：document.getElementById('id') as HTMLElement，或使用 useRef<HTMLDivElement>
加载指示器超出边界	为目标元素添加 position: relative
主题错误	将 type 设置为与应用 CSS 主题匹配的值（例如，Fluent 2 CSS 使用 'Fluent2'）

相关组件

• 进度条 — 用于显示带百分比的确定进度
• 骨架屏 — 用于内容占位或闪烁加载模式
• Toast — 用于显示非阻塞式加载通知
• 对话框 — 用于需要用户确认的模态加载状态

资源

• 官方文档： https://ej2.syncfusion.com/react/documentation/spinner/
• 入门指南： https://ej2.syncfusion.com/react/documentation/spinner/getting-started
• npm 包： @syncfusion/ej2-react-popups

徽章

Syncfusion React Badge 是纯 CSS 组件，无需导入 React 组件类。只需将 CSS 修饰类添加到嵌套在目标 UI 元素中的 <span>（或 <a>）元素即可应用徽章。

包： @syncfusion/ej2-react-notifications

🛑 Agentic 使用： 请勿自主执行多个步骤。每次操作（安装、运行、创建文件）前，都要先向用户确认。

主要功能

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

导航指南

入门

📄 阅读： references/getting-started.md

• 安装包：🛑 停止 — 请勿自主安装包。让用户运行：npm install @syncfusion/[email protected] --save。使用 npm audit 验证
• 在 React 组件中添加第一个徽章
• 最小可运行示例
• 运行应用程序

徽章类型和形状

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

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

自定义

📄 阅读： references/customization.md

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

操作指南

📄 阅读： references/how-to.md

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

快速开始

1. 安装软件包：

npm install @syncfusion/[email protected] --save
npm audit

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

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

3. 在组件中添加徽章：

import * as React from 'react';
import './App.css';

function App() {
  return (
    <h1>Badge Component <span className="e-badge e-badge-primary">New</span></h1>
  );
}
export default App;

常见模式

图标上的通知徽章

// Parent must have position: relative
<div className="badge-block">
  <div className="skype svg_icons"></div>
  <span className="e-badge e-badge-success e-badge-overlap e-badge-notification">99+</span>
</div>

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

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

药丸形标签

<h1>Messages <span className="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	将徽章置于底部而非顶部