syncfusion-aspnetcore-buttons

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Syncfusion ASP.NET Core Switch

The Syncfusion ASP.NET Core Switch is a graphical UI element that allows toggling between checked (ON) and unchecked (OFF) states. It supports labels, small size, RTL, disabled state, form integration, event handling, and full CSS customization.

Syncfusion ASP.NET Core Switch是一款图形化UI元素，允许在选中（ON）和未选中（OFF）状态之间切换。它支持标签、小尺寸、RTL布局、禁用状态、表单集成、事件处理以及完整的CSS自定义。

Navigation Guide

导航指南

Getting Started

快速入门

📄 Read: references/getting-started.md

NuGet package installation (
```
Syncfusion.EJ2.AspNet.Core
```
)
Tag Helper registration in
```
_ViewImports.cshtml
```
CDN stylesheet and script references
Script manager setup (
```
<ejs-scripts>
```
)
Basic Switch rendering (Tag Helper and MVC HTML Helper)
Setting ON/OFF label text with
```
onLabel
```
/
```
offLabel
```
Setting initial checked state with
```
checked
```

📄 阅读： references/getting-started.md

NuGet包安装（
```
Syncfusion.EJ2.AspNet.Core
```
）
在
```
_ViewImports.cshtml
```
中注册Tag Helper
CDN样式表和脚本引用
脚本管理器设置（
```
<ejs-scripts>
```
）
基础Switch渲染（Tag Helper和MVC HTML Helper）
使用
```
onLabel
```
/
```
offLabel
```
设置ON/OFF标签文本
使用
```
checked
```
设置初始选中状态

Switch Features & Configuration

Switch功能与配置

📄 Read: references/switch-features.md

Setting disabled state with
```
disabled
```
Changing switch size to small with
```
cssClass="e-small"
```
Enabling RTL layout with
```
enableRtl
```
Form integration:
```
name
```
,
```
value
```
,
```
checked
```
attributes
Submitting switch values in an HTML form
Enabling state persistence with
```
enablePersistence
```
Locale/culture override with
```
locale
```

📄 阅读： references/switch-features.md

使用
```
disabled
```
设置禁用状态
通过
```
cssClass="e-small"
```
修改Switch尺寸为小尺寸
使用
```
enableRtl
```
启用RTL布局
表单集成：
```
name
```
、
```
value
```
、
```
checked
```
属性
在HTML表单中提交Switch值
使用
```
enablePersistence
```
启用状态持久化
使用
```
locale
```
覆盖区域设置/文化

Events & State Management

事件与状态管理

📄 Read: references/events.md

```
BeforeChange
```
event – intercept and cancel state changes
```
Change
```
event – respond after state changes
```
Created
```
event – execute logic after component renders
Preventing switch state change conditionally

📄 阅读： references/events.md

```
BeforeChange
```
事件——拦截并取消状态变更
```
Change
```
事件——状态变更后响应
```
Created
```
事件——组件渲染完成后执行逻辑
有条件地阻止Switch状态变更

Customization & Appearance

自定义与外观

📄 Read: references/customization.md

CSS class list for Switch bar and handle
Customizing bar shape (square vs round) with
```
cssClass
```
Customizing switch bar and handle colors
iOS-style switch example
Style and Appearance reference table
Theme Studio integration

📄 阅读： references/customization.md

Switch滑块和手柄的CSS类列表
使用
```
cssClass
```
自定义滑块形状（方形vs圆形）
自定义Switch滑块和手柄颜色
iOS风格Switch示例
样式与外观参考表
Theme Studio集成

Accessibility

无障碍访问

📄 Read: references/accessibility.md

WCAG 2.2 AA compliance
WAI-ARIA attributes (
```
role
```
,
```
aria-disabled
```
)
Keyboard interaction (Space key)
Screen reader support
RTL and color contrast support
Ripple effect for switch labels

📄 阅读： references/accessibility.md

符合WCAG 2.2 AA标准
WAI-ARIA属性（
```
role
```
、
```
aria-disabled
```
）
键盘交互（空格键）
屏幕阅读器支持
RTL和颜色对比度支持
Switch标签的涟漪效果

API Reference

API参考

📄 Read: references/api.md

All properties:

checked

cssClass

disabled

enablePersistence

enableRtl

htmlAttributes

locale

name

offLabel

onLabel

value

All events:
```
beforeChange
```
,
```
change
```
,
```
created
```
Tag Helper attribute names and MVC HTML Helper equivalents
Default values for each property

📄 阅读： references/api.md

所有属性：

checked

、

cssClass

、

disabled

、

enablePersistence

、

enableRtl

、

htmlAttributes

、

locale

、

name

、

offLabel

、

onLabel

、

value

所有事件：
```
beforeChange
```
、
```
change
```
、
```
created
```
Tag Helper属性名称与MVC HTML Helper对应关系
各属性默认值

Quick Start

快速开始

