syncfusion-angular-inputs

实现 Syncfusion Angular Inputs

Uploader

Syncfusion Angular Uploader（ejs-uploader）是一款功能全面的文件上传组件，支持异步上传、大文件分块上传、拖放、剪贴板粘贴、目录上传、文件验证、模板、表单集成、JWT 身份验证以及全面的事件处理。

组件概览

Syncfusion Angular Uploader 提供：

• 异步上传模式： 自动上传（默认）或通过操作按钮手动上传
• 分块上传： 将大文件拆分为可配置字节大小的分块，并提供重试逻辑
• 顺序上传： 每次处理一个文件，以减少服务器流量
• 文件来源： 浏览对话框、拖放、剪贴板粘贴、目录选择
• 验证： 文件类型（扩展名）、最小／最大大小、自定义数量限制、防止重复
• 模板： 自定义文件列表项结构；构建完全自定义的上传 UI
• 表单支持： HTML 表单提交、模板驱动表单（ngModel）、响应式表单（FormGroup）
• 无障碍功能： WCAG 2.2、Section 508、键盘导航、屏幕阅读器支持
• 本地化： 通过 L10n 自定义所有静态文本

文档与导航指南

⚠️ Agent 使用须知： 本指南链接到多份参考文档。AI Agent 只应阅读与当前任务相关的部分，不要自动依次阅读所有参考文档。遵循最小权限原则：只获取所需内容。

入门

📄 阅读： references/getting-started.md

• 安装 @syncfusion/ej2-angular-inputs ⚠️ 在生产流水线中运行 npm install 前，务必验证软件包版本和完整性（供应链安全）。
• 软件包设置、CSS 导入和 Angular 独立组件用法
• 添加 <ejs-uploader> 组件
• 配置异步设置（saveUrl、removeUrl）
• 处理成功和失败事件
• 添加自定义放置区域

异步上传

📄 阅读： references/async-upload.md

• 多文件和单文件上传模式（multiple 属性）
• 保存操作配置和服务器端处理
• 移除操作和 postRawFile 的用法
• 自动上传与手动上传（autoUpload 属性）
• 顺序上传（sequentialUpload）
• 预加载文件（files 属性）
• 为上传请求添加自定义 HTTP 标头

分块上传

📄 阅读： references/chunk-upload.md

• 通过 asyncSettings.chunkSize 启用分块上传
• 暂停、恢复和取消分块上传
• 重试配置（retryCount、retryAfterDelay）
• chunkSuccess 和 chunkFailure 事件
• 服务器端分块组装实现

文件验证

📄 阅读： references/validation.md

