关于 syncfusion-aspnetcore-buttons
syncfusion-aspnetcore-buttons 是面向 ASP.NET Core 开发者的 Syncfusion EJ2 按钮类组件参考技能,涵盖按钮、按钮组、复选框、单选按钮和下拉按钮等控件。内容按入门、配置、API 和无障碍主题组织,便于实现表单与界面操作。
主要功能
- 01涵盖多种按钮与表单控件
- 02提供安装和组件入门指南
- 03说明样式、状态及事件
- 04包含 API 与 Tag Helper 参考
- 05介绍键盘和屏幕阅读器支持
适用场景
- 01在 ASP.NET Core 页面添加操作按钮
- 02为表单配置复选框和单选项
- 03创建工具栏或分段按钮组
- 04查找控件事件与无障碍用法
安装
复制下面的命令,在终端中运行。
npx skills add https:/ / github.com/ syncfusion/ aspnetcore-ui-components-skills --skill syncfusion-aspnetcore-buttons安装后在 Claude Code 中输入/syncfusion-aspnetcore-buttons确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
references/button-accessibility.mdbutton-api.mdbutton-getting-started.mdbutton-how-to.mdbutton-types-and-styles.mdbuttongroup-accessibility.mdbuttongroup-getting-started.mdbuttongroup-how-to.mdbuttongroup-selection-and-nesting.mdbuttongroup-style-and-appearance.mdcheckbox-accessibility.mdcheckbox-api.mdcheckbox-customization.mdcheckbox-features-and-state.mdcheckbox-getting-started.mdcheckbox-label-and-size.mdchips-accessibility.mdchips-api.mdchips-customization.mdchips-drag-and-drop.mdchips-getting-started.mdchips-style.mdchips-types-and-selection.mddropdownbutton-accessibility.mddropdownbutton-api.mddropdownbutton-events-and-interactivity.mddropdownbutton-getting-started.mddropdownbutton-popup-items.mdfloating-action-button-accessibility.mdfloating-action-button-api.md详细介绍
实现 Syncfusion ASP.NET Core 按钮
Button
Button 组件是一种基础操作控件,点击后会触发响应。它支持多种颜色变体(primary、success、danger、warning、info、link)、扁平/轮廓/圆形样式、图标支持、多种尺寸、切换行为、波纹效果,以及完整的表单集成。
导航指南
入门
📄 阅读: references/button-getting-started.md
- 前提条件和 NuGet 包安装
- 在
_ViewImports.cshtml中注册标记帮助程序 - 在
_Layout.cshtml中设置样式表和脚本 CDN - 使用
<ejs-scripts>注册脚本管理器 - 使用
<ejs-button>渲染基本按钮 - 启用波纹效果
- 使用
onclick属性处理点击事件 - 在表单中使用按钮(
type="submit"/type="reset")
类型和样式
📄 阅读: references/button-types-and-styles.md
- 颜色变体(
e-primary、e-success、e-danger、e-warning、e-info、e-link) - 扁平、轮廓和圆形按钮类型
- 图标按钮和图标位置(
iconPosition:Left / Top / Right / Bottom) - 使用
isToggle和toggled状态的切换按钮 - 按钮尺寸(
e-small、e-bigger)
操作指南
📄 阅读: references/button-how-to.md
- 创建块级按钮(全宽)
- 创建圆角按钮
- 将导航链接设置为按钮样式
- 使用 CSS 自定义外观
- 禁用状态
- 使用
enableRtl支持 RTL - 按钮上的工具提示
- 表单提交模式
API 参考
📄 阅读: references/button-api.md
- 完整的属性参考,包括类型和默认值
- 方法(
click、focusIn、destroy) - 事件签名
- CSS 类参考表
- 标记帮助程序属性语法
无障碍访问
📄 阅读: references/button-accessibility.md
- 符合 WCAG 2.2 AA 标准
- 语义化 HTML 和 WAI-ARIA 属性
- 键盘导航(Tab、Enter、Space)
- 焦点管理和可见的焦点指示器
- 仅图标按钮的无障碍访问(使用
aria-label)
快速入门
1. 安装 NuGet 包:
Install-Package Syncfusion.EJ2.AspNet.Core
2. 注册标记帮助程序,位置为 ~/Pages/_ViewImports.cshtml:
@addTagHelper *, Syncfusion.EJ2
3. 在 ~/Pages/Shared/_Layout.cshtml 中添加 CSS 和脚本:
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/fluent.css" />
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
4. 在 <body> 末尾添加脚本管理器:
<ejs-scripts></ejs-scripts>
5. 渲染 Button:
<ejs-button id="btn" cssClass="e-primary" content="Click Me"></ejs-button>
常见模式
主要操作按钮
<ejs-button id="submit" cssClass="e-primary" type="submit" content="Save Changes"></ejs-button>
危险操作按钮
<ejs-button id="delete" cssClass="e-danger" onclick="confirmDelete()" content="Delete"></ejs-button>
图标按钮
<ejs-button id="edit" cssClass="e-small" iconCss="e-icons e-edit-icon"></ejs-button>
禁用按钮
<ejs-button id="btn" disabled="true" content="Cannot Click"></ejs-button>
表单提交
<form>
<ejs-switch id="switch1" name="wifi" value="on" checked="true"></ejs-switch>
<ejs-button id="submit" content="Submit"></ejs-button>
</form>
ButtonGroup
ButtonGroup 组件会将相关按钮以视觉方式组合成一个控件。可用它构建分段控件、工具栏或相关操作组。它是纯 CSS 组合(没有标记帮助程序)——只需将多个按钮包裹在带有 e-btn-group 类的元素中。
导航指南
入门
📄 阅读: references/buttongroup-getting-started.md
- 纯 CSS 组件设置
- 使用
e-btn-group容器对按钮进行基本分组 - 以视觉方式组织相关按钮
选择和嵌套
📄 阅读: references/buttongroup-selection-and-nesting.md
- 单选按钮组行为(互斥选择)
- 复选框组行为(多选)
- 与 DropDownButton 和 SplitButton 嵌套
- 对分组选择进行服务器端状态管理
操作指南
📄 阅读: references/buttongroup-how-to.md
- 创建分段控件
- 构建包含多个组的工具栏
- 垂直按钮组
- 按钮之间的分隔符
- 组的启用/禁用逻辑
样式与外观
📄 阅读: references/buttongroup-style-and-appearance.md
- 为组设置自定义样式
- CSS 类参考
- 组内颜色变体
- 垂直布局
无障碍
📄 阅读: references/buttongroup-accessibility.md
- 语义化 HTML 结构
- ARIA 属性(
role="group"、aria-label) - 键盘导航
- 焦点指示器
快速入门
1. 安装 NuGet 包:
Install-Package Syncfusion.EJ2.AspNet.Core
2. 在 ~/Pages/_ViewImports.cshtml 中注册 Tag Helper:
@addTagHelper *, Syncfusion.EJ2
3. 在 ~/Pages/Shared/_Layout.cshtml 中添加 CSS 和脚本:
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/fluent.css" />
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
4. 在 <body> 末尾添加 Script Manager:
<ejs-scripts></ejs-scripts>
5. 渲染 ButtonGroup:
<div class="e-btn-group">
<ejs-button id="btn1" content="HTML"></ejs-button>
<ejs-button id="btn2" content="CSS"></ejs-button>
<ejs-button id="btn3" content="JavaScript"></ejs-button>
</div>
常见模式
垂直 ButtonGroup
<div class="e-btn-group e-vertical">
<ejs-button id="btn1" content="Top"></ejs-button>
<ejs-button id="btn2" content="Middle"></ejs-button>
<ejs-button id="btn3" content="Bottom"></ejs-button>
</div>
分段控件
<div class="e-btn-group">
<ejs-button id="left" cssClass="e-outline" content="Left"></ejs-button>
<ejs-button id="center" cssClass="e-outline" content="Center"></ejs-button>
<ejs-button id="right" cssClass="e-outline" content="Right"></ejs-button>
</div>
包含多个组的工具栏
<div class="e-toolbar">
<div class="e-btn-group">
<ejs-button id="bold" iconCss="e-icons e-bold-icon"></ejs-button>
<ejs-button id="italic" iconCss="e-icons e-italic-icon"></ejs-button>
<ejs-button id="underline" iconCss="e-icons e-underline-icon"></ejs-button>
</div>
<div class="e-btn-group">
<ejs-button id="left" iconCss="e-icons e-align-left-icon"></ejs-button>
<ejs-button id="center" iconCss="e-icons e-align-center-icon"></ejs-button>
</div>
</div>
复选框
Checkbox 组件是用于表单选择的布尔输入控件。它支持选中、未选中和不确定状态(用于父级复选框)、标签位置、尺寸变体、自定义颜色以及完整的无障碍支持。
导航指南
入门
📄 阅读: references/checkbox-getting-started.md
- 先决条件和 NuGet 包安装
- 在
_ViewImports.cshtml中注册 Tag Helper - 在
_Layout.cshtml中设置样式表和脚本 CDN - 注册脚本管理器
- 使用
<ejs-checkbox>渲染基本复选框 - 带标签的复选框
- 启用波纹效果
功能与状态
📄 阅读: references/checkbox-features-and-state.md
- 选中和未选中状态
- 父级复选框的不确定状态
- 禁用状态
- 使用
name和value属性与表单集成 - 使用
change属性处理变更事件 - 状态汇总表
标签与尺寸
📄 阅读: references/checkbox-label-and-size.md
- 标签配置
- 标签位置控制(
Before/After) - 尺寸变体(
e-small) - 标签与尺寸组合示例
自定义
📄 阅读: references/checkbox-customization.md
- CSS 类覆盖(
e-frame、e-label) - 颜色变体(主色、成功、警告、危险、信息)
- 自定义边框形状(圆形复选框)
- 使用
enableRtl支持 RTL
API 参考
📄 阅读: references/checkbox-api.md
- 属性参考表(
id、label、checked、disabled、indeterminate、name、value、cssClass、labelPosition、enableRtl、enableHtmlSanitizer、enablePersistence、htmlAttributes) - 方法(
click、focusIn、destroy) - 事件签名(
created、beforeChange、change) - Tag Helper 属性语法
- 完整的端到端表单示例
无障碍
📄 阅读: references/checkbox-accessibility.md
- 符合 WCAG 2.2 AA 标准
- 语义化 HTML 和 WAI-ARIA 属性
- 键盘导航(Tab / Space)
- Fieldset/Legend 模式
- 屏幕阅读器支持
快速入门
1. 安装 NuGet 包:
Install-Package Syncfusion.EJ2.AspNet.Core
2. 在 ~/Pages/_ViewImports.cshtml 中注册 Tag Helper:
@addTagHelper *, Syncfusion.EJ2
3. 在 ~/Pages/Shared/_Layout.cshtml 中添加 CSS 和脚本:
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/fluent.css" />
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
4. 在 <body> 末尾添加 Script Manager:
<ejs-scripts></ejs-scripts>
5. 渲染 Checkbox:
<ejs-checkbox id="chk1" label="I agree to the terms"></ejs-checkbox>
常见模式
用于表单提交的复选框
<form method="post">
<ejs-checkbox id="terms" name="agreeTerms" value="agreed" label="I agree to terms"></ejs-checkbox>
<ejs-button id="submit" type="submit" cssClass="e-primary" content="Submit"></ejs-button>
</form>
public async Task<IActionResult> OnPostAsync()
{
bool agreeTerms = Request.Form["agreeTerms"] == "agreed";
// Process the form data
return Page();
}
不确定状态复选框(父级)
<ejs-checkbox id="selectAll" label="Select All" indeterminate="true" change="onSelectAllChange"></ejs-checkbox>
<ejs-checkbox id="opt1" name="options" value="1" label="Option 1"></ejs-checkbox>
<ejs-checkbox id="opt2" name="options" value="2" label="Option 2"></ejs-checkbox>
小尺寸复选框
<ejs-checkbox id="compact" label="Compact option" cssClass="e-small"></ejs-checkbox>
单选按钮
RadioButton 组件用于互斥选项选择。可用于单选表单字段。使用 name 属性对单选按钮分组,确保同一时间只能选中一个。支持标签、尺寸、表单集成和无障碍功能。
导航指南
入门指南
📄 阅读: references/radiobutton-getting-started.md
- 前置条件和 NuGet 包安装
- 在
_ViewImports.cshtml中注册标记帮助程序 - 在
_Layout.cshtml中设置样式表和脚本 CDN - 注册脚本管理器
- 使用
<ejs-radiobutton>渲染基本单选按钮 - 使用
name对单选按钮分组,实现互斥选择
功能与状态
📄 阅读: references/radiobutton-features-and-state.md
- 禁用状态
- 使用
name和value属性集成表单 - 从
Request.Form["name"]读取选中值 - 处理更改事件
标签与大小
📄 阅读: references/radiobutton-label-and-size.md
- 标签位置(
Before/After) - 大小变体(
e-small) - 组合示例
API 参考
📄 阅读: references/radiobutton-api.md
- 属性参考表
- 方法(
click、focusIn、destroy) - 事件签名
- 标记帮助程序属性语法
无障碍访问
📄 阅读: references/radiobutton-accessibility.md
- 符合 WCAG 2.2 AA 标准
- 使用
fieldset/legend的语义化 HTML - WAI-ARIA 属性
- 键盘导航(使用方向键在组内导航)
- 屏幕阅读器支持
快速开始
1. 安装 NuGet 包:
Install-Package Syncfusion.EJ2.AspNet.Core
2. 注册标记帮助程序,在 ~/Pages/_ViewImports.cshtml 中:
@addTagHelper *, Syncfusion.EJ2
3. 添加 CSS 和脚本,在 ~/Pages/Shared/_Layout.cshtml 中:
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/fluent.css" />
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
4. 添加脚本管理器,放在 <body> 末尾:
<ejs-scripts></ejs-scripts>
5. 渲染单选按钮:
<ul>
<li><ejs-radiobutton id="r1" name="group1" label="Option 1"></ejs-radiobutton></li>
<li><ejs-radiobutton id="r2" name="group1" label="Option 2"></ejs-radiobutton></li>
</ul>
常见模式
使用表单提交的单选按钮组
<form method="post">
<ejs-radiobutton id="r1" name="choice" value="a" label="Option A"></ejs-radiobutton>
<ejs-radiobutton id="r2" name="choice" value="b" label="Option B" checked="true"></ejs-radiobutton>
<ejs-radiobutton id="r3" name="choice" value="c" label="Option C"></ejs-radiobutton>
<ejs-button id="submit" type="submit" cssClass="e-primary" content="Submit"></ejs-button>
</form>
public async Task<IActionResult> OnPostAsync()
{
string choice = Request.Form["choice"];
// Process the selected value
return Page();
}
禁用的单选按钮
<ejs-radiobutton id="r1" name="group2" label="Disabled" disabled="true" checked="true"></ejs-radiobutton>
下拉按钮
下拉按钮组件是一个按钮,点击后会打开弹出菜单。它支持带图标的项、分隔符、禁用项、导航 URL,以及用于处理项选择的事件。
导航指南
入门指南
📄 阅读: references/dropdownbutton-getting-started.md
- 前置条件和 NuGet 包安装
- 在
_ViewImports.cshtml中注册标记帮助程序 - 在
_Layout.cshtml中设置样式表和脚本 CDN - 注册脚本管理器
- 使用
<ejs-dropdownbutton>渲染基本下拉按钮 - 通过
List<object>从控制器绑定项
弹出项
📄 阅读: references/dropdownbutton-popup-items.md
- 带图标的项(
iconCss) - 分隔符项(
separator: true) - 禁用项(
disabled: true) - 导航 URL(
url属性) - 项结构参考
事件与交互
📄 阅读: references/dropdownbutton-events-and-interactivity.md
- 主按钮的点击事件
- 弹出菜单生命周期的打开 / 关闭事件
- 使用
select事件处理项选择 beforeOpen/beforeClose事件
API 参考
📄 阅读: references/dropdownbutton-api.md
- 属性参考表
- 事件签名
- 标记帮助程序属性语法
无障碍访问
📄 阅读: references/dropdownbutton-accessibility.md
- 符合 WCAG 2.2 AA 标准
- WAI-ARIA 属性(
aria-haspopup、aria-expanded) - 键盘导航
- 屏幕阅读器支持
快速开始
控制器(HomeController.cs):
public ActionResult Index()
{
List<object> items = new List<object>();
items.Add(new { text = "Cut" });
items.Add(new { text = "Copy" });
items.Add(new { text = "Paste" });
ViewBag.items = items;
return View();
}
视图(Index.cshtml):
<ejs-dropdownbutton id="ddb" content="Edit" items="ViewBag.items"></ejs-dropdownbutton>
常见模式
带图标的下拉按钮
@{
List<object> items = new List<object>();
items.Add(new { text = "Cut", iconCss = "e-icons e-cut-icon" });
items.Add(new { text = "Copy", iconCss = "e-icons e-copy-icon" });
items.Add(new { text = "Paste", iconCss = "e-icons e-paste-icon" });
}
<ejs-dropdownbutton id="ddb" content="Edit" items="items"></ejs-dropdownbutton>
处理项选择
<ejs-dropdownbutton id="ddb" content="Actions" items="ViewBag.items"
select="onItemSelect"></ejs-dropdownbutton>
<script>
function onItemSelect(args) {
console.log('Selected:', args.item.text);
}
</script>
浮动操作按钮(FAB)
浮动操作按钮(FAB) 组件是一个悬浮在 UI 上方的圆形按钮,通常用于屏幕上的主要操作或最常用操作。它支持仅图标或文本与图标组合的内容、相对于目标容器的 9 种位置值,以及多种颜色变体。
导航指南
开始使用
📄 阅读: references/floating-action-button-getting-started.md
- 前置条件和 NuGet 包安装
- 在
_ViewImports.cshtml中注册 Tag Helper - 在
_Layout.cshtml中配置样式表和脚本 CDN - 注册脚本管理器
- 使用
<ejs-fab>渲染基本 FAB - 使用图标的 FAB(
iconCss) - 使用
target将按钮定位到容器
位置
📄 阅读: references/floating-action-button-positions.md
- 9 种位置值(
TopLeft、TopCenter、TopRight、MiddleLeft、Center、MiddleRight、BottomLeft、BottomCenter、BottomRight) - 位置示例和使用场景
图标
📄 阅读: references/floating-action-button-icons.md
- 仅图标 FAB
- 常用图标(
e-plus-icon、e-edit-icon、e-delete-icon、e-search-icon、e-call-icon、e-chat-icon、e-email-icon) - 图标位置
样式
📄 阅读: references/floating-action-button-styles.md
- 内置颜色变体(
e-primary、e-success、e-danger) - 使用 CSS 自定义样式
API 参考
📄 阅读: references/floating-action-button-api.md
- 属性参考表
- Tag Helper 属性语法
无障碍功能
📄 阅读: references/floating-action-button-accessibility.md
- 符合 WCAG 2.2 AA 标准
- 仅图标按钮使用
aria-label - 键盘导航
- 屏幕阅读器支持
快速入门
1. 安装 NuGet 包:
Install-Package Syncfusion.EJ2.AspNet.Core
2. 在 ~/Pages/_ViewImports.cshtml 中注册 Tag Helper:
@addTagHelper *, Syncfusion.EJ2
3. 在 ~/Pages/Shared/_Layout.cshtml 中添加 CSS 和脚本:
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/fluent.css" />
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
4. 在 <body> 末尾添加脚本管理器:
<ejs-scripts></ejs-scripts>
5. 渲染 FAB:
<ejs-fab id="fab" content="Add" cssClass="e-primary"></ejs-fab>
常见模式
带图标的 FAB
<ejs-fab id="fab" iconCss="e-icons e-plus-icon" cssClass="e-primary"></ejs-fab>
定位 FAB
<div id="container" style="position: relative; height: 400px;">
<ejs-fab id="fab" content="Add" position="BottomRight" target="#container"></ejs-fab>
</div>
FAB 点击处理程序
<ejs-fab id="fab" iconCss="e-icons e-plus-icon" cssClass="e-primary" onclick="onFabClick"></ejs-fab>
<script>
function onFabClick() {
console.log('FAB clicked');
}
</script>
ProgressButton
ProgressButton 组件是一个按钮,在异步操作期间显示进度指示器。它支持微调器动画、进度条(0–100%),并可在长时间运行的任务进行期间反馈完成进度。
导航指南
开始使用
📄 阅读: references/progressbutton-getting-started.md
- 前置条件和 NuGet 包安装
- 在
_ViewImports.cshtml中注册 Tag Helper - 在
_Layout.cshtml中配置样式表和脚本 CDN - 注册脚本管理器
- 使用
<ejs-progressbutton>渲染基本 ProgressButton - 使用
setInterval创建进度动画
微调器和进度
📄 阅读: references/progressbutton-spinner-and-progress.md
- 显示进度(0–100)
enableProgress="true"属性- 微调器配置
- 隐藏微调器
- 使用
progress属性实时更新进度
样式和外观
📄 阅读: references/progressbutton-style-and-appearance.md
- 颜色变体(
e-primary、e-success、e-danger) - 自定义样式
- 尺寸变体(
e-small)
API 参考
📄 阅读: references/progressbutton-api.md
- 属性参考表
- Tag Helper 属性语法
无障碍功能
📄 阅读: references/progressbutton-accessibility.md
- 符合 WCAG 2.2 AA 标准
aria-busy和aria-valuenow属性- 键盘导航
- 屏幕阅读器支持
快速入门
1. 安装 NuGet 包:
Install-Package Syncfusion.EJ2.AspNet.Core
2. 在 ~/Pages/_ViewImports.cshtml 中注册 Tag Helper:
@addTagHelper *, Syncfusion.EJ2
3. 在 ~/Pages/Shared/_Layout.cshtml 中添加 CSS 和脚本:
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/fluent.css" />
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
4. 在 <body> 末尾添加 Script Manager:
<ejs-scripts></ejs-scripts>
5. 渲染 ProgressButton:
<ejs-progressbutton id="progress" content="Submit" enableProgress="true"></ejs-progressbutton>
常见模式
带点击处理程序的 ProgressButton
<ejs-progressbutton id="upload" content="Upload" cssClass="e-primary"
enableProgress="true" begin="onBegin" progress="onProgress" end="onEnd"></ejs-progressbutton>
<script>
function onBegin(args) {
// Start the operation
}
function onProgress(args) {
// args.percent contains the progress (0-100)
console.log('Progress:', args.percent + '%');
}
function onEnd(args) {
// Operation complete
}
</script>
带微调器的 ProgressButton
<ejs-progressbutton id="spin" content="Loading" cssClass="e-primary" spinSettings="ViewBag.spin"></ejs-progressbutton>
Speed Dial
Speed Dial 组件是一个浮动操作按钮,点击后会展开为包含相关操作项的菜单。它支持线性和径向显示模式、9 种位置值,以及可配置图标和标题的完整菜单项配置。
导航指南
入门
📄 阅读: references/speeddial-getting-started.md
- 先决条件和 NuGet 包安装
- 在
_ViewImports.cshtml中注册 Tag Helper - 在
_Layout.cshtml中设置样式表和脚本 CDN - 注册 Script Manager
- 相对定位容器要求
- 使用
<ejs-speeddial>渲染基本 SpeedDial - 带菜单项的 SpeedDial
菜单项
📄 阅读: references/speeddial-items.md
- 菜单项结构(
text、iconCss、title属性) - 图标和标题
- 菜单项配置
显示模式
📄 阅读: references/speeddial-display-modes.md
- 线性模式(
Linear) - 径向模式(
Radial) - 方向选项(
Up、Down、Left、Right)
位置
📄 阅读: references/speeddial-positions.md
- 9 种位置值(
TopLeft至BottomRight) - 位置示例
API 参考
📄 阅读: references/speeddial-api.md
- 属性参考表
- 事件签名
- Tag Helper 属性语法
无障碍功能
📄 阅读: references/speeddial-accessibility.md
- 符合 WCAG 2.2 AA 标准
aria-haspopup和aria-expanded属性- 键盘导航
- 菜单导航模式
快速入门
控制器(HomeController.cs):
public ActionResult Index()
{
List<SpeedDialItem> items = new List<SpeedDialItem>();
items.Add(new SpeedDialItem
{
Text = "Cut"
});
items.Add(new SpeedDialItem
{
Text = "Copy"
});
items.Add(new SpeedDialItem
{
Text = "Paste"
});
return View();
}
视图(Index.cshtml):
<div id="container" style="position: relative; height: 400px;">
<ejs-speeddial id="sd" content="Action" items="ViewBag.items" target="#container"></ejs-speeddial>
</div>
常见模式
径向模式
<ejs-speeddial id="sd" content="Edit" items="ViewBag.items"
mode="Syncfusion.EJ2.Buttons.SpeedDialMode.Radial"
direction="Syncfusion.EJ2.Buttons.SpeedDialDirection.Up">
</ejs-speeddial>
带方向的线性模式
<ejs-speeddial id="sd" content="More" items="ViewBag.items"
mode="Syncfusion.EJ2.Buttons.SpeedDialMode.Linear"
direction="Syncfusion.EJ2.Buttons.SpeedDialDirection.Left">
</ejs-speeddial>
SplitButton
SplitButton 组件将主操作按钮与下拉箭头结合在一起,点击下拉箭头后会显示包含次要操作项的弹出列表。点击主按钮会触发默认操作;点击下拉箭头则会打开弹出列表。
导航指南
入门
📄 阅读: references/split-button-getting-started.md
- NuGet 包安装和 Tag Helper 注册
- 样式表和脚本 CDN 设置
- 带弹出菜单项的基本 SplitButton(
content、items) - 首次运行应用程序
- 用于填充
ViewBag.items的控制器操作
图标和外观
📄 阅读: references/split-button-icons-and-appearance.md
- 通过
iconCss属性添加图标 - 更改图标位置(
iconPosition:Left / Top) - 使用
cssClass="e-vertical"设置垂直按钮布局 - 为弹出操作项添加图标
- 弹出菜单项之间的分隔线(
separator: true) - 样式和外观 CSS 类参考(
.e-dropdown-btn、.e-split-btn等) - Theme Studio 自定义
弹出项和模板
📄 阅读: references/split-button-popup-items.md
- 使用
text、iconCss、separator、id、url、disabled定义弹出项 - 通过
beforeItemRender事件设置项模板 - 使用
target属性设置弹出模板 - 使用 ListView 作为
target对项进行分组
操作指南
📄 阅读: references/split-button-how-to.md
- 通过
disabled属性设置禁用状态 - 使用
enableRtl启用从右向左布局 - 使用
select事件,在点击弹出项时打开 Dialog - 使用
beforeItemRender为项文本中的字符添加下划线 - 使用 ListView 对弹出项进行分组
事件和交互
📄 阅读: references/split-button-events.md
click— 点击主按钮select— 选择弹出操作项beforeOpen/open/close/beforeClose— 弹出窗口生命周期beforeItemRender— 在渲染时自定义每个弹出项created— 组件初始化完成- 实用的事件处理程序示例
无障碍功能
📄 阅读: references/split-button-accessibility.md
- 符合 WCAG 2.2 AA 标准
- WAI-ARIA 属性(
role、aria-haspopup、aria-expanded、aria-owns、aria-disabled) - 键盘导航快捷键
- 屏幕阅读器支持
- 无障碍检查器验证
API 参考
📄 阅读: references/split-button-api.md
- 包含类型和默认值的完整属性列表
- 事件签名
- 方法参考(
toggle、destroy) - EJ1 到 EJ2 的迁移映射
快速入门
控制器(HomeController.cs):
public ActionResult Index()
{
List<object> items = new List<object>();
items.Add(new { text = "Cut" });
items.Add(new { text = "Copy" });
items.Add(new { text = "Paste" });
ViewBag.items = items;
return View();
}
视图(Index.cshtml):
<ejs-splitbutton id="element" content="Paste" items="ViewBag.items"></ejs-splitbutton>
常见模式
带图标的 SplitButton
<ejs-splitbutton id="element" content="Paste" items="ViewBag.items"
iconCss="e-icons e-paste"></ejs-splitbutton>
图标位于顶部的 SplitButton(垂直样式)
<ejs-splitbutton id="element" content="Paste" items="ViewBag.items"
iconCss="e-icons e-paste" iconPosition="Top"
cssClass="e-vertical"></ejs-splitbutton>
已禁用的 SplitButton
<ejs-splitbutton id="element" content="Paste" items="ViewBag.items"
disabled="true"></ejs-splitbutton>
RTL SplitButton
<ejs-splitbutton id="rtl" content="Message" items="ViewBag.items"
enableRtl="true"></ejs-splitbutton>
处理主按钮点击和项选择
<ejs-splitbutton id="element" content="Paste" items="ViewBag.items"
click="onPrimaryClick" select="onItemSelect"></ejs-splitbutton>
<script>
function onPrimaryClick(args) {
// Primary button clicked
}
function onItemSelect(args) {
// args.item contains the selected popup item
console.log(args.item.text);
}
</script>
Switch
Switch 组件是一种切换控件,允许用户在 ON 和 OFF 状态之间切换。可将其用于布尔设置、功能开关和快速状态更改。它支持 ON/OFF 标签、多种尺寸、RTL、自定义样式和表单集成。
导航指南
入门
📄 阅读: references/switch-getting-started.md
- 前置条件和 NuGet 包安装
- 在
_ViewImports.cshtml中注册 Tag Helper - 在
_Layout.cshtml中配置样式表和脚本 CDN - 注册脚本管理器
- 使用
<ejs-switch>渲染基本开关 - 使用
onLabel和offLabel设置 ON/OFF 标签 - 使用
checked设置初始状态
功能
📄 阅读: references/switch-features.md
- 禁用状态
- 尺寸变体(
e-small) - 使用
enableRtl支持 RTL - 使用
name和value集成表单
事件
📄 阅读: references/switch-events.md
- 更改事件处理
- 使用
BeforeChange事件阻止状态更改 Created事件
自定义
📄 阅读: references/switch-customization.md
- 自定义样式
- 自定义条和滑块
- 自定义颜色
API 参考
📄 阅读: references/switch-api.md
- 属性参考表
- 事件签名
- Tag Helper 属性语法
无障碍功能
📄 阅读: references/switch-accessibility.md
- 符合 WCAG 2.2 AA 标准
- ARIA 属性(
role="switch"、aria-checked) - 键盘导航(按 Space 键切换)
- 屏幕阅读器支持
快速入门
1. 安装 NuGet 包:
Install-Package Syncfusion.EJ2.AspNet.Core
2. 在 ~/Pages/_ViewImports.cshtml 中注册 Tag Helper:
@addTagHelper *, Syncfusion.EJ2
3. 在 ~/Pages/Shared/_Layout.cshtml 中添加 CSS 和脚本:
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/fluent.css" />
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
4. 在 <body> 末尾添加 Script Manager:
<ejs-scripts></ejs-scripts>
5. 渲染 Switch:
<ejs-switch id="switch1" onLabel="ON" offLabel="OFF" checked="true"></ejs-switch>
常见模式
提交表单的 Switch
<form>
<ejs-switch id="wifi" name="wifi" value="on" checked="true"></ejs-switch>
<ejs-switch id="bluetooth" name="bluetooth" value="on"></ejs-switch>
<ejs-button id="submit" type="submit" content="Save"></ejs-button>
</form>
阻止状态更改
<ejs-switch id="switch1" beforeChange="onBeforeChange"></ejs-switch>
<script>
function onBeforeChange(args) {
args.cancel = true; // Prevents toggle
}
</script>
带有更改事件的小型 Switch
<ejs-switch id="notify" cssClass="e-small" change="onNotifyChange"></ejs-switch>
<script>
function onNotifyChange(args) {
console.log('Notifications:', args.checked ? 'ON' : 'OFF');
}
</script>
芯片
Chips 组件用于显示代表输入、属性或操作的紧凑元素。可将其用于标签、筛选器、联系人或可移除的输入值。它支持选择模式(None、Single、Multiple)、前置/后置图标、头像文本/图像、删除功能、轮廓样式、预定义颜色样式以及拖放排序。
导航指南
入门
📄 阅读: references/chips-getting-started.md
- 前置条件和 NuGet 包安装
- 在
_ViewImports.cshtml中注册 Tag Helper - 在
_Layout.cshtml中设置样式表和脚本 CDN - 使用
<ejs-scripts>注册脚本管理器 - 使用
<ejs-chiplist text="...">渲染单个芯片 - 使用
<e-chips>和<e-chip>渲染芯片列表
类型和选择
📄 阅读: references/chips-types-and-selection.md
- 输入芯片(可删除、单选)
- 选项芯片(单选,类似单选按钮)
- 筛选芯片(多选,类似复选框)
- 操作芯片(单击时触发操作)
- 使用
selected-chips预选芯片 - 处理单击和删除事件
- 禁用芯片
自定义
📄 阅读: references/chips-customization.md
- 预定义样式(
e-primary、e-success、e-info、e-warning、e-danger) - 前置图标(CSS 类和 URL)
- 头像图像和文本
- 后置图标
- 使用
e-outline设置轮廓样式的芯片 - 自定义模板
- HTML 属性
- RTL 支持
样式
📄 阅读: references/chips-style.md
- 芯片文本样式
- 图标样式
- 删除按钮样式
- 选择状态样式
- 头像文本样式
- 高度/大小自定义
- CSS 类层次结构
拖放
📄 阅读: references/chips-drag-and-drop.md
- 使用
allowDragAndDrop启用拖放 - 限制拖动区域
- 跨容器拖放
- 拖动事件(
onDragStart、onDragEnd、onDrop) - 有条件地阻止拖放
- 自定义拖动克隆
API 参考
📄 阅读: references/chips-api.md
- 完整属性参考(Text、Chips、Selection、SelectedChips、EnableDelete、CssClass 等)
- 方法(
GetSelectedChips、Select、Unselect、Delete、Refresh) - 事件(
OnClick、OnDelete、OnSelect、OnDragStart、OnDragEnd) - ChipModel 接口
- 事件参数类型
无障碍功能
📄 阅读: references/chips-accessibility.md
- 符合 WCAG 2.2 AA 标准
- WAI-ARIA 属性(
role="listbox"、role="option"、aria-selected、aria-label) - 键盘导航(Tab、方向键、Enter、Delete)
- 屏幕阅读器支持
- RTL 无障碍支持
- 颜色对比度
快速入门
1. 安装 NuGet 包:
Install-Package Syncfusion.EJ2.AspNet.Core
2. 在 ~/Pages/_ViewImports.cshtml 中注册 Tag Helper:
@addTagHelper *, Syncfusion.EJ2
3. 在 ~/Pages/Shared/_Layout.cshtml 中添加 CSS 和脚本:
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/fluent.css" />
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
4. 在 <body> 末尾添加 Script Manager:
<ejs-scripts></ejs-scripts>
5. 渲染 Chips:
<ejs-chiplist id="chip-list">
<e-chips>
<e-chip text="Andrew"></e-chip>
<e-chip text="Janet"></e-chip>
<e-chip text="Laura"></e-chip>
<e-chip text="Margaret"></e-chip>
</e-chips>
</ejs-chiplist>
常见模式
单个芯片
<ejs-chiplist id="chip" text="Janet Leverling"></ejs-chiplist>
可删除的芯片
<ejs-chiplist id="deletable" enableDelete="true">
<e-chips>
<e-chip text="Tag 1"></e-chip>
<e-chip text="Tag 2"></e-chip>
</e-chips>
</ejs-chiplist>
筛选芯片(多选)
<ejs-chiplist id="filter" selection="Multiple">
<e-chips>
<e-chip text="React"></e-chip>
<e-chip text="Angular"></e-chip>
<e-chip text="Vue"></e-chip>
</e-chips>
</ejs-chiplist>
带有头像文本的芯片
<ejs-chiplist id="avatar-chips">
<e-chips>
<e-chip text="Andrew" avatarText="A"></e-chip>
<e-chip text="Janet" avatarText="J"></e-chip>
</e-chips>
</ejs-chiplist>
彩色芯片
<ejs-chiplist id="colored">
<e-chips>
<e-chip text="Primary" cssClass="e-primary"></e-chip>
<e-chip text="Success" cssClass="e-success"></e-chip>
<e-chip text="Danger" cssClass="e-danger"></e-chip>
</e-chips>
</ejs-chiplist>
可拖动的芯片
<ejs-chiplist id="draggable" allowDragAndDrop="true">
<e-chips>
<e-chip text="Task 1"></e-chip>
<e-chip text="Task 2"></e-chip>
</e-chips>
</ejs-chiplist>