ASP.NET Core Tag Helper:

cshtml

@* _ViewImports.cshtml must have: @addTagHelper *, Syncfusion.EJ2 *@

<ejs-switch id="default"></ejs-switch>

Switch with ON/OFF labels (checked by default):

cshtml

<ejs-switch id="switch1" onLabel="ON" offLabel="OFF" checked="true"></ejs-switch>

ASP.NET Core Tag Helper：

cshtml

@* _ViewImports.cshtml必须包含：@addTagHelper *, Syncfusion.EJ2 *@

<ejs-switch id="default"></ejs-switch>

带ON/OFF标签的Switch（默认选中）：

cshtml

<ejs-switch id="switch1" onLabel="ON" offLabel="OFF" checked="true"></ejs-switch>

Common Patterns

常见模式

Disabled Switch

禁用状态Switch

cshtml

<ejs-switch id="switch1" disabled="true"></ejs-switch>

cshtml

<ejs-switch id="switch1" disabled="true"></ejs-switch>

Small Size Switch

小尺寸Switch

cshtml

<ejs-switch id="switch1" cssClass="e-small"></ejs-switch>

cshtml

<ejs-switch id="switch1" cssClass="e-small"></ejs-switch>

RTL Switch

RTL布局Switch

cshtml

<ejs-switch id="switch1" enableRtl="true"></ejs-switch>

cshtml

<ejs-switch id="switch1" enableRtl="true"></ejs-switch>

Prevent State Change (BeforeChange event)

阻止状态变更（BeforeChange事件）

cshtml

<ejs-switch id="switch1" BeforeChange="onBeforeChange"></ejs-switch>
<script>
    function onBeforeChange(args) {
        args.cancel = true; // Prevents toggle
    }
</script>

cshtml

<ejs-switch id="switch1" BeforeChange="onBeforeChange"></ejs-switch>
<script>
    function onBeforeChange(args) {
        args.cancel = true; // 阻止切换
    }
</script>

Form Submission

表单提交

cshtml

<form>
    <ejs-switch id="switch1" name="wifi" value="on" checked="true"></ejs-switch>
    <ejs-button id="submit" content="Submit"></ejs-button>
</form>

cshtml

<form>
    <ejs-switch id="switch1" name="wifi" value="on" checked="true"></ejs-switch>
    <ejs-button id="submit" content="Submit"></ejs-button>
</form>

Syncfusion ASP.NET Core SplitButton

The SplitButton component combines a primary action button with a dropdown arrow that reveals a popup list of secondary action items. Clicking the primary button triggers the default action; clicking the dropdown arrow opens the popup.

SplitButton组件将主操作按钮与下拉箭头相结合，点击下拉箭头会显示次级操作项的弹出列表。点击主按钮触发默认操作；点击下拉箭头打开弹出列表。

Navigation Guide

导航指南

Getting Started

快速入门

📄 Read: references/getting-started.md

NuGet package installation and tag helper registration
Stylesheet and script CDN setup
Basic SplitButton with popup items (
```
content
```
,
```
items
```
)
Running the application for the first time
Controller action to populate
```
ViewBag.items
```

📄 阅读： references/getting-started.md

NuGet包安装与Tag Helper注册
样式表与脚本CDN设置
带弹出项的基础SplitButton（
```
content
```
、
```
items
```
）
首次运行应用
控制器动作填充
```
ViewBag.items
```

Icons and Appearance

图标与外观

📄 Read: references/icons-and-appearance.md

Adding icons via
```
iconCss
```
property
Changing icon position (
```
iconPosition
```
: Left / Top)
Vertical button layout using
```
cssClass="e-vertical"
```
Icons on popup action items
Separator lines between popup items (
```
separator: true
```
)
Style and appearance CSS class reference (
```
.e-dropdown-btn
```
,
```
.e-split-btn
```
, etc.)
Theme Studio customization

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

通过
```
iconCss
```
属性添加图标
修改图标位置（
```
iconPosition
```
：Left / Top）
使用
```
cssClass="e-vertical"
```
实现垂直按钮布局
弹出操作项上的图标
弹出项之间的分隔线（
```
separator: true
```
）
样式与外观CSS类参考（
```
.e-dropdown-btn
```
,
```
.e-split-btn
```
等）
Theme Studio自定义

Popup Items and Templating

弹出项与模板

📄 Read: references/popup-items.md

Defining popup items with
```
text
```
,
```
iconCss
```
,
```
separator
```
,
```
id
```
,
```
url
```
,
```
disabled
```
Item templating via
```
beforeItemRender
```
event
Popup templating using the
```
target
```
property
Grouping items using ListView as
```
target
```

📄 阅读： references/popup-items.md

使用
```
text
```
、
```
iconCss
```
、
```
separator
```
、
```
id
```
、
```
url
```
、
```
disabled
```
定义弹出项
通过
```
beforeItemRender
```
事件实现项模板
使用
```
target
```
属性实现弹出模板
使用ListView作为
```
target
```
对项进行分组