• 使用 allowedExtensions 限制文件类型
• 文件大小限制（minFileSize、maxFileSize）
• 通过 selected 事件限制上传数量
• 防止重复上传文件
• 上传前验证 MIME 类型
• 拖放时验证 Image/*

文件来源

📄 阅读： references/file-sources.md

• 从剪贴板粘贴图像
• 使用 directoryUpload 上传目录（文件夹）
• 使用内置和自定义放置区域进行拖放
• 自定义放置区域样式（.e-upload-drag-hover）
• 从外部按钮触发文件浏览

模板与自定义 UI

📄 阅读： references/templates-and-custom-ui.md

• 使用 template 属性设置文件列表模板
• 构建完全自定义的上传 UI（使用 showFileList 隐藏默认列表）
• 使用 HTML 元素自定义操作按钮（buttons 属性）
• 自定义进度条外观
• 上传前预览图像
• 上传到服务器前调整图像大小

表单集成

📄 阅读： references/form-integration.md

• 在 HTML 表单中使用 Uploader（同步提交）
• 使用 ngModel 的模板驱动表单
• 使用 FormGroup 的响应式表单
• 必填字段验证（required 属性）
• 表单重置时的重置行为

样式与外观

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

• 自定义上传器包装元素的尺寸
• 设置浏览按钮的样式
• 自定义拖放区域文本
• 自定义文件列表容器
• 隐藏默认拖放区域
• Uploader 关键元素的 CSS 类参考

无障碍访问与本地化

📄 阅读： references/accessibility-and-localization.md

• WCAG 2.2、Section 508、键盘快捷键
• 屏幕阅读器和 RTL 支持
• 使用 L10n 本地化所有静态标签和消息

高级操作模式

📄 阅读： references/advanced-patterns.md

• 使用 upload() 方法以编程方式上传文件
• 隐形（后台）上传
• 使用 customFormData 添加其他表单数据
• 对上传和删除请求进行 JWT 身份验证
• 删除文件前显示确认对话框
• 获取所选文件的总大小
• 对文件列表中的所选文件排序
• 从服务器打开并编辑已上传的文件
• 将已上传的图像转换为二进制格式

API 参考

📄 阅读： references/api.md

• 完整的属性、方法和事件参考
• AsyncSettingsModel、ButtonsPropsModel、FilesPropModel
• 所有事件参数类型及其字段

快速入门示例

使用异步上传的最简文件上传器（Angular 21+ 独立组件）：

import { Component } from '@angular/core';
import { UploaderModule } from '@syncfusion/ej2-angular-inputs';

@Component({
  imports: [UploaderModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <ejs-uploader
      [asyncSettings]="asyncSettings"
      [autoUpload]="false"
      (success)="onSuccess($event)"
      (failure)="onFailure($event)">
    </ejs-uploader>
  `
})
export class AppComponent {
  public asyncSettings = {
    saveUrl: 'https://your-api/upload/save',    // Replace with your actual endpoint
    removeUrl: 'https://your-api/upload/remove' // Replace with your actual endpoint
  };

  onSuccess(args: any): void {
    console.log('Upload operation:', args.operation, 'File:', args.file.name);
  }

  onFailure(args: any): void {
    console.error('Upload failed:', args.file.name);
  }
}

CSS 主题设置（styles.css）：

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

常见模式

模式 1：拖放时自动上传

// Automatically uploads dropped or browsed files
<ejs-uploader
  [asyncSettings]="asyncSettings"
  [dropArea]="dropElement"
  [multiple]="true"
  (success)="onSuccess($event)">
</ejs-uploader>

模式 2：大文件分块上传

<ejs-uploader
  [asyncSettings]="chunkSettings"
  (chunkSuccess)="onChunkSuccess($event)"
  (chunkFailure)="onChunkFailure($event)">
</ejs-uploader>

// In component:
chunkSettings = {
  saveUrl: 'https://your-api/upload/save',    // Replace with your actual endpoint
  removeUrl: 'https://your-api/upload/remove', // Replace with your actual endpoint
  chunkSize: 500000  // 500 KB chunks
};

模式 3：验证后上传（类型 + 大小）

<ejs-uploader
  [asyncSettings]="asyncSettings"
  allowedExtensions=".jpg,.png,.pdf"
  [minFileSize]="1024"
  [maxFileSize]="5000000">
</ejs-uploader>

模式 4：预加载文件

<ejs-uploader
  [asyncSettings]="asyncSettings"
  [files]="preloadedFiles">
</ejs-uploader>

// In component:
preloadedFiles = [
  { name: 'report', size: 200000, type: '.pdf' },
  { name: 'photo', size: 500000, type: '.jpg' }
];

模式 5：经 JWT 身份验证的上传

<ejs-uploader
  [asyncSettings]="asyncSettings"
  (uploading)="addAuthHeader($event)"
  (removing)="addAuthHeader($event)">
</ejs-uploader>

// ⚠️ Never hardcode tokens — always retrieve from a secure auth service (e.g., Angular AuthService or OAuth library).
// ⚠️ Always transmit tokens over HTTPS only. Never pass tokens as URL query parameters.
addAuthHeader(args: any): void {
  args.currentRequest.setRequestHeader('Authorization', `Bearer ${this.token}`);
}

关键属性

属性	类型	默认值	用途
[asyncSettings]	AsyncSettingsModel	{saveUrl:'',removeUrl:''}	服务器保存/删除 URL 和分块配置
[autoUpload]	boolean	true	选择文件后立即上传
[multiple]	boolean	true	允许选择多个文件
[allowedExtensions]	string	''	以逗号分隔的允许扩展名（例如，.jpg,.png）
[minFileSize]	number	0	文件最小大小，单位为字节
[maxFileSize]	number	30000000	文件最大大小，单位为字节（约 28.6 MB）
[files]	FilesPropModel[]	[]	从服务器预加载的文件
[dropArea]	string | HTMLElement	null	自定义拖放目标元素或选择器
[directoryUpload]	boolean	false	启用文件夹/目录上传
[sequentialUpload]	boolean	false	一次上传一个文件
[showFileList]	boolean	true	显示/隐藏默认文件列表
[template]	any	null	自定义文件列表项模板
[buttons]	ButtonsPropsModel	{browse,clear,upload}	自定义按钮文本/HTML
[enabled]	boolean	true	启用或禁用组件
[cssClass]	string	''	根元素上的其他 CSS 类
[enableRtl]	boolean	false	从右向左渲染
[enableHtmlSanitizer]	boolean	true	防止文件名中的 XSS
[dropEffect]	DropEffect	'Default'	拖放效果：Copy、Move、Link、None

关键事件

事件	触发时机	关键参数
(selected)	选择或拖放文件时	filesData、cancel、modifiedFilesData
(uploading)	每个文件开始上传之前	fileData、currentRequest、customFormData、cancel
(success)	上传或移除成功时	file、operation（upload|remove）、event
(failure)	上传或移除失败时	file、operation、event
(progress)	上传过程中	file、event（loaded、total）
(removing)	发送文件移除请求之前	filesData、postRawFile、currentRequest
(beforeRemove)	确认移除之前	filesData、cancel
(beforeUpload)	上传流程开始之前	fileData、customFormData
(change)	文件列表发生变化时	file
(clearing)	清空全部文件之前	cancel
(chunkSuccess)	每个分块上传成功时	chunkIndex、totalChunk、chunkSize、file
(chunkFailure)	每个分块上传失败时	chunkIndex、totalChunk、chunkSize、file、cancel
(chunkUploading)	每个分块开始上传之前	fileData、currentRequest、customFormData
(pausing)	分块上传暂停时	file、chunkIndex
(resuming)	分块上传恢复时	file、chunkIndex
(canceling)	取消上传时	file
(fileListRendering)	每个文件项渲染之前	element、fileInfo
(actionComplete)	所有文件处理完成时	fileData
(created)	组件初始化时	—

关键方法

方法	用途
upload(files?, custom?)	以编程方式开始上传已选文件或指定文件
remove(fileData?, custom?, postRawFile?)	从列表或服务端移除文件
cancel(fileData?)	取消正在进行的分块上传
pause(fileData?, custom?)	暂停分块上传
resume(fileData?, custom?)	恢复已暂停的分块上传
retry(fileData?, fromCanceledStage?, custom?)	重试失败或已取消的上传
clearAll()	清空列表中的所有文件
getFilesData(index?)	获取列表中显示的文件数据数组
createFileList(fileData)	以编程方式创建文件列表项
sortFileList(filesData?)	按字母顺序排列文件列表
bytesToSize(bytes)	将字节数转换为易读的 KB/MB 字符串
destroy()	销毁组件并解除事件绑定

常见用例

用例 1：个人资料照片上传

• multiple="false"、allowedExtensions=".jpg,.png,.gif,.webp"、maxFileSize=5000000
• 使用 selected 事件在上传前预览
• 自动上传并显示进度指示器

用例 2：文档上传门户

• 多个文件，allowedExtensions=".pdf,.doc,.docx,.xlsx"
• 对大文件进行分块上传，支持暂停和恢复
• 顺序上传以控制服务端负载

用例 3：图片库批量上传

• 多个文件，启用目录上传
• 使用 selected 事件和 FileReader 预览缩略图
• 上传前按文件名排序

用例 4：安全文件上传（API 身份验证）

• 通过 uploading 事件在请求头中注入 JWT 令牌
• 使用自定义 customFormData 传递元数据
• 服务端在保存前验证令牌

用例 5：包含必需文件的表单

• autoUpload=false，同步提交表单
• 使用 data-required-message 属性进行必填验证
• 使用模板驱动或响应式表单绑定

后续步骤

1. 快速入门 → 安装软件包并渲染基本上传器
2. 异步上传 → 配置保存/移除 URL 和上传模式
3. 验证 → 添加扩展名和大小限制
4. 分块上传 → 通过暂停/恢复处理大文件
5. 模板 → 自定义文件列表外观
6. 表单集成 → 绑定到 Angular 表单
7. 高级模式 → JWT 身份验证、编程式上传、自定义 UI
8. API 参考 → 完整的属性、方法和事件列表

---

如需详细实现说明，请从 references/getting-started.md 开始

NumericTextBox

组件概述

Syncfusion Angular NumericTextBox 是用于数值的专用输入控件。它提供：

• 数值验证，支持最小值/最大值范围和严格模式
• 格式设置（货币、百分比、小数）
• 微调按钮，用于调整数值
• 装饰元素（用于图标、标签的前置/后置模板）
• 无障碍功能（WCAG 2.2、ARIA、键盘导航）
• 本地化（支持多种区域设置和 RTL）
• 表单集成（响应式表单、模板驱动表单）

---

文档与导航指南

快速入门

📄 阅读： references/getting-started.md

• 安装和软件包设置
• Angular 21+ 独立组件设置
• NumericTextBox 基本实现
• CSS 导入和主题配置
• 使用最小值/最大值进行范围验证
• 简单的格式设置示例
• 精度和小数位数控制
• 双向绑定设置
• 响应式表单集成

格式与数字样式

📄 阅读： references/formats-styling.md

• 标准格式（货币 c2、百分比 p、数字 n）
• 自定义数字格式字符串
• 小数位数控制
• 货币符号和本地化
• NumericTextBox 包装器和图标的样式设置
• CSS 自定义模式

微调器与步长控制

📄 阅读： references/spinners-and-step.md

• 微调按钮可见性（showSpinButton）
• 步长值配置（step 属性）
• 自定义微调器向上/向下箭头图标
• 方向键交互
• 禁用微调按钮

装饰元素与模板

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

• 使用 prependTemplate 和 appendTemplate 添加前缀/后缀
• 货币符号和单位标签
• 操作按钮和图标
• 不影响验证的状态指示器
• 模板使用模式

验证与表单集成

📄 阅读： references/validation-and-forms.md

• 范围验证（使用 strictMode 的最小值/最大值）
• 自定义验证规则
• 错误和警告状态
• 响应式表单模式

高级模式与边缘情况

📄 阅读： references/advanced-patterns.md

• 聚焦时保留末尾零
• 防止输入空值（始终要求输入数值）
• 空值输入配置
• 清除按钮行为
• 只读和禁用状态
• 聚焦和失焦事件处理
• 浮动标签类型（Always、Auto、Never）
• 性能优化

无障碍功能与迁移

📄 阅读： references/accessibility-and-migration.md

• 符合 WCAG 2.2 Level AA
• ARIA 属性（spinbutton 角色、aria-valuemin、aria-valuemax 等）
• 键盘导航（向上/向下箭头）
• 屏幕阅读器支持
• 支持从右向左书写语言的 RTL
• EJ1 到 EJ2 API 迁移指南
• 本地化和全球化

全球化与本地化

📄 阅读： references/globalization.md

• Locale 属性配置
• 区域设置专属数字格式
• RTL（从右向左）支持
• 国际数字格式

API 参考

📄 阅读： references/api.md

• 所有组件属性及其类型、默认值和说明
• 所有公共方法及其签名和用法示例
• 所有事件及其参数接口详情
• ChangeEventArgs、NumericBlurEventArgs、NumericFocusEventArgs 接口
• 完整的摘要表，便于快速查阅

---

快速入门示例

import { NumericTextBoxModule } from '@syncfusion/ej2-angular-inputs';
import { Component } from '@angular/core';

@Component({
  imports: [NumericTextBoxModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <ejs-numerictextbox
      value="100"
      min="10"
      max="1000"
      step="5"
      format="c2"
      placeholder="Enter amount">
    </ejs-numerictextbox>
  `
})
export class AppComponent {}

---

常见模式

带验证的货币输入

<ejs-numerictextbox
  value="50.00"
  format="c2"
  currency="USD"
  min="0"
  max="10000"
  decimals="2"
  strictMode="true">
</ejs-numerictextbox>

百分比输入

<ejs-numerictextbox
  value="25"
  format="p"
  min="0"
  max="100"
  step="1">
</ejs-numerictextbox>

使用附加元素（单位标签）

<ejs-numerictextbox
  value="100"
  [appendTemplate]="appendUnit">
</ejs-numerictextbox>

<ng-template #appendUnit>
  <span class="unit-label">kg</span>
</ng-template>

与表单控件进行双向绑定

<ejs-numerictextbox
  [(ngModel)]="quantity"
  min="1"
  max="100"
  step="1">
</ejs-numerictextbox>

---

关键属性

属性	类型	用途	默认值
value	number	当前数值	null
min	number	允许的最小值	Number.MIN_VALUE
max	number	允许的最大值	Number.MAX_VALUE
step	number	增量/减量	1
decimals	number	允许的小数位数	null
format	string	数字格式（例如，'c2'、'n2'、'p'）	null
currency	string	货币代码（例如，'USD'、'EUR'）	null
strictMode	boolean	强制执行最小值/最大值验证	false
showSpinButton	boolean	显示向上/向下微调按钮	true
showClearButton	boolean	显示清除按钮	false
readonly	boolean	禁止编辑	false
disabled	boolean	禁用组件	false
locale	string	区域设置代码（例如，'de-DE'、'fr-FR'）	'en-US'
enableRtl	boolean	启用从右到左模式	false
placeholder	string	提示文本	null
floatLabelType	string	标签浮动行为（'Auto'、'Always'、'Never'）	'Never'

---

常见用例

1. 电子商务数量输入 — 带最小值/最大值验证的商品数量选择器
2. 财务表单 — 带货币符号和小数位的货币输入
3. 科学应用 — 高精度小数输入
4. 调查/表单数据 — 范围为 0-100 的百分比输入
5. 多语言支持 — 根据用户区域设置格式化数字
6. 优先考虑无障碍体验的表单 — 符合 WCAG 标准的数字输入
7. 适合移动设备 — 便于触控的微调按钮和键盘输入

---

另请参阅

• Syncfusion Angular 输入控件
• Angular 表单文档
• WCAG 2.2 无障碍指南
• Syncfusion 主题工作室

TextBox

Syncfusion Angular TextBox 组件是一款功能丰富的输入元素，通过浮动标签、验证状态、附加元素（前置/后置元素）、无障碍支持和全面的样式选项增强原生 HTML 输入框。本指南将介绍实现模式、配置和最佳实践。

组件概览

TextBox 组件提供：

功能	用途
浮动标签	聚焦或输入内容时浮动到输入框上方的动画标签
验证状态	通过 CSS 类提供视觉反馈（错误、警告、成功）
附加元素	添加自定义 HTML 元素（图标、按钮、单位）
清除按钮	内置清除功能，可重置输入值
禁用/只读状态	控制用户交互和可编辑性
HTML 属性	支持标准输入属性（type、maxlength 等）
多行支持	支持配置 textarea 的行列尺寸
无障碍功能	符合 WCAG 2.2 标准，支持键盘导航和 ARIA 属性
RTL 支持	支持从右到左书写的语言
样式选项	CSS 类、验证颜色和响应式尺寸

---

文档和导航指南

入门指南

📄 阅读： references/getting-started.md

• 安装和软件包设置
• 创建第一个 TextBox 组件
• CSS 导入和主题选择
• 浮动标签实现
• 基本事件绑定和数据绑定
• 常见设置问题及解决方案

输入功能和状态管理

📄 阅读： references/input-features.md

• 清除按钮实现（showClearButton）
• 禁用状态（enabled 属性）
• 只读状态（readonly 属性）
• HTML 属性配置（htmlAttributes）
• 支持的输入类型和属性
• 表单状态管理模式

装饰元素和自定义

📄 阅读： references/adornments-customization.md

• 前置和后置模板的用法
• 提供视觉提示的图标装饰元素
• 按钮装饰元素（密码切换、清除）
• 验证状态指示器
• 单位指示器（货币、温度等）
• 性能和无障碍考量

验证状态和错误处理

📄 阅读： references/validation-states.md

• 错误、警告和成功验证状态
• CSS 类方法（e-error、e-warning、e-success）
• 视觉反馈模式
• 为必填字段添加星号
• 与验证集成的表单
• 自定义错误消息显示

样式和外观自定义

📄 阅读： references/styling-appearance.md

• CSS 结构和类层级
• 基本尺寸设置（高度、字体、内边距）
• 浮动标签颜色自定义
• 验证状态颜色更改
• 边框、圆角和高级样式
• 根据输入值动态设置样式
• 主题集成和自定义

多行和尺寸功能

📄 阅读： references/multiline-sizing.md

• 多行文本区域配置
• 行数和列数设置
• 响应式尺寸模式
• 高度调整和限制
• 字符计数实现
• 文本换行和溢出处理

无障碍和迁移

📄 阅读： references/accessibility-migration.md

• 符合 WCAG 2.2 和 Section 508 标准
• 键盘导航支持
• ARIA 属性（aria-labelledby、aria-invalid、aria-disabled）
• 屏幕阅读器兼容性
• 从 CSS TextBox 迁移到 Angular 组件
• RTL 和移动端无障碍支持

---

快速入门示例

创建一个带浮动标签的 TextBox：

import { Component } from '@angular/core';
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [TextBoxModule],
  template: `
    <div style="margin: 50px;">
      <h2>Angular TextBox Example</h2>
      <ejs-textbox 
        #textbox
        [floatLabelType]="'Auto'"
        placeholder="Enter your name"
        (input)="onInput($event)"
      ></ejs-textbox>
      <p>Value: {{ textValue }}</p>
    </div>
  `
})
export class AppComponent {
  textValue = '';

  onInput(event: any) {
    this.textValue = event.target.value;
  }
}

要点：

• 使用 floatLabelType="'Auto'" 实现自动浮动标签
• 从 @syncfusion/ej2-angular-inputs 导入 TextBoxModule
• 使用标准 Angular (input) 事件绑定
• 设置 placeholder 作为浮动标签文本

---

常见模式

模式 1：带图标装饰元素的电子邮件输入框

<ejs-textbox
  placeholder="Email"
  [floatLabelType]="'Auto'"
  [appendTemplate]="'appendTemplate'"
></ejs-textbox>
<ng-template #appendTemplate>
  <span class="e-input-group-icon">✉</span>
</ng-template>

适用场景： 电子邮件、用户名或其他需要视觉提示的字段

模式 2：密码切换

<ejs-textbox
  [type]="passwordVisible ? 'text' : 'password'"
  placeholder="Password"
  [floatLabelType]="'Auto'"
  [appendTemplate]="'toggleTemplate'"
></ejs-textbox>
<ng-template #toggleTemplate>
  <button (click)="togglePassword()">👁</button>
</ng-template>

// Component
togglePassword() {
  this.passwordVisible = !this.passwordVisible;
}

适用场景： 需要切换可见性的密码字段

模式 3：带错误显示的验证

<ejs-textbox
  [cssClass]="isValid ? 'e-success' : 'e-error'"
  placeholder="Phone"
  (change)="validatePhone($event)"
></ejs-textbox>
<p *ngIf="!isValid" style="color: red;">{{ errorMessage }}</p>

适用场景： 需要验证反馈的表单字段

模式 4：带单位指示器的货币输入框

<ejs-textbox
  type="number"
  placeholder="Amount"
  [prependTemplate]="'prependTemplate'"
></ejs-textbox>
<ng-template #prependTemplate>
  <span style="padding: 0 8px;">$</span>
</ng-template>

适用场景： 货币、温度或测量值输入

---

关键属性和配置

请参阅 references/api.md 中的完整 API 摘要。

属性 / 方法	类型	用途
floatLabelType	字符串	'Auto'
placeholder	字符串	输入为空时显示的文本；用于浮动标签
value	字符串	当前输入值
enabled	布尔值	启用/禁用输入框（默认值：true）
readonly	布尔值	将输入框设为只读（可选择但不可编辑）
showClearButton	布尔值	当字段有内容时显示清除按钮
cssClass	字符串	自定义 CSS 类（例如 'e-error'、'e-warning'、'e-success'、'e-small'、'e-bigger'、'e-outline'、'e-corner'）
htmlAttributes	对象	标准 HTML 属性（name、maxlength、type 等）
prependTemplate	模板	输入框前置内容的模板
appendTemplate	模板	输入框后置内容的模板
multiline	布尔值	启用 textarea 模式（渲染为 <textarea>）
addIcon(position, icons)	方法	以编程方式添加图标（position = 'append'
addAttributes(attributes)	方法	以编程方式添加 HTML 属性（例如 maxlength）
removeAttributes(names[])	方法	移除之前添加的属性
focusIn() / focusOut()	方法	以编程方式聚焦或取消聚焦组件
destroy()	方法	销毁组件实例并分离事件处理程序
getPersistData()	方法	返回持久化状态字符串（使用 enablePersistence 时）

注意：

• 将 CSS 类 e-corner 与 e-outline 一起使用，可为盒模型 TextBox 显示圆角。
• rows 和 cols 不是组件属性。若要为多行 TextBox 设置这些属性，请在 (created) 事件处理程序中使用 addAttributes({rows: '5'} as any)（参见 references/multiline-sizing.md）。
• 若要以编程方式创建输入框（动态表单），请使用 @syncfusion/ej2-inputs 中的 Input.createInput（参见 references/input-features.md）。

---

常见用例

1. 联系表单

包含多个 TextBox 字段，并使用浮动标签、验证状态和必填字段指示器。请参阅 validation-states.md 和 accessibility-migration.md。

2. 带清除按钮的搜索输入框

使用 showClearButton=true 的 TextBox，可快速清空输入。请参阅 input-features.md。

3. 带图标前缀/后缀的样式化输入框

使用 prependTemplate 或 appendTemplate 为 TextBox 添加视觉提示。请参阅 adornments-customization.md。

4. 带切换按钮的密码字段

通过后置模板为密码输入框添加可见性切换按钮。请参阅 adornments-customization.md。

5. 多行评论字段

带有行数设置和字符计数的文本区域。请参阅 multiline-sizing.md。

6. 无障碍表单字段

使用适当 ARIA 属性并支持键盘操作的 TextBox，满足无障碍合规要求。请参阅 accessibility-migration.md。

---

相关文档

• Syncfusion Angular 输入组件：https://ej2.syncfusion.com/angular/documentation/textbox
• TextBox API 参考：https://ej2.syncfusion.com/angular/documentation/api/textbox/
• Angular 输入指南：Angular 官方文档
• WCAG 无障碍指南：https://www.w3.org/TR/WCAG22/

---

后续步骤

1. 从 references/textbox-getting-started.md 开始，设置你的第一个 TextBox
2. 查看 references/textbox-input-features.md，了解状态管理
3. 使用 references/textbox-adornments-customization.md 自定义 UI
4. 参考 references/textbox-validation-states.md，了解表单验证
5. 使用 references/textbox-styling-appearance.md 自定义样式
6. 在 references/textbox-multiline-sizing.md 和 references/textbox-accessibility-migration.md 中处理高级场景

---

Signature

Syncfusion Angular Signature 组件（ejs-signature）提供流畅的、基于画布的数字签名采集体验，并具备丰富的功能，包括撤销/重做操作、多种导出格式、可自定义笔迹以及完整的无障碍支持。

包： @syncfusion/ej2-angular-inputs
选择器： ejs-signature（用于 <canvas> 元素）
模块： SignatureModule

组件概览

Signature 组件提供：

• 流畅的笔迹渲染： 基于速度调整笔迹宽度，实现自然的签名效果
• 完整的操作历史： 通过快照跟踪实现撤销/重做
• 多种导出格式： PNG、JPEG、SVG、Base64 或 Blob
• 全面自定义： 笔迹属性、颜色和背景图片
• 无障碍优先： 符合 WCAG 2.2 标准，并支持键盘快捷键
• 只读和禁用状态： 适用于仅查看或受限场景
• 背景持久化： 可选择在保存的文件中包含或排除背景

文档与导航指南

⚠️ Agent 使用提示： 只阅读与你的任务相关的章节——不要自动依次查阅所有参考资料。

开始使用

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

• Angular 21 设置和独立架构
• 包安装和依赖项
• CSS 主题导入和配置
• 基本组件渲染
• 首个可运行的应用程序

以编程方式绘制签名

📄 阅读： references/signature-drawing-signatures.md

• 用于基于文本的签名的 draw() 方法
• 字体系列和字号选项
• 使用自定义样式将文本渲染为签名
• 集成用户输入以绘制签名

用户交互

📄 阅读： references/signature-user-interactions.md

• 撤销和重做功能，以及 canUndo()/canRedo() 检查
• 用于擦除签名的清除方法
• 用于阻止用户输入的禁用状态
• 适用于仅查看场景的只读模式
• 按钮状态管理和变更事件

自定义与样式

📄 阅读： references/signature-customization.md

• 笔迹宽度控制（minStrokeWidth、maxStrokeWidth、velocity）
• 使用十六进制/RGB/命名颜色自定义笔迹颜色
• 设置背景颜色
• 集成背景图片
• 实时更新属性

打开和保存签名

📄 阅读： references/signature-open-save.md

• 使用 load() 方法加载预先绘制的签名
• 支持 Base64 编码和 URL
• 使用 getSignature() 保存为 Base64
• 使用 saveAsBlob() 保存为 Blob
• 保存为图像文件（save() 方法）
• 用于包含背景的 saveWithBackground 属性

工具栏集成

📄 阅读： references/signature-toolbar-integration.md

• 完整的工具栏设置，包含撤销/重做/保存按钮
• 集成笔画颜色和背景颜色选择器
• 带下拉菜单的笔画宽度控件
• 清除和禁用切换开关
• 使用 change 事件管理按钮状态
• 完整的工具栏示例

无障碍

📄 阅读： references/signature-accessibility.md

• 符合 WCAG 2.2 和 Section 508 标准
• 键盘快捷键（Ctrl+Z、Ctrl+Y、Ctrl+S、Delete）
• 屏幕阅读器支持和键盘导航
• 颜色对比度和焦点指示器
• 移动设备支持

API 参考

📄 阅读： references/signature-api.md

• 完整的属性参考（backgroundColor、strokeColor、disabled 等）
• 所有方法（undo、redo、clear、draw、save、load 等）
• 事件和事件参数（change、beforeSave、created）
• 参数和返回类型

快速入门示例

import { Component } from '@angular/core';
import { SignatureModule } from '@syncfusion/ej2-angular-inputs';

@Component({
  imports: [SignatureModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="e-section-control">
      <h4>Sign here</h4>
      <canvas ejs-signature #signature id="signature"></canvas>
    </div>
  `
})
export class AppComponent {}

CSS 主题设置（styles.css）：

@import 'node_modules/@syncfusion/ej2-base/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-inputs/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material3.css';

常见模式

模式 1：捕获并保存签名

import { Component, ViewChild } from '@angular/core';
import { SignatureComponent, SignatureModule } from '@syncfusion/ej2-angular-inputs';

@Component({
  imports: [SignatureModule],
  standalone: true,
  selector: 'app-save-signature',
  template: `
    <canvas ejs-signature #signature id="signature"></canvas>
    <button (click)="saveSignature()">Save as PNG</button>
  `
})
export class SaveSignatureComponent {
  @ViewChild('signature') public signature?: SignatureComponent;

  saveSignature(): void {
    if (!this.signature?.isEmpty()) {
      this.signature?.save('Png', 'MySignature');
    }
  }
}

模式 2：通过状态管理实现撤销/重做

change(): void {
  this.undoButton.disabled = !this.signature?.canUndo();
  this.redoButton.disabled = !this.signature?.canRedo();
  this.clearButton.disabled = this.signature?.isEmpty() ?? true;
}

模式 3：加载并验证签名

loadSignature(): void {
  const base64String = (document.getElementById('signatureInput') as any).value;
  try {
    this.signature?.load(base64String);
  } catch (error) {
    console.error('Invalid signature format');
  }
}

关键属性

属性	类型	默认值	用途
strokeColor	string	'#000000'	笔画颜色
backgroundColor	string	'#ffffff'	画布背景颜色
backgroundImage	string	''	背景图像 URL ⚠️ 验证并将 URL 加入允许列表；避免使用不可信或用户提供的值，以防止混合内容或开放重定向问题
minStrokeWidth	number	0.5	最小笔画宽度
maxStrokeWidth	number	2.0	最大笔画宽度
velocity	number	0.7	笔画速度系数
saveWithBackground	boolean	false	保存时包含背景
disabled	boolean	false	禁用签名输入
isReadOnly	boolean	false	只读（仅查看）模式
enablePersistence	boolean	false	在重新加载后保留签名
cssClass	string	''	其他 CSS 类

关键方法

方法	用途
undo()	撤销上一个笔画
redo()	重做上一个已撤销的笔画
canUndo()	如果可以撤销，则返回 true
canRedo()	如果可以重做，则返回 true
clear()	清除所有笔画
isEmpty()	如果没有绘制笔画，则返回 true
draw(text, font?, fontSize?)	将文本绘制为签名
save(type?, fileName?)	保存为 PNG/JPEG/SVG 文件
getSignature(type?)	获取 Base64 格式的签名字符串
saveAsBlob(type?)	获取签名的 Blob
getBlob(type?)	返回签名的 Blob
load(signature)	加载 Base64 或 URL 格式的签名
refresh()	刷新并重绘画布
destroy()	销毁组件

关键事件

事件	触发时机	关键参数
(change)	每次笔画完成后	isEmpty
(beforeSave)	执行 save() 前	fileName、fileType、cancel
(created)	组件初始化时	—

常见使用场景

1. 合同/协议签署 — 捕获用户签名并将其保存为 Base64，以便存储在后端
2. 反馈表单 — 嵌入签名字段，并提供清除/撤销控件
3. 文档审批 — 加载现有签名，并在提交表单前验证签名不为空
4. 工具栏驱动的签名 — 完整工具栏，包含颜色选择器、笔画宽度、撤销/重做和保存
5. 以编程方式生成签名 — 通过 draw() 方法将输入的姓名绘制为经过样式设计的签名

---

如需详细实现说明，请从 references/signature-getting-started.md 开始

---

复选框

Syncfusion Angular 复选框（ejs-checkbox）是一种图形化 UI 元素，可让用户选择一个或多个选项。它支持选中、未选中和不确定状态、灵活的标签位置、多种尺寸、与 ngModel 双向绑定、全面符合无障碍标准，以及丰富的 CSS 自定义功能。

软件包： @syncfusion/ej2-angular-buttons
选择器： ejs-checkbox
模块： CheckBoxModule

组件概述

复选框组件提供：

• 三种状态： 选中、未选中和不确定（部分选中）
• 标签控制： 可设置标题文本及其前置或后置位置
• 多种尺寸： 默认尺寸和小尺寸（e-small）
• 表单支持： 用于 HTML 表单提交的 name/value 属性，以及 ngModel 双向绑定
• 无障碍支持： 符合 WCAG 2.2 和 Section 508 标准，支持键盘导航（空格键）和屏幕阅读器
• 自定义样式： 通过 CSS 类设置颜色变体、圆形边框和自定义勾选图标
• RTL 支持： 从右向左渲染

文档和导航指南

⚠️ Agent 使用提示： 只阅读与你的任务相关的章节——不要自动依次阅读所有参考资料。

开始使用

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

• 通过 ng add 安装 @syncfusion/ej2-angular-buttons
• 在独立组件的 imports[] 中导入 CheckBoxModule
• 导入 CSS 主题（material 主题）
• 最小化的 ejs-checkbox 配置和运行应用
• 选中、未选中和不确定状态

标签和尺寸

📄 阅读： references/checkbox-label-and-size.md

• 使用 label 属性设置标题文本
• labelPosition（"Before" / "After"）
• 通过 cssClass="e-small" 设置小尺寸
• 默认尺寸与小尺寸示例

样式和外观

📄 阅读： references/checkbox-style-and-appearance.md

• 通过 cssClass 自定义颜色变体（primary、success、warning、danger、info）
• 自定义复选框边框形状（使用 e-custom 设置圆形复选框）
• 使用 e-checkicon 自定义勾选图标
• 用于覆盖外观的 CSS 规则

无障碍支持和 RTL

📄 阅读： references/checkbox-accessibility.md

• 符合 WCAG 2.2 / Section 508 标准
• WAI-ARIA 属性（aria-disabled）
• 键盘导航（空格键）
• 支持从右向左（enableRtl）显示
• 屏幕阅读器支持

操作指南

📄 阅读： references/checkbox-how-to.md

• 在表单提交中使用 name 和 value
• 使用 ngModel 进行双向绑定
• 启用从右向左显示
• 自定义复选框外观变体

API 参考

📄 阅读： references/checkbox-api.md

• 所有属性：checked、cssClass、disabled、enableHtmlSanitizer、enablePersistence、enableRtl、htmlAttributes、indeterminate、label、labelPosition、locale、name、value
• 方法：click()、destroy()、focusIn()
• 事件：change、created

快速入门示例

import { CheckBoxModule } from '@syncfusion/ej2-angular-buttons';
import { Component } from '@angular/core';

@Component({
  imports: [CheckBoxModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="e-section-control">
      <ejs-checkbox label="Default"></ejs-checkbox>
    </div>`
})
export class AppComponent { }

CSS 主题设置（styles.css）：

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';

常见模式

选中、未选中和不确定状态

@Component({
  imports: [CheckBoxModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <ul>
      <li><ejs-checkbox label="Checked" [checked]="true"></ejs-checkbox></li>
      <li><ejs-checkbox label="Unchecked"></ejs-checkbox></li>
      <li><ejs-checkbox label="Indeterminate" [indeterminate]="true"></ejs-checkbox></li>
    </ul>`
})
export class AppComponent { }

更改事件处理程序

import { CheckBoxModule, ChangeEventArgs } from '@syncfusion/ej2-angular-buttons';
import { Component } from '@angular/core';

@Component({
  imports: [CheckBoxModule],
  standalone: true,
  selector: 'app-root',
  template: `<ejs-checkbox label="Subscribe" (change)="onChange($event)"></ejs-checkbox>`
})
export class AppComponent {
  onChange(args: ChangeEventArgs): void {
    console.log('Checked:', args.checked);
  }
}

使用 Name 和 Value 提交表单

@Component({
  imports: [CheckBoxModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <form>
      <ejs-checkbox name="Sport" value="Cricket" label="Cricket" [checked]="true"></ejs-checkbox>
      <ejs-checkbox name="Sport" value="Hockey" label="Hockey" [checked]="true"></ejs-checkbox>
      <ejs-checkbox name="Sport" value="Tennis" label="Tennis" [disabled]="true"></ejs-checkbox>
      <button type="submit">Submit</button>
    </form>`
})
export class AppComponent { }

使用 ngModel 进行双向绑定

import { CheckBoxModule } from '@syncfusion/ej2-angular-buttons';
import { FormsModule } from '@angular/forms';
import { Component } from '@angular/core';

@Component({
  imports: [CheckBoxModule, FormsModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <ejs-checkbox [(ngModel)]="isChecked" label="Enable Feature"></ejs-checkbox>
    <p>State: {{ isChecked }}</p>`
})
export class AppComponent {
  public isChecked: boolean = false;
}

主要属性

属性	类型	默认值	用途
label	string	''	复选框旁的说明文字
checked	boolean	false	选中状态
indeterminate	boolean	false	不确定（部分选中）状态
disabled	boolean	false	禁用状态
labelPosition	'Before' | 'After'	'After'	标签位置
cssClass	string	''	自定义 CSS 类
name	string	''	表单字段名称
value	string	''	表单字段值
enableRtl	boolean	false	从右向左渲染
enablePersistence	boolean	false	通过浏览器 localStorage 在页面重新加载后保留状态 ⚠️ 请勿对敏感或安全关键状态启用此功能
htmlAttributes	object	{}	附加 HTML 属性

主要方法

方法	用途
click()	以编程方式切换复选框状态
focusIn()	将焦点设为复选框元素
destroy()	销毁组件实例

主要事件

事件	触发时机	主要参数
(change)	选中状态变化时	checked、event
(created)	组件初始化时	—

常见用例

1. 多选表单字段 — 使用 name/value 将复选框分组，以便提交表单 POST
2. 全选／不确定状态 — 根据子项状态设置父复选框的 [indeterminate]
3. 功能开关 — 使用 ngModel 双向绑定单个复选框
4. 无障碍表单 — 支持键盘和屏幕阅读器的 WCAG 合规复选框
5. 样式化复选框 — 通过 cssClass 设置圆形或不同颜色的复选框

---

详细实现说明，请从 references/checkbox-getting-started.md 开始

OTP 输入框

用于实现和自定义 Syncfusion Angular ejs-otpinput 组件的专项指南 — 这是一种多输入框控件，专为一次性密码（OTP）和验证码输入流程设计。

包： @syncfusion/ej2-angular-inputs
选择器： ejs-otpinput
模块： OtpInputModule

导航指南

入门

📄 阅读： references/getting-started.md

• 通过 ng add 安装
• Angular 独立组件与模块设置
• 基本组件渲染
• CSS/SCSS 主题导入
• autoFocus 和预填值

输入类型和值

📄 阅读： references/input-types-and-value.md

• Number 类型（仅数字，默认）
• Text 类型（字母数字 OTP）
• Password 类型（掩码输入）
• textTransform（大写／小写／不转换）
• 设置和读取 value 属性

外观与布局

📄 阅读： references/appearance.md

• 配置 OTP 长度
• 禁用状态
• CSS 类（e-success、e-warning、e-error）
• 字段间分隔符
• 占位符（单个字符或每个字段分别设置的字符串）
• 样式模式：轮廓、填充、下划线

事件

📄 阅读： references/events.md

• created — 组件就绪
• focus / blur — 字段焦点事件
• input — 每个字符的变更
• valueChanged — OTP 全部输入或发生变更
• 实用场景：OTP 输入完成后进行验证和提交

无障碍

📄 阅读： references/accessibility.md

• WCAG 2.2 / Section 508 / ADA 合规性表格
• ARIA 属性（role=group、aria-label）
• ariaLabels 属性，用于设置每个字段的屏幕阅读器文本
• 使用 htmlAttributes 添加额外的 HTML 属性
• 键盘导航快捷键
• RTL 支持（enableRtl）

API 参考

📄 阅读： references/api.md

• 所有属性及其类型和默认值
• 方法：focusIn、focusOut、destroy
• 所有事件及其参数接口
• 枚举类型：OtpInputStyle、OtpInputType、TextTransform

---

快速开始

// app.ts (Angular 19+ standalone)
import { Component } from '@angular/core';
import { OtpInputModule } from '@syncfusion/ej2-angular-inputs';

@Component({
  standalone: true,
  imports: [OtpInputModule],
  selector: 'app-root',
  template: `
    <div style="width: 350px;">
      <div ejs-otpinput
        id="otpinput"
        [length]="6"
        placeholder="x"
        (valueChanged)="onOtpComplete($event)">
      </div>
    </div>
  `
})
export class AppComponent {
  onOtpComplete(args: any) {
    console.log('OTP entered:', args.value);
  }
}

/* styles.css */
@import '@syncfusion/ej2-base/styles/material3.css';
@import '@syncfusion/ej2-inputs/styles/material3.css';

