syncfusion-angular-popups

用途

Syncfusion Angular Popups 技能面向在 Angular 应用中实现弹出类交互界面的开发者，覆盖三类组件：Dialog（对话框）、Predefined Dialogs（预定义对话框）和 Tooltip（工具提示）。该技能以参考文档导航的形式组织内容，帮助开发者按需查阅具体功能的实现方式。

主要能力

Dialog 对话框

Dialog 组件是一个向用户显示信息并获取用户输入的窗口，支持模态（阻止父级交互）与非模态（允许父级交互）两种模式。主要特性包括：

模态与非模态模式切换，以及遮罩层自定义
模板支持：可自定义头部、内容和底部
定位：9 种内置位置或自定义放置
动画：平滑的打开/关闭效果（Fade、Zoom、Slide 等）
可拖拽与可调整大小
表单集成：响应式表单与模板驱动表单
无障碍：完整 WCAG 2.2 Level AA 支持与 ARIA
键盘导航：Tab、Escape、Enter 和方向键
响应式：移动设备上支持全屏模式

Predefined Dialogs 预定义对话框

基于 DialogUtility 的零模板、工具优先方式，用于显示模态反馈和用户输入对话框：

Alert：警告或通知用户，单个 OK 按钮，使用 DialogUtility.alert(...)
Confirm：请求确认（OK + Cancel），使用 DialogUtility.confirm(...)
Prompt：收集用户输入（HTML 内容 + OK + Cancel），使用 DialogUtility.confirm(...) 并在 content 中放置输入元素

注意：Angular 的预定义对话框没有单独的 prompt 方法，需使用 DialogUtility.confirm() 配合自定义 HTML 内容构建 prompt 模式。

Tooltip 工具提示

Tooltip（ejs-tooltip）在悬停、点击、聚焦或触摸目标元素时显示信息或消息的弹出层，支持 12 种定位、动画、HTML/模板/AJAX 内容、粘性模式、鼠标跟随和完整的无障碍合规。

使用方式

安装命令：

ng add @syncfusion/ej2-angular-popups

Dialog 快速示例：

import { Component, ViewChild } from '@angular/core';
import { DialogModule, DialogComponent } from '@syncfusion/ej2-angular-popups';

@Component({
  selector: 'app-root',
  imports: [DialogModule],
  template: `
    <div id="dialog-container" style="height: 500px;">
      <button class="e-control e-btn" (click)="onOpenDialog()">
        Open Dialog
      </button>
      
      <ejs-dialog 
        #ejDialog
        target="#dialog-container"
        [showCloseIcon]="true"
        width="400px"
        content="This is a Dialog content"
      >
        <ng-template #header>
          <div class="e-dlg-header-content">
            <span>Dialog Title</span>
          </div>
        </ng-template>
      </ejs-dialog>
    </div>
  `
})
export class AppComponent {
  @ViewChild('ejDialog') ejDialog!: DialogComponent;

  onOpenDialog(): void {
    this.ejDialog.show();
  }
}

预定义对话框示例：

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

DialogUtility.alert({
  title: 'Warning',
  content: 'Disk space is running low.',
  width: '280px'
});

const dlg = DialogUtility.confirm({
  title: 'Delete Item',
  content: 'Are you sure you want to delete this item?',
  width: '300px',
  okButton: { text: 'Yes', click: () => { dlg.hide(); } },
  cancelButton: { text: 'No', click: () => { dlg.hide(); } }
});

CSS 主题导入示例：

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

适用场景

删除前确认：模态对话框请求用户确认删除
表单提交：对话框内嵌表单供用户提交数据
警告与通知：向用户显示重要信息
多步骤流程：使用嵌套对话框处理工作流
设置面板：非模态对话框用于不阻塞交互的设置
帮助与引导：在可拖拽对话框中显示帮助内容
加载状态：处理过程中在对话框中显示进度
错误处理：在模态框中显示错误消息
工具提示：为元素提供悬停、点击或聚焦时的补充说明

限制

资料中未提供关于收费、价格、平台兼容性范围或性能指标的具体说明。Dialog 的完整 API 参考、Tooltip 的完整属性方法事件列表等内容以参考文档形式给出，具体细节需查阅对应 references 文件。