How-To Scenarios

实操场景

📄 Read: references/how-to.md

Set disabled state via
```
disabled
```
property
Enable right-to-left layout with
```
enableRtl
```
Open a Dialog on popup item click using
```
select
```
event
Underline a character in item text using
```
beforeItemRender
```
Group items in popup with ListView

📄 阅读： references/how-to.md

通过
```
disabled
```
属性设置禁用状态
使用
```
enableRtl
```
启用从右到左布局
使用
```
select
```
事件在点击弹出项时打开Dialog
使用
```
beforeItemRender
```
为项文本添加下划线
用ListView对弹出项进行分组

Events and Interactivity

事件与交互

📄 Read: references/events.md

```
click
```
— primary button clicked
```
select
```
— popup action item selected
```
beforeOpen
```
/
```
open
```
/
```
close
```
/
```
beforeClose
```
— popup lifecycle
```
beforeItemRender
```
— customize each popup item at render time
```
created
```
— component initialization complete
Practical event handler examples

📄 阅读： references/events.md

```
click
```
—— 主按钮被点击
```
select
```
—— 弹出操作项被选中
```
beforeOpen
```
/
```
open
```
/
```
close
```
/
```
beforeClose
```
—— 弹出列表生命周期
```
beforeItemRender
```
—— 渲染时自定义每个弹出项
```
created
```
—— 组件初始化完成
实用事件处理示例

Accessibility

无障碍访问

📄 Read: references/accessibility.md

WCAG 2.2 AA compliance

WAI-ARIA attributes (

role

aria-haspopup

aria-expanded

aria-owns

aria-disabled

)

Keyboard navigation shortcuts
Screen reader support
Accessibility checker validation

📄 阅读： references/accessibility.md

符合WCAG 2.2 AA标准

WAI-ARIA属性（

role

、

aria-haspopup

、

aria-expanded

、

aria-owns

、

aria-disabled

）

键盘导航快捷键
屏幕阅读器支持
无障碍检查器验证

API Reference

API参考

📄 Read: references/api.md

Complete property list with types and defaults
Event signatures
Method reference (
```
toggle
```
,
```
destroy
```
)
EJ1 to EJ2 migration mapping

📄 阅读： references/api.md

完整属性列表（含类型与默认值）
事件签名
方法参考（
```
toggle
```
、
```
destroy
```
）
EJ1到EJ2迁移映射

Quick Start

快速开始

Controller (HomeController.cs):

csharp

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();
}

View (Index.cshtml):

cshtml

<ejs-splitbutton id="element" content="Paste" items="ViewBag.items"></ejs-splitbutton>

控制器（HomeController.cs）：

csharp

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）：

cshtml

<ejs-splitbutton id="element" content="Paste" items="ViewBag.items"></ejs-splitbutton>

Common Patterns

常见模式

SplitButton with Icon

带图标的SplitButton

cshtml

<ejs-splitbutton id="element" content="Paste" items="ViewBag.items"
    iconCss="e-icons e-paste"></ejs-splitbutton>

cshtml

<ejs-splitbutton id="element" content="Paste" items="ViewBag.items"
    iconCss="e-icons e-paste"></ejs-splitbutton>

SplitButton with Icon on Top (Vertical style)

图标在上的SplitButton（垂直样式）

cshtml

<ejs-splitbutton id="element" content="Paste" items="ViewBag.items"
    iconCss="e-icons e-paste" iconPosition="Top"
    cssClass="e-vertical"></ejs-splitbutton>

cshtml

<ejs-splitbutton id="element" content="Paste" items="ViewBag.items"
    iconCss="e-icons e-paste" iconPosition="Top"
    cssClass="e-vertical"></ejs-splitbutton>

Disabled SplitButton

禁用状态SplitButton

cshtml

<ejs-splitbutton id="element" content="Paste" items="ViewBag.items"
    disabled="true"></ejs-splitbutton>

cshtml

<ejs-splitbutton id="element" content="Paste" items="ViewBag.items"
    disabled="true"></ejs-splitbutton>

RTL SplitButton

RTL布局SplitButton

cshtml

<ejs-splitbutton id="rtl" content="Message" items="ViewBag.items"
    enableRtl="true"></ejs-splitbutton>

cshtml

<ejs-splitbutton id="rtl" content="Message" items="ViewBag.items"
    enableRtl="true"></ejs-splitbutton>

Handle Primary Click and Item Select

处理主按钮点击与项选择

cshtml

<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>

cshtml

<ejs-splitbutton id="element" content="Paste" items="ViewBag.items"
    click="onPrimaryClick" select="onItemSelect"></ejs-splitbutton>

<script>
    function onPrimaryClick(args) {
        // 主按钮被点击
    }
    function onItemSelect(args) {
        // args.item包含选中的弹出项
        console.log(args.item.text);
    }
</script>