---

常见模式

数字 PIN（4 位）

<div ejs-otpinput [length]="4" type="number"></div>

掩码密码输入

<div ejs-otpinput [length]="6" type="password"></div>

带分隔符和填充样式的 OTP

<div ejs-otpinput [length]="6" separator="-" stylingMode="filled"></div>

OTP 填写完成后自动提交

<div ejs-otpinput [length]="6" (valueChanged)="submitOtp($event)"></div>

验证失败后的错误状态

<div ejs-otpinput [length]="6" cssClass="e-error" [disabled]="false"></div>

带 ARIA 标签的无障碍 OTP

<div ejs-otpinput
  [length]="4"
  [ariaLabels]="['Digit 1', 'Digit 2', 'Digit 3', 'Digit 4']">
</div>

实现 Syncfusion Angular Range Slider

Range Slider 是 Syncfusion EJ2 Angular 提供的一种多功能输入组件，可让用户从连续范围中选择单个值或一段范围。它支持多种滑块类型、自定义格式、键盘导航和高级无障碍功能。

组件概览

Syncfusion Angular Range Slider（ejs-slider）提供：

• 三种滑块类型： Default（单值）、MinRange（从起始值到当前值）、Range（双滑块）
• 方向： 水平和垂直
• 交互元素： 工具提示、递增／递减按钮、刻度标记、限制
• 高级功能： 自定义格式、键盘快捷键、RTL 支持
• 全面的无障碍支持： WCAG 2.2、Section 508、键盘导航、ARIA 属性
• 表单集成： 支持响应式表单和模板驱动表单

滑块类型一览

类型	使用场景	滑块数	外观
Default	选择单个值	1	带一个滑块的普通滑块
MinRange	从起始值到当前值的范围	1	显示从最小值到滑块之间的选中范围
Range	选择最小值／最大值范围	2	显示两个滑块之间的选中范围

文档与导航指南

开始使用

📄 阅读： references/getting-started.md

• 安装 @syncfusion/ej2-angular-inputs
• 软件包设置和导入
• CSS 主题配置
• 第一个可运行示例
• 了解滑块类型概览

滑块类型与方向

📄 阅读： references/slider-types-and-orientation.md

• 何时使用 Default、MinRange 或 Range 类型
• 水平滑块实现（默认）
• 适用于节省空间布局的垂直滑块
• 实用实现示例
• 类型选择决策矩阵

刻度、标记与限制

📄 阅读： references/ticks-and-limits.md

• 在滑块轨道上添加刻度标记
• 配置刻度标签和格式
• 设置最小值／最大值限制和边界
• 配置步长值
• 自定义刻度位置

工具提示与按钮

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

• 启用／禁用工具提示
• 工具提示位置（Before、After、Above、Below）
• 设置递增／递减按钮
• 按钮在范围滑块中的行为
• 键盘焦点管理

格式与值显示

📄 阅读： references/formatting-and-values.md

