mcpField
S
syncfusion-aspnetcore-buttons

syncfusion-aspnetcore-buttons

github.com/syncfusion设计与 UI0101 次安装3 周前更新
代码仓库

关于 syncfusion-aspnetcore-buttons

syncfusion-aspnetcore-buttons 是面向 ASP.NET Core 开发者的 Syncfusion EJ2 按钮类组件参考技能,涵盖按钮、按钮组、复选框、单选按钮和下拉按钮等控件。内容按入门、配置、API 和无障碍主题组织,便于实现表单与界面操作。

主要功能

  1. 01涵盖多种按钮与表单控件
  2. 02提供安装和组件入门指南
  3. 03说明样式、状态及事件
  4. 04包含 API 与 Tag Helper 参考
  5. 05介绍键盘和屏幕阅读器支持

适用场景

  1. 01在 ASP.NET Core 页面添加操作按钮
  2. 02为表单配置复选框和单选项
  3. 03创建工具栏或分段按钮组
  4. 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.md
button-api.md
button-getting-started.md
button-how-to.md
button-types-and-styles.md
buttongroup-accessibility.md
buttongroup-getting-started.md
buttongroup-how-to.md
buttongroup-selection-and-nesting.md
buttongroup-style-and-appearance.md
checkbox-accessibility.md
checkbox-api.md
checkbox-customization.md
checkbox-features-and-state.md
checkbox-getting-started.md
checkbox-label-and-size.md
chips-accessibility.md
chips-api.md
chips-customization.md
chips-drag-and-drop.md
chips-getting-started.md
chips-style.md
chips-types-and-selection.md
dropdownbutton-accessibility.md
dropdownbutton-api.md
dropdownbutton-events-and-interactivity.md
dropdownbutton-getting-started.md
dropdownbutton-popup-items.md
floating-action-button-accessibility.md
floating-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>

评论

支持 Markdown