用途
本资料是一份面向开发者的技能指南,主题为在 Angular 项目中实现 Syncfusion Angular TextBox 组件。该组件是一个功能丰富的输入元素,在原生 HTML input 能力之上增加了浮动标签、验证状态、装饰元素、无障碍支持与多样样式选项。
主要能力
资料列出的组件功能包括:
- 浮动标签(Floating Labels):聚焦或已填充时标签浮动显示在输入框上方。
- 验证状态(Validation States):通过 CSS 类提供错误、警告、成功等视觉反馈。
- 装饰元素(Adornments):可在输入框前或后追加自定义 HTML 元素,如图标、按钮、单位。
- 清除按钮(Clear Button):内置重置输入值的清除功能。
- 禁用/只读状态:控制用户交互与可编辑性。
- HTML 属性支持:支持标准输入属性(type、maxlength 等)。
- 多行支持:可配置为 textarea,并设置行/列尺寸。
- 无障碍:资料称符合 WCAG 2.2,支持键盘导航与 ARIA 属性。
- RTL 支持:支持从右到左的语言布局。
- 样式选项:CSS 类、验证颜色、响应式尺寸。
使用方式
资料以快速示例展示基本用法:从 @syncfusion/ej2-angular-inputs 导入 TextBoxModule,在组件中引入该模块,使用 <ejs-textbox> 标签并设置 [floatLabelType]="'Auto'"、placeholder 与 (input) 事件绑定。floatLabelType='Auto' 用于自动浮动标签,placeholder 作为浮动标签文本。
文档被组织为多个参考文件章节:
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:多行 textarea 配置、行列尺寸、响应式尺寸模式、高度调整与约束、字符计数实现、文本换行与溢出处理。references/accessibility-migration.md:WCAG 2.2 与 Section 508 合规、键盘导航、ARIA 属性(aria-labelledby、aria-invalid、aria-disabled)、屏幕阅读器兼容、从 CSS TextBox 迁移到 Angular 组件、RTL 与移动端无障碍。references/api.md:完整 API 摘要。
常见模式(资料示例)
- 带图标装饰的邮箱输入:使用
appendTemplate后置图标模板。 - 密码显隐切换:通过
[type]在 text/password 间切换,配合后置按钮模板与切换方法。 - 验证与错误显示:通过
cssClass绑定 'e-success' 或 'e-error',并在(change)事件中校验,错误时显示提示文本。 - 带单位指示的金额输入:
type="number"配合prependTemplate前置$符号。
关键属性与方法
资料列出的属性包括:floatLabelType、placeholder、value、enabled、readonly、showClearButton、cssClass、htmlAttributes、prependTemplate、appendTemplate、multiline。方法包括:addIcon(position, icons)、addAttributes(attributes)、removeAttributes(names[])、focusIn()/focusOut()、destroy()、getPersistData()。
资料中的注意事项:e-corner 需与 e-outline 配合使用以显示圆角;rows 与 cols 不是组件属性,需在 (created) 事件处理中调用 addAttributes 设置;程序化创建输入可使用 @syncfusion/ej2-inputs 的 Input.createInput。
适用场景
资料列举的典型场景包括:联系表单(多字段、浮动标签、验证状态、必填指示)、带清除按钮的搜索输入、带前后图标前缀的样式输入、带显隐切换的密码字段、多行评论字段(行尺寸与字符计数)、无障碍表单字段(ARIA 属性与键盘支持)。
限制与依赖
资料未提供组件本身的定价、收费或授权信息。使用需在 Angular 项目中安装对应的 Syncfusion 包并导入 CSS 与主题。具体的版本要求、安装命令、包名细节等未在资料中完整展开。