• 用于数字、百分比和货币格式的 Format API
• 通过事件自定义值格式
• 国际化支持
• 使用 renderingTicks 事件转换标签
• 使用 tooltipChange 事件自定义工具提示

样式与自定义

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

• 用于轨道、滑块、按钮和刻度的 CSS 类
• 自定义颜色和尺寸
• Theme Studio 集成
• RTL（从右到左）语言支持
• 响应式设计模式

表单、验证与无障碍

📄 阅读： references/form-integration-and-accessibility.md

• 使用 FormControl 的响应式表单
• 使用 ngModel 的模板驱动表单
• 表单验证和错误状态
• 符合 WCAG 2.2 和 Section 508
• 键盘快捷键（方向键、Home、End、PageUp／PageDown）
• ARIA 属性和屏幕阅读器支持

高级场景

📄 阅读： references/advanced-scenarios.md

• 日期范围滑块的实现
• 时间范围滑块的实现
• 带格式设置的数值范围滑块
• 从隐藏状态显示滑块
• 性能优化技巧
• 常见问题与故障排除

API 参考

📄 阅读： references/api.md

• 完整的属性列表（value、type、min、max、step、orientation、ticks、tooltip、limits、colorRange、enabled、readonly、showButtons、customValues、enableRtl、cssClass、width、enableAnimation、enablePersistence）
• 所有事件（change、changed、created、renderingTicks、renderedTicks、tooltipChange）
• 方法（destroy、reposition）
• 数据模型：TicksDataModel、TooltipDataModel、LimitDataModel、ColorRangeDataModel
• EJ1 → EJ2 迁移表
• 仅使用文档所述 API 的已验证代码示例

快速入门示例

这是一个适用于 Angular 21+（独立模式）的最简范围滑块：

import { SliderModule } from '@syncfusion/ej2-angular-inputs';
import { Component } from '@angular/core';

@Component({
  imports: [SliderModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div id="container">
      <h3>Range Slider</h3>
      <ejs-slider 
        id="range-slider"
        type="Range"
        [min]="0"
        [max]="100"
        [value]="[20, 80]"
        (change)="onSliderChange($event)">
      </ejs-slider>
      <p>Selected range: {{ selectedRange | json }}</p>
    </div>
  `,
  styles: [`
    #container {
      padding: 20px;
    }
    ejs-slider {
      width: 300px;
    }
  `]
})
export class App {
  selectedRange = [20, 80];

  onSliderChange(event: any) {
    this.selectedRange = event.value;
    console.log('Range changed:', this.selectedRange);
  }
}

CSS 主题设置（在 styles.css 中）：

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

常见模式

模式 1：带限制的范围滑块

<ejs-slider 
  type="Range"
  [min]="0"
  [max]="100"
  [value]="[25, 75]"
  [limits]="{ enabled: true, minStart: 10, minEnd: 90 }">
</ejs-slider>

模式 2：带刻度和工具提示的滑块

<ejs-slider 
  type="Default"
  [value]="50"
  [ticks]="{ placement: 'Before', largeStep: 10, smallStep: 5 }"
  [tooltip]="{ isVisible: true, placement: 'After' }">
</ejs-slider>

模式 3：垂直滑块

<ejs-slider 
  type="Range"
  [value]="[30, 70]"
  orientation="Vertical"
  [style.height]="'300px'">
</ejs-slider>

模式 4：百分比格式滑块

<ejs-slider 
  type="Range"
  [value]="[20, 80]"
  [ticks]="{ format: 'P0' }"
  [tooltip]="{ format: 'P0' }">
</ejs-slider>

主要属性与配置

属性

属性	类型	默认值	用途
type	string	'Default'	滑块类型：'Default'、'MinRange'、'Range'
value	number | number[]	null	当前值；Range 类型使用 number[]
min	number	0	滑块的最小值
max	number	100	滑块的最大值
step	number	1	每次交互的递增／递减量
orientation	string	'Horizontal'	'Horizontal' 或 'Vertical'
ticks	TicksDataModel	—	刻度线（位置、largeStep、smallStep、格式）
tooltip	TooltipDataModel	—	工具提示（isVisible、placement、showOn、format）
limits	LimitDataModel	—	限制滑块手柄的移动；必须设置 enabled: true
colorRange	ColorRangeDataModel[]	—	应用于轨道的颜色分段
enabled	boolean	true	启用／禁用滑块
readonly	boolean	false	显示值，但阻止用户交互
showButtons	boolean	false	显示递增／递减按钮
enableRtl	boolean	false	从右向左渲染
customValues	string[] | number[]	null	离散值数组；覆盖 min/max/step
cssClass	string	''	滑块宿主元素上的自定义 CSS 类
width	number | string	null	滑块宽度（px 或 CSS 字符串）
enableAnimation	boolean	true	对滑块手柄移动应用动画
enablePersistence	boolean	false	在重新加载后通过 localStorage 保留值
locale	string	''	值格式设置的语言区域覆盖项

事件

事件	触发时机	参数的关键属性
(change)	拖动期间（连续触发）	args.value、args.previousValue
(changed)	拖动完成后（触发一次）	args.value、args.previousValue
(created)	滑块初始化时	—
(renderingTicks)	每个刻度渲染时	args.value，设置 args.text
(renderedTicks)	所有刻度渲染完成后	args.ticksWrapper（DOM）
(tooltipChange)	工具提示即将显示时	args.value，设置 args.text

方法（通过 @ViewChild）

方法	返回值	用途
reposition()	void	从隐藏状态显示后重新渲染
destroy()	void	移除组件并分离事件侦听器

常见用例

用例 1：价格筛选

• 类型：Range
• 范围：$0-$1000，步长为 $100
• 格式：货币（例如，“$250”）
• 工具提示：显示货币格式

用例 2：日期范围选择器

• 类型：Range
• 范围：0-365（天）
• 格式：自定义（将数字转换为日期字符串）
• 刻度：每月间隔

用例 3：音量控制

• 类型：Default
• 范围：0-100
• 格式：百分比（0% - 100%）
• 方向：垂直

用例 4：带验证的表单输入

• 类型：Range
• 集成：Reactive FormControl
• 验证：最小值 20，最大值 80
• 在无效状态下显示错误

后续步骤

1. 从入门指南开始 - 设置组件并了解类型
2. 选择滑块类型 - 阅读“滑块类型与方向”
3. 配置功能 - 按需添加刻度、工具提示和按钮
4. 格式化值 - 实现百分比、货币或自定义格式
5. 添加无障碍支持 - 查看键盘导航和 ARIA 属性
6. 设置样式并自定义 - 应用主题并自定义 CSS
7. 与表单集成 - 绑定到 FormControl 或 ngModel 并进行验证
8. 处理边缘情况 - 查看高级场景和故障排除

---

如需了解详细实现，请从 入门指南 开始

Syncfusion Angular TextArea 组件

Syncfusion Angular TextArea（ejs-textarea）提供功能丰富的多行文本输入，支持浮动标签、调整大小模式、装饰元素、表单集成和完整的无障碍支持。

导航指南

入门

📄 阅读： 入门指南

• 安装软件包（@syncfusion/ej2-angular-inputs）
• 设置独立的 Angular 19+ 组件
• 导入 CSS/主题
• 渲染基本 TextArea
• 获取和设置值（value 属性、ngModel、change 事件）

配置

📄 阅读： 配置

• 浮动标签（floatLabelType：Auto / Always / Never）
• 带本地化的占位符（locale 属性）
• 行数和列数（rows / cols 属性）
• 最大长度（maxLength 属性）
• 调整大小模式（resizeMode：Vertical / Horizontal / Both / None）
• 宽度自定义（width 属性）

装饰元素

📄 阅读： 装饰元素

• 添加前置/后置自定义模板（prependTemplate / appendTemplate）
• 装饰元素流向和方向（adornmentFlow / adornmentOrientation）
• 常见模式：图标、格式设置按钮、操作按钮

事件

📄 阅读： 事件

• created、destroyed 生命周期事件
• input — 实时值变化（InputEventArgs）
• change — 失焦时值发生变化（ChangedEventArgs）
• focus / blur — 焦点状态事件（FocusInEventArgs / FocusOutEventArgs）

样式与外观

📄 阅读： 样式与外观

• 尺寸变体（e-small、e-bigger）
• 填充和轮廓模式（e-filled、e-outline）
• 通过 cssClass 属性自定义 CSS
• 禁用（enabled: false）和只读（readonly: true）状态
• 显示/隐藏清除按钮（showClearButton）
• 圆角、静态清除按钮、RTL（enableRtl）
• 自定义背景、文本和边框颜色
• 验证状态下的浮动标签颜色

表单支持

📄 阅读： 表单支持

• HTML 表单集成
• FormValidator 集成（required、minLength、maxLength、pattern）
• 状态持久化（enablePersistence）
• 自定义 HTML 属性（htmlAttributes）

API 参考

📄 阅读： API 参考

• 所有属性、方法和事件及其类型和默认值
• 枚举类型：FloatLabelType、Resize、AdornmentsDirection

快速入门

ng add @syncfusion/ej2-angular-inputs

import { Component } from '@angular/core';
import { TextAreaModule } from '@syncfusion/ej2-angular-inputs';

@Component({
  standalone: true,
  imports: [TextAreaModule],
  selector: 'app-root',
  template: `
    <ejs-textarea
      id="comments"
      placeholder="Enter your comments"
      [floatLabelType]="'Auto'"
      [rows]="4"
      [maxLength]="500">
    </ejs-textarea>
  `
})
export class AppComponent {}

/* styles.css */
@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material3.css';

常见模式

使用 ngModel 双向绑定

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { TextAreaModule } from '@syncfusion/ej2-angular-inputs';

@Component({
  standalone: true,
  imports: [TextAreaModule, FormsModule],
  selector: 'app-root',
  template: `<ejs-textarea [(ngModel)]="comment" placeholder="Add comment"></ejs-textarea>`
})
export class AppComponent {
  comment: string = '';
}

禁用文本区域

<ejs-textarea [enabled]="false" value="Read-only content"></ejs-textarea>

调整大小控制

<ejs-textarea resizeMode="Vertical" [rows]="4"></ejs-textarea>


<ejs-textarea resizeMode="None" [rows]="4" [cols]="50"></ejs-textarea>

带浮动标签

<ejs-textarea floatLabelType="Auto" placeholder="Description"></ejs-textarea>

ColorPicker

Syncfusion Angular ColorPicker 让用户通过可视化选择器（HSV + 不透明度）或色板选取颜色。默认情况下，它以 SplitButton 形式呈现（打开弹出窗口），也支持内联呈现，并支持 RGB、HSV 和 Hex 颜色格式。

包： @syncfusion/ej2-angular-inputs
组件： <ejs-input ejs-colorpicker type="color">

导航指南

入门

📄 阅读： references/getting-started.md

• 使用 Vite 或 Angular CLI 安装
• npm 包设置
• CSS 主题导入
• 最简可运行示例
• 运行应用程序

模式和颜色值

📄 阅读： references/modes-and-value.md

• 内联呈现与弹出窗口（SplitButton）
• 选择器模式与色板模式
• 设置初始颜色值（十六进制代码）
• 不透明度支持
• 仅呈现色板（锁定模式）

色板功能

📄 阅读： references/palette-features.md

• 自定义调色板（presetColors）
• 自定义色板色块呈现（beforeTileRender）
• 无颜色／清除颜色支持（noColor）
• 自定义无颜色选项
• 显示最近使用的颜色（showRecentColors）
• 色板列数（columns）

UI 自定义

📄 阅读： references/ui-customization.md

• 隐藏输入值区域
• 自定义选择器手柄
• 带图标的自定义主按钮
• 在输入元素中显示十六进制代码
• 隐藏控制按钮（应用／取消）
• CSS 类覆盖和 Theme Studio
• 使用 SplitButton 和 Dialog 构建类似 Excel 的自定义 UI

集成与高级功能

📄 阅读： references/integration-and-advanced.md

• 在 DropDownButton 中嵌入 ColorPicker
• 弹出窗口切换控制
• 页面重新加载后保持状态
• 模式切换器的显示与事件
• 禁用状态

本地化和 RTL

📄 阅读： references/localization-and-rtl.md

• 本地化应用／取消／ModeSwitcher 标签
• 使用 L10n 加载翻译对象
• 从右到左呈现（enableRtl）

无障碍

📄 阅读： references/accessibility.md

• 符合 WCAG 2.2 / Section 508 标准
• WAI-ARIA 属性
• 键盘导航快捷键
• 无障碍验证

API 参考

📄 阅读： references/api.md

• 所有属性及其类型和默认值
• 所有方法及其签名
• 所有事件及其负载类型

---

快速开始

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

/* src/styles.css */
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-angular-inputs/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";

import { Component } from '@angular/core';
import { ColorPickerModule } from '@syncfusion/ej2-angular-inputs';

@Component({
  selector: 'app-root',
  template: `
    <div id="container">
      <div class="wrap">
        <h4>Choose Color</h4>
        <ejs-input ejs-colorpicker type="color" id="color-picker"></ejs-colorpicker>
      </div>
    </div>
  `,
  standalone: true,
  imports: [ ColorPickerModule]
})
export class AppComponent {}

---

常见模式

内联选择器（无弹出窗口）

<ejs-input ejs-colorpicker type="color" [inline]="true" [showButtons]="false"></ejs-colorpicker>

仅色板模式

<ejs-input ejs-colorpicker type="color" mode="Palette" [modeSwitcher]="false" [showButtons]="false"></ejs-colorpicker>

设置初始颜色并处理更改

import { Component } from '@angular/core';
import { ColorPickerEventArgs, ColorPickerModule } from '@syncfusion/ej2-angular-inputs';

@Component({
  selector: 'app-root',
  template: `
    <ejs-input ejs-colorpicker type="color" [value]="colorValue" (change)="onChange($event)"></ejs-colorpicker>
  `,
  standalone: true,
  imports: [ ColorPickerModule]
})
export class AppComponent {
  public colorValue: string = '#ff5733';

  public onChange(args: ColorPickerEventArgs): void {
    console.log(args.currentValue.hex);  // e.g. "#ff5733"
    console.log(args.currentValue.rgba); // e.g. "rgba(255,87,51,1)"
  }
}

使用预设颜色自定义调色板

import { Component } from '@angular/core';
import { ColorPickerModule } from '@syncfusion/ej2-angular-inputs';

@Component({
  selector: 'app-root',
  template: `
    <ejs-input ejs-colorpicker type="color"
      mode="Palette"
      [presetColors]="presets"
      [columns]="4"
      [modeSwitcher]="false"
      [inline]="true"
      [showButtons]="false"
    ></ejs-colorpicker>
  `,
  standalone: true,
  imports: [ ColorPickerModule]
})
export class AppComponent {
  public presets: { [key: string]: string[] } = {
    brand: ['#0078d4', '#106ebe', '#005a9e', '#004578'],
    accents: ['#e81123', '#ff8c00', '#00b294', '#68217a']
  };
}

禁用不透明度滑块

<ejs-input ejs-colorpicker type="color" [enableOpacity]="false"></ejs-colorpicker>

无颜色支持（清除所选内容）

<ejs-input ejs-colorpicker type="color"
  mode="Palette"
  [noColor]="true"
  [modeSwitcher]="false"
  [showButtons]="false"
></ejs-colorpicker>

本地化（德语）

import { Component } from '@angular/core';
import { L10n } from '@syncfusion/ej2-base';
import { ColorPickerModule } from '@syncfusion/ej2-angular-inputs';

L10n.load({
  'de-DE': {
    colorpicker: {
      Apply: 'Anwenden',
      Cancel: 'Abbrechen',
      ModeSwitcher: 'Modus wechseln'
    }
  }
});

@Component({
  selector: 'app-root',
  template: `
    <ejs-input ejs-colorpicker type="color" locale="de-DE"></ejs-colorpicker>
  `,
  standalone: true,
  imports: [ ColorPickerModule]
})
export class AppComponent {}

---

关键属性

属性	类型	默认值	用途
value	string	'#008000ff'	初始颜色（3/4/6/8 位十六进制值）
mode	'Picker' | 'Palette'	'Picker'	初始显示的面板
inline	boolean	false	直接渲染组件（不显示弹出窗口）
showButtons	boolean	true	显示“应用”和“取消”按钮
modeSwitcher	boolean	true	显示模式切换按钮
noColor	boolean	false	在调色板中添加“无颜色”色块
presetColors	object	null	调色板的自定义颜色组
columns	number	10	调色板的列数
enableOpacity	boolean	true	显示不透明度滑块
showRecentColors	boolean	false	显示最近使用的颜色色块（仅调色板模式）
disabled	boolean	false	禁用组件
cssClass	string	''	根元素上的自定义 CSS 类
enableRtl	boolean	false	从右向左渲染
locale	string	''	用于本地化的区域设置字符串

MaskedTextBox

Syncfusion Angular MaskedTextBox 组件通过应用掩码模式来限定特定的输入格式，引导用户按照正确的结构输入数据。它适用于电话号码、邮政编码、日期、IP 地址、产品密钥，以及任何需要遵循预定义格式的输入场景。

导航指南

入门

📄 阅读： references/getting-started.md

• 通过 npm 安装（@syncfusion/ej2-angular-inputs）
• 使用 MaskedTextBoxModule 设置 Angular 模块
• 导入主题 CSS
• 渲染基本的 MaskedTextBox
• 设置 mask 属性以强制执行格式

掩码配置

📄 阅读： references/mask-configuration.md

• 标准掩码元素标记（0、9、#、L、?、&、C、A、a、<、>、|、\）
• 通过 customCharacters 属性自定义字符
• 使用正则表达式掩码匹配灵活的模式（例如，IP 地址）
• 通过 promptChar 自定义提示字符

装饰元素（前置／后置元素）

📄 阅读： references/adornments.md

• 使用 ng-template 在输入框前后添加图标或按钮
• 输入引导、快捷操作和上下文标签
• 模板绑定示例

Angular 集成

📄 阅读： references/angular-integration.md

• 使用 ngModel 进行双向绑定
• 使用 FormControl 创建响应式表单
• 组件生命周期钩子（ngOnInit、ngOnDestroy）
• 在 Angular 组件中处理 change 事件
• 使用模板引用变量进行编程式访问

样式、外观与自定义

📄 阅读： references/style-and-customization.md

• 使用 cssClass 自定义样式
• 使用 CSS 覆盖包装器、悬停和聚焦状态
• 通过 focus 事件设置聚焦时的光标位置（selectionStart、selectionEnd）
• 使用 type="tel" 在移动设备上显示数字键盘
• floatLabelType 选项（Never、Always、Auto）

表单验证

📄 阅读： references/form-validation.md

• 与 Syncfusion FormValidator 集成
• 定义自定义验证规则
• 使用 customPlacement 自定义错误提示位置
• 使用 promptChar 检查不完整的掩码值

API 参考

📄 阅读： references/api.md

• 所有属性：mask、value、placeholder、floatLabelType、promptChar、customCharacters、cssClass、enabled、readonly、showClearButton、enableRtl、enablePersistence、htmlAttributes、locale、width
• 方法：focusIn()、focusOut()、getMaskedValue()、destroy()、getPersistData()
• 事件：change、focus、blur、created、destroyed

快速入门

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MaskedTextBoxModule } from '@syncfusion/ej2-angular-inputs';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, MaskedTextBoxModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  mask: string = '000-000-0000';
}

app.component.html

<ejs-maskedtextbox
  [mask]="mask"
  placeholder="Enter phone number"
  floatLabelType="Auto">
</ejs-maskedtextbox>

常见模式

电话号码输入

<ejs-maskedtextbox
  mask="000-000-0000"
  placeholder="Phone"
  floatLabelType="Always">
</ejs-maskedtextbox>

使用正则表达式掩码的 IP 地址

<ejs-maskedtextbox
  mask="[0-2][0-9][0-9].[0-2][0-9][0-9].[0-2][0-9][0-9].[0-2][0-9][0-9]"
  placeholder="IP Address (ex: 212.212.111.222)"
  floatLabelType="Always">
</ejs-maskedtextbox>

自定义 AM/PM 时间输入

// app.component.ts
export class AppComponent {
  customChars: { [key: string]: string } = {
    P: 'P,A,p,a',
    M: 'M,m'
  };
}

<ejs-maskedtextbox
  mask="00:00 >PM"
  [customCharacters]="customChars"
  placeholder="Time (ex: 10:00 PM)"
  floatLabelType="Always">
</ejs-maskedtextbox>

以编程方式读取掩码值

// app.component.ts
import { ViewChild } from '@angular/core';

export class AppComponent {
  @ViewChild('maskInput') maskInput: any;

  getMaskedValue(): void {
    const maskedVal = this.maskInput.getMaskedValue(); // e.g., "123-456-7890"
    const rawVal = this.maskInput.value;               // e.g., "1234567890"
  }
}

<ejs-maskedtextbox
  #maskInput
  mask="000-000-0000"
  placeholder="Phone">
</ejs-maskedtextbox>

使用 ngModel 进行双向绑定

// app.component.ts
export class AppComponent {
  phone: string = '';

  onPhoneChange(event: any): void {
    console.log('Phone changed to:', this.phone);
  }
}

<ejs-maskedtextbox
  [(ngModel)]="phone"
  mask="000-000-0000"
  (change)="onPhoneChange($event)"
  placeholder="Phone"
  floatLabelType="Auto">
</ejs-maskedtextbox>

评分

Syncfusion Angular Rating 组件可让用户从一组可视符号（默认为星形）中选择评分值。它支持精度模式、自定义模板、工具提示、标签、重置、只读/禁用状态、完整的无障碍访问支持，以及丰富的 CSS 自定义选项。

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

---

导航指南

开始使用

📄 阅读： references/getting-started.md

• 安装 @syncfusion/ej2-angular-inputs
• Tailwind3 的 CSS 主题导入
• 在 AppModule 中进行最简 Rating 组件设置
• 设置初始 value 属性
• 运行 Angular 应用

选择与重置

📄 阅读： references/selection.md

• 使用 value 设置评分值
• 使用 min 设置最低评分值
• 使用 enableSingleSelection 启用单选模式
• 使用 allowReset 显示/隐藏重置按钮
• 编程式 reset() 方法

精度模式

📄 阅读： references/precision-modes.md

• PrecisionType.Full — 以整数递增
• PrecisionType.Half — 以 0.5 递增
• PrecisionType.Quarter — 以 0.25 递增
• PrecisionType.Exact — 以 0.1 递增
• 将精度与初始值结合使用

外观与自定义

📄 阅读： references/appearance.md

• 使用 itemsCount 控制项目数量
• 使用 disabled 禁用组件
• 使用 visible 隐藏/显示组件
• 使用 readOnly 启用只读模式
• 使用 cssClass 自定义 CSS（边框颜色、填充颜色、项目间距、图标）
• 通过 CSS 更改评分图标

标签

📄 阅读： references/labels.md

• 使用 showLabel 显示当前值标签
• labelPosition 选项：Top、Bottom、Left、Right
• 使用 labelTemplate 自定义标签内容

工具提示

📄 阅读： references/tooltip.md

• 使用 showTooltip 启用工具提示
• 使用 tooltipTemplate 自定义工具提示内容
• 通过 cssClass 设置工具提示外观

模板

📄 阅读： references/templates.md

• 用于未评分项目的 emptyTemplate
• 用于已评分项目的 fullTemplate
• Emoji 评分符号
• SVG 图标评分符号
• PNG 图片评分符号
• 通过 --rating-value 在模板中支持精度

事件

📄 阅读： references/events.md

• beforeItemRender — 在渲染前自定义项目
• created — 组件初始化后触发
• onItemHover — 跟踪悬停的项目
• valueChanged — 响应用户评分更改

无障碍访问

📄 阅读： references/accessibility.md

• 符合 WCAG 2.2 / Section 508 / ADA 标准
• WAI-ARIA 属性（role=slider、aria-valuemin/max/now）
• 键盘导航快捷键
• 使用 enableRtl 支持 RTL
• 屏幕阅读器支持

API 参考

📄 阅读： references/api.md

• 所有属性、方法和事件及其类型与默认值
• RatingItemEventArgs、RatingHoverEventArgs、RatingChangedEventArgs
• LabelPosition 和 PrecisionType 枚举

---

快速入门

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

/* src/styles.css */
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-angular-inputs/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RatingModule } from '@syncfusion/ej2-angular-inputs';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, RatingModule],
  bootstrap: [AppComponent],
})
export class AppModule { }

<input ejs-rating id="rating" [value]="3"></ejs-rating>

---

常见模式

带值更改处理程序的评分

import { Component } from '@angular/core';
import { RatingModule } from '@syncfusion/ej2-angular-inputs';
import { RatingChangedEventArgs } from '@syncfusion/ej2-angular-inputs';

@Component({
  selector: 'app-root',
  template: `<input ejs-rating id="rating" [value]="rating" (valueChanged)="onValueChanged($event)"></ejs-rating>`,
  standalone: true,
  imports: [RatingModule],
})
export class AppComponent {
  rating: number = 3;

  onValueChanged(args: RatingChangedEventArgs) {
    this.rating = args.value;
  }
}

带标签的半精度评分

import { Component } from '@angular/core';
import { RatingModule, PrecisionType } from '@syncfusion/ej2-angular-inputs';

@Component({
  selector: 'app-root',
  template: `
    <input ejs-rating
      id="rating"
      [value]="3.5"
      [precision]="precision"
      [showLabel]="true"
    ></ejs-rating>
  `,
  standalone: true,
  imports: [RatingModule],
})
export class AppComponent {
  precision = PrecisionType.Half;
}

只读评分（仅显示）

import { Component } from '@angular/core';
import { RatingModule } from '@syncfusion/ej2-angular-inputs';

@Component({
  selector: 'app-root',
  template: `
    <input ejs-rating
      id="rating"
      [value]="4"
      [readOnly]="true"
      [showTooltip]="false"
    ></ejs-rating>
  `,
  standalone: true,
  imports: [RatingModule],
})
export class AppComponent { }

带重置按钮的评分

import { Component } from '@angular/core';
import { RatingModule } from '@syncfusion/ej2-angular-inputs';

@Component({
  selector: 'app-root',
  template: `<input ejs-rating id="rating" [value]="3" [allowReset]="true"></ejs-rating>`,
  standalone: true,
  imports: [RatingModule],
})
export class AppComponent { }

---

主要属性一览

属性	类型	默认值	用途
value	number	0.0	当前评分值
itemsCount	number	5	评分项数量
min	number	0.0	可选的最小值
precision	PrecisionType | string	Full	评分粒度
allowReset	boolean	false	显示重置按钮
readOnly	boolean	false	禁止用户交互
disabled	boolean	false	禁用组件
visible	boolean	true	显示/隐藏组件
showLabel	boolean	false	显示当前值标签
labelPosition	LabelPosition | string	Right	标签位置
showTooltip	boolean	true	显示悬停提示
enableSingleSelection	boolean	false	仅选择一个评分项
enableAnimation	boolean	true	悬停动画
enableRtl	boolean	false	从右向左模式
cssClass	string	''	自定义 CSS 类

---