syncfusion-react-buttons

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Syncfusion React Buttons

📌 Agent Notice:
📄 Read:
links in Navigation Guide sections are reference pointers for passive file reading only. They do not imply automatic tool invocation, command execution, or action chaining.

📌 Agent提示： 导航指南部分中的
📄 阅读:
链接仅作为被动阅读文件的参考指针，并不意味着会自动调用工具、执行命令或进行操作链。

Button

The Syncfusion

ButtonComponent

is a graphical user interface element that triggers an action on click. It supports text, icons, or both, with extensive styling, accessibility, and behavioral options.

Syncfusion

ButtonComponent

是一种图形用户界面元素，点击时会触发操作。它支持文本、图标或两者结合，提供丰富的样式、无障碍访问和行为选项。

Navigation Guide

导航指南

Getting Started

入门指南

📄 Read: references/button-getting-started.md

Installation and package setup
CSS imports and theme configuration
Rendering the first ButtonComponent
Enabling ripple effects
Basic click handling

📄 阅读: references/button-getting-started.md

安装和包配置
CSS导入和主题设置
渲染第一个ButtonComponent
启用波纹效果
基础点击事件处理

Types and Styles

类型与样式

📄 Read: references/button-types-and-styles.md

Predefined color styles (primary, success, info, warning, danger, link)
Flat, outline, round, and toggle button types
Basic HTML button types (submit, reset)
Icon buttons (font icons, SVG)
Icon positioning (left/right)
Button sizes (small, normal)

📄 阅读: references/button-types-and-styles.md

预定义颜色样式（primary、success、info、warning、danger、link）
扁平、轮廓、圆形和切换按钮类型
基础HTML按钮类型（submit、reset）
图标按钮（字体图标、SVG）
图标位置（左/右）
按钮尺寸（小、常规）

How-To Patterns

实现模式

📄 Read: references/button-how-to.md

Create a block (full-width) button
Create a rounded-corner button
Add a navigation link to a button
Customize button appearance with CSS
Style native input and anchor elements as buttons
Set the disabled state
Enable right-to-left (RTL) support
Add a tooltip on hover
Implement a repeat button

📄 阅读: references/button-how-to.md

创建块级（全宽）按钮
创建圆角按钮
为按钮添加导航链接
使用CSS自定义按钮外观
将原生input和锚点元素样式化为按钮
设置禁用状态
启用从右到左（RTL）布局支持
添加悬停提示框
实现重复按钮

Style and Appearance

样式与外观

📄 Read: references/button-style-and-appearance.md

Available CSS classes and their purposes
Overriding default styles
Custom theme creation with Theme Studio

📄 阅读: references/button-style-and-appearance.md

可用的CSS类及其用途
覆盖默认样式
使用Theme Studio创建自定义主题

Accessibility

无障碍访问

📄 Read: references/button-accessibility.md

WCAG 2.2, Section 508 compliance
WAI-ARIA attributes
Keyboard navigation
Screen reader support

📄 阅读: references/button-accessibility.md

符合WCAG 2.2、Section 508标准
WAI-ARIA属性
键盘导航
屏幕阅读器支持

API Reference

API参考

📄 Read: references/button-api.md

All properties, methods, and events
Property types, defaults, and constraints

📄 阅读: references/button-api.md

所有属性、方法和事件
属性类型、默认值和约束

Quick Start

快速开始

⚠️ Run the following command manually in your terminal. Do not execute automatically.

bash

undefined

⚠️ 请在终端中手动运行以下命令，不要自动执行。

bash

undefined

Run in your terminal

npm install @syncfusion/ej2-react-buttons --save


```tsx
// src/App.css
// @import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
// @import "../node_modules/@syncfusion/ej2-react-buttons/styles/tailwind3.css";

import { enableRipple } from '@syncfusion/ej2-base';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import './App.css';

enableRipple(true);

function App() {
  return (
    <div>
      <ButtonComponent>Default</ButtonComponent>
      <ButtonComponent cssClass='e-primary'>Primary</ButtonComponent>
      <ButtonComponent cssClass='e-success'>Success</ButtonComponent>
    </div>
  );
}
export default App;

npm install @syncfusion/ej2-react-buttons --save


```tsx
// src/App.css
// @import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
// @import "../node_modules/@syncfusion/ej2-react-buttons/styles/tailwind3.css";

import { enableRipple } from '@syncfusion/ej2-base';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import './App.css';

enableRipple(true);

function App() {
  return (
    <div>
      <ButtonComponent>Default</ButtonComponent>
      <ButtonComponent cssClass='e-primary'>Primary</ButtonComponent>
      <ButtonComponent cssClass='e-success'>Success</ButtonComponent>
    </div>
  );
}
export default App;

Common Patterns

常见模式

Styled Button

样式化按钮

tsx

<ButtonComponent cssClass='e-primary'>Save</ButtonComponent>
<ButtonComponent cssClass='e-danger'>Delete</ButtonComponent>
<ButtonComponent cssClass='e-flat'>Flat</ButtonComponent>
<ButtonComponent cssClass='e-outline'>Outline</ButtonComponent>

tsx

<ButtonComponent cssClass='e-primary'>Save</ButtonComponent>
<ButtonComponent cssClass='e-danger'>Delete</ButtonComponent>
<ButtonComponent cssClass='e-flat'>Flat</ButtonComponent>
<ButtonComponent cssClass='e-outline'>Outline</ButtonComponent>

Icon Button

图标按钮

tsx

<ButtonComponent iconCss='e-icons e-save'>Save</ButtonComponent>
<ButtonComponent iconCss='e-icons e-delete' iconPosition='Right'>Delete</ButtonComponent>

tsx

<ButtonComponent iconCss='e-icons e-save'>Save</ButtonComponent>
<ButtonComponent iconCss='e-icons e-delete' iconPosition='Right'>Delete</ButtonComponent>

Toggle Button

切换按钮

tsx

const [active, setActive] = React.useState(false);
<ButtonComponent isToggle={true} cssClass='e-flat'
  onClick={() => setActive(!active)}>
  {active ? 'Pause' : 'Play'}
</ButtonComponent>

tsx

const [active, setActive] = React.useState(false);
<ButtonComponent isToggle={true} cssClass='e-flat'
  onClick={() => setActive(!active)}>
  {active ? 'Pause' : 'Play'}
</ButtonComponent>

Disabled Button

禁用按钮

tsx

<ButtonComponent disabled={true}>Disabled</ButtonComponent>

tsx

<ButtonComponent disabled={true}>Disabled</ButtonComponent>

Block (Full-Width) Button

块级（全宽）按钮

tsx

<ButtonComponent cssClass='e-block e-primary'>Full Width</ButtonComponent>

tsx

<ButtonComponent cssClass='e-block e-primary'>Full Width</ButtonComponent>

ButtonGroup

The ButtonGroup is a pure CSS component that groups a series of buttons together in a horizontal (default) or vertical layout. It supports normal button behavior as well as radio-type (single selection) and checkbox-type (multiple selection) behaviors. Buttons can be nested with DropDownButton and SplitButton components.

ButtonGroup是纯CSS组件，可将一系列按钮按水平（默认）或垂直布局分组。它支持常规按钮行为，以及单选（单选项）和复选框（多选项）行为。按钮中可嵌套DropDownButton和SplitButton组件。

Navigation Guide

导航指南

Getting Started

入门指南

📄 Read: references/buttongroup-getting-started.md

Installation and package setup
Adding CSS references and theme imports
Basic ButtonGroup implementation
Running the application

📄 阅读: references/buttongroup-getting-started.md

安装和包配置
添加CSS引用和主题导入
基础ButtonGroup实现
运行应用

Types and Styles

类型与样式

📄 Read: references/buttongroup-types-and-styles.md

Outline ButtonGroup (
```
e-outline
```
)

Predefined color styles (

e-primary

e-success

e-info

e-warning

e-danger

)

Mixing styles within a group

📄 阅读: references/buttongroup-types-and-styles.md

轮廓样式ButtonGroup（
```
e-outline
```
）

预定义颜色样式（

e-primary

、

e-success

、

e-info

、

e-warning

、

e-danger

）

组内混合样式

Selection and Nesting

选择与嵌套

📄 Read: references/buttongroup-selection-and-nesting.md

Single selection (radio type)
Multiple selection (checkbox type)
Setting initial selected state
Nesting DropDownButton inside ButtonGroup
Nesting SplitButton inside ButtonGroup

📄 阅读: references/buttongroup-selection-and-nesting.md

单选（radio类型）
多选（checkbox类型）
设置初始选中状态
在ButtonGroup中嵌套DropDownButton
在ButtonGroup中嵌套SplitButton

How-To Guide

实现指南

📄 Read: references/buttongroup-how-to.md

Add icons to buttons (
```
iconCss
```
)
Rounded corners (
```
e-round-corner
```
)
Disable individual or all buttons
Enable ripple effect
Enable RTL support
Vertical orientation (
```
e-vertical
```
)
Form submit with radio/checkbox ButtonGroup
Initialize using
```
createButtonGroup
```
utility function

📄 阅读: references/buttongroup-how-to.md

为按钮添加图标（
```
iconCss
```
）
圆角（
```
e-round-corner
```
）
禁用单个或所有按钮
启用波纹效果
启用RTL支持
垂直布局（
```
e-vertical
```
）
通过单选/复选框ButtonGroup提交表单
使用
```
createButtonGroup
```
工具函数初始化

Style and Appearance

样式与外观

📄 Read: references/buttongroup-style-and-appearance.md

Available CSS classes for customization
Overriding hover, focus, active states
Theme Studio integration

📄 阅读: references/buttongroup-style-and-appearance.md

可用于自定义的CSS类
覆盖悬停、聚焦、激活状态样式
Theme Studio集成

Accessibility

无障碍访问

📄 Read: references/buttongroup-accessibility.md

WCAG 2.2, Section 508 compliance
Keyboard navigation shortcuts
Screen reader support

📄 阅读: references/buttongroup-accessibility.md

符合WCAG 2.2、Section 508标准
键盘导航快捷键
屏幕阅读器支持

Quick Start

快速开始

tsx

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import './App.css';

function App() {
  return (
    <div className='e-btn-group'>
      <ButtonComponent>HTML</ButtonComponent>
      <ButtonComponent>CSS</ButtonComponent>
      <ButtonComponent>Javascript</ButtonComponent>
    </div>
  );
}
export default App;

Required CSS imports in

src/App.css

css

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

tsx

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import './App.css';

function App() {
  return (
    <div className='e-btn-group'>
      <ButtonComponent>HTML</ButtonComponent>
      <ButtonComponent>CSS</ButtonComponent>
      <ButtonComponent>Javascript</ButtonComponent>
    </div>
  );
}
export default App;

src/App.css

中所需的CSS导入：

css

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

Common Patterns

常见模式

Radio (single-select) ButtonGroup

单选（单选项）ButtonGroup

tsx

<div className='e-btn-group'>
  <input type="radio" id="radioleft" name="align" value="left" />
  <label className="e-btn" htmlFor="radioleft">Left</label>
  <input type="radio" id="radiomiddle" name="align" value="middle" />
  <label className="e-btn" htmlFor="radiomiddle">Center</label>
  <input type="radio" id="radioright" name="align" value="right" />
  <label className="e-btn" htmlFor="radioright">Right</label>
</div>

tsx

<div className='e-btn-group'>
  <input type="radio" id="radioleft" name="align" value="left" />
  <label className="e-btn" htmlFor="radioleft">Left</label>
  <input type="radio" id="radiomiddle" name="align" value="middle" />
  <label className="e-btn" htmlFor="radiomiddle">Center</label>
  <input type="radio" id="radioright" name="align" value="right" />
  <label className="e-btn" htmlFor="radioright">Right</label>
</div>

Checkbox (multi-select) ButtonGroup

复选框（多选项）ButtonGroup

tsx

<div className='e-btn-group'>
  <input type="checkbox" id="checkbold" name="font" value="bold" />
  <label className="e-btn" htmlFor="checkbold">Bold</label>
  <input type="checkbox" id="checkitalic" name="font" value="italic" />
  <label className="e-btn" htmlFor="checkitalic">Italic</label>
  <input type="checkbox" id="checkline" name="font" value="underline" />
  <label className="e-btn" htmlFor="checkline">Underline</label>
</div>

tsx

<div className='e-btn-group'>
  <input type="checkbox" id="checkbold" name="font" value="bold" />
  <label className="e-btn" htmlFor="checkbold">Bold</label>
  <input type="checkbox" id="checkitalic" name="font" value="italic" />
  <label className="e-btn" htmlFor="checkitalic">Italic</label>
  <input type="checkbox" id="checkline" name="font" value="underline" />
  <label className="e-btn" htmlFor="checkline">Underline</label>
</div>

Vertical ButtonGroup

垂直ButtonGroup

tsx

<div className='e-btn-group e-vertical'>
  <ButtonComponent>HTML</ButtonComponent>
  <ButtonComponent>CSS</ButtonComponent>
  <ButtonComponent>Javascript</ButtonComponent>
</div>

tsx

<div className='e-btn-group e-vertical'>
  <ButtonComponent>HTML</ButtonComponent>
  <ButtonComponent>CSS</ButtonComponent>
  <ButtonComponent>Javascript</ButtonComponent>
</div>

Key Props

关键属性

Prop / Class	Component	Description
`cssClass`	`ButtonComponent`	Apply style classes ( `e-outline` , `e-primary` , `e-success` , `e-info` , `e-warning` , `e-danger` )
`iconCss`	`ButtonComponent`	CSS class(es) for button icon
`disabled`	`ButtonComponent`	Disables the button
`isPrimary`	`ButtonComponent`	Marks button as primary
`e-btn-group`	container div	Required wrapper class for ButtonGroup
`e-outline`	container div + buttons	Outline style for the group
`e-round-corner`	container div	Rounded corners for the group
`e-vertical`	container div	Vertical layout
`e-rtl`	container div	Right-to-left layout

属性/类	组件	描述
`cssClass`	`ButtonComponent`	应用样式类（ `e-outline` 、 `e-primary` 、 `e-success` 、 `e-info` 、 `e-warning` 、 `e-danger` ）
`iconCss`	`ButtonComponent`	按钮图标的CSS类
`disabled`	`ButtonComponent`	禁用按钮
`isPrimary`	`ButtonComponent`	将按钮标记为主按钮
`e-btn-group`	容器div	ButtonGroup所需的包装类
`e-outline`	容器div + 按钮	组的轮廓样式
`e-round-corner`	容器div	组的圆角样式
`e-vertical`	容器div	垂直布局
`e-rtl`	容器div	从右到左布局

DropDownButton

The Syncfusion

DropDownButtonComponent

renders a button that toggles a contextual popup menu with a list of action items. It supports icons, separators, templates, animations, accessibility, and extensive customization.

Syncfusion

DropDownButtonComponent

会渲染一个按钮，点击后可切换显示包含操作项的上下文弹出菜单。它支持图标、分隔符、模板、动画、无障碍访问和丰富的自定义选项。

Navigation Guide

导航指南

Getting Started

入门指南

📄 Read: references/dropdownbutton-getting-started.md

Installation and package setup
CSS imports and theme configuration
Rendering the first DropDownButtonComponent
Binding data source with
```
items
```
Minimal working example

📄 阅读: references/dropdownbutton-getting-started.md

安装和包配置
CSS导入和主题设置
渲染第一个DropDownButtonComponent
使用
```
items
```
绑定数据源
最简可用示例

Popup Items and Navigation

弹出项与导航

📄 Read: references/dropdownbutton-popup-items.md

Adding icons to popup items with
```
iconCss
```
Navigation URLs via
```
url
```
on items
Separators to group popup items
Item templates with
```
beforeItemRender
```
Popup (target) templates
Underline characters in item text

📄 阅读: references/dropdownbutton-popup-items.md

使用
```
iconCss
```
为弹出项添加图标
通过项的
```
url
```
设置导航链接
使用分隔符对弹出项进行分组
使用
```
beforeItemRender
```
自定义项模板
弹出框（目标）模板
项文本中的下划线字符

Icons and Layout

图标与布局

📄 Read: references/dropdownbutton-icons-and-layout.md

Button icons with
```
iconCss
```
and
```
iconPosition
```
Icon-only buttons with
```
e-caret-hide
```
Sprite image icons
Vertical button layout with
```
e-vertical
```
Customizing icon size and button width

📄 阅读: references/dropdownbutton-icons-and-layout.md

使用
```
iconCss
```
和
```
iconPosition
```
设置按钮图标
使用
```
e-caret-hide
```
创建仅图标按钮
精灵图像图标
使用
```
e-vertical
```
设置垂直按钮布局
自定义图标尺寸和按钮宽度

Appearance and Styling

外观与样式

📄 Read: references/dropdownbutton-appearance-and-styling.md

CSS class overrides (color styles, sizes, states)
Rounded corners with
```
e-round-corner
```
Hide dropdown arrow with
```
e-caret-hide
```
Popup width with
```
popupWidth
```
Theme Studio customization
Animation settings for popup open/close

📄 阅读: references/dropdownbutton-appearance-and-styling.md

CSS类覆盖（颜色样式、尺寸、状态）
使用
```
e-round-corner
```
设置圆角
使用
```
e-caret-hide
```
隐藏下拉箭头
使用
```
popupWidth
```
设置弹出框宽度
Theme Studio自定义
弹出框打开/关闭的动画设置

Events and Interactivity

事件与交互

📄 Read: references/dropdownbutton-events-and-interactivity.md

Handling
```
select
```
event on item click
```
beforeOpen
```
/
```
beforeClose
```
for dynamic caret icon
```
open
```
event for custom popup positioning
Disabling the button with
```
disabled
```
RTL support with
```
enableRtl
```
Opening a dialog on item select
Dynamic
```
addItems
```
/
```
removeItems
```
methods
```
toggle
```
method for programmatic open/close

📄 阅读: references/dropdownbutton-events-and-interactivity.md

处理项点击时的
```
select
```
事件
使用
```
beforeOpen
```
/
```
beforeClose
```
实现动态 caret 图标
使用
```
open
```
事件自定义弹出框位置
使用
```
disabled
```
禁用按钮
使用
```
enableRtl
```
支持RTL布局
选择项时打开对话框
使用
```
addItems
```
/
```
removeItems
```
方法动态添加/移除项
使用
```
toggle
```
方法程序化控制弹出框的打开/关闭

Item Template

项模板

📄 Read: references/dropdownbutton-item-template.md

```
itemTemplate
```
property for custom item rendering
Rendering links, icons, and rich content inside items

📄 阅读: references/dropdownbutton-item-template.md

使用
```
itemTemplate
```
属性自定义项渲染
在项内渲染链接、图标和富内容

ListView Integration

ListView集成

📄 Read: references/dropdownbutton-listview-integration.md

Using
```
target
```
property with a ListView element
Grouped popup items with category headers

📄 阅读: references/dropdownbutton-listview-integration.md

将
```
target
```
属性与ListView元素配合使用
带分类标题的分组弹出项

Accessibility

无障碍访问

📄 Read: references/dropdownbutton-accessibility.md

WCAG 2.2, Section 508, ADA compliance
WAI-ARIA attributes (
```
role
```
,
```
aria-haspopup
```
,
```
aria-expanded
```
)
Keyboard navigation shortcuts
Screen reader support

📄 阅读: references/dropdownbutton-accessibility.md

符合WCAG 2.2、Section 508、ADA标准
WAI-ARIA属性（
```
role
```
、
```
aria-haspopup
```
、
```
aria-expanded
```
）
键盘导航快捷键
屏幕阅读器支持

API Reference

API参考

📄 Read: references/dropdownbutton-api.md

All properties:

items

cssClass

iconCss

iconPosition

disabled

enableRtl

animationSettings

popupWidth

target

itemTemplate

content

closeActionEvents

createPopupOnClick

enableHtmlSanitizer

enablePersistence

locale

All events:

beforeClose

beforeOpen

beforeItemRender

close

open

select

created

All methods:

addItems

removeItems

toggle

focusIn

destroy

getPersistData

Type definitions:

ItemModel

MenuEventArgs

OpenCloseMenuEventArgs

BeforeOpenCloseMenuEventArgs

📄 阅读: references/dropdownbutton-api.md

所有属性：

items

、

cssClass

、

iconCss

、

iconPosition

、

disabled

、

enableRtl

、

animationSettings

、

popupWidth

、

target

、

itemTemplate

、

content

、

closeActionEvents

、

createPopupOnClick

、

enableHtmlSanitizer

、

enablePersistence

、

locale

所有事件：

beforeClose

、

beforeOpen

、

beforeItemRender

、

close

、

open

、

select

、

created

所有方法：

addItems

、

removeItems

、

toggle

、

focusIn

、

destroy

、

getPersistData

类型定义：

ItemModel

、

MenuEventArgs

、

OpenCloseMenuEventArgs

、

BeforeOpenCloseMenuEventArgs

Quick Start

快速开始

tsx

import { DropDownButtonComponent, ItemModel } from '@syncfusion/ej2-react-splitbuttons';
import { enableRipple } from '@syncfusion/ej2-base';
import * as React from 'react';
import './App.css';

enableRipple(true);

function App() {
  const items: ItemModel[] = [
    { text: 'Cut' },
    { text: 'Copy' },
    { text: 'Paste' },
  ];

  return (
    <DropDownButtonComponent items={items}>
      Clipboard
    </DropDownButtonComponent>
  );
}

export default App;

tsx

import { DropDownButtonComponent, ItemModel } from '@syncfusion/ej2-react-splitbuttons';
import { enableRipple } from '@syncfusion/ej2-base';
import * as React from 'react';
import './App.css';

enableRipple(true);

function App() {
  const items: ItemModel[] = [
    { text: 'Cut' },
    { text: 'Copy' },
    { text: 'Paste' },
  ];

  return (
    <DropDownButtonComponent items={items}>
      Clipboard
    </DropDownButtonComponent>
  );
}

export default App;

Common Patterns

常见模式

Button with icon and popup icons

带图标和弹出项图标的按钮

tsx

const items: ItemModel[] = [
  { text: 'Edit',   iconCss: 'ddb-icons e-edit' },
  { text: 'Delete', iconCss: 'ddb-icons e-delete' },
];
<DropDownButtonComponent items={items} iconCss="ddb-icons e-message">
  Message
</DropDownButtonComponent>

tsx

const items: ItemModel[] = [
  { text: 'Edit',   iconCss: 'ddb-icons e-edit' },
  { text: 'Delete', iconCss: 'ddb-icons e-delete' },
];
<DropDownButtonComponent items={items} iconCss="ddb-icons e-message">
  Message
</DropDownButtonComponent>

Grouped items with separator

带分隔符的分组项

tsx

const items: ItemModel[] = [
  { text: 'Cut',   iconCss: 'e-db-icons e-cut' },
  { text: 'Copy',  iconCss: 'e-icons e-copy' },
  { separator: true },
  { text: 'Font',  iconCss: 'e-db-icons e-font' },
];

tsx

const items: ItemModel[] = [
  { text: 'Cut',   iconCss: 'e-db-icons e-cut' },
  { text: 'Copy',  iconCss: 'e-icons e-copy' },
  { separator: true },
  { text: 'Font',  iconCss: 'e-db-icons e-font' },
];

Handling item selection

处理项选择

tsx

import { MenuEventArgs } from '@syncfusion/ej2-react-splitbuttons';

function onSelect(args: MenuEventArgs) {
  console.log('Selected:', args.item.text);
}
<DropDownButtonComponent items={items} select={onSelect}>
  Actions
</DropDownButtonComponent>

tsx

import { MenuEventArgs } from '@syncfusion/ej2-react-splitbuttons';

function onSelect(args: MenuEventArgs) {
  console.log('Selected:', args.item.text);
}
<DropDownButtonComponent items={items} select={onSelect}>
  Actions
</DropDownButtonComponent>

Floating Action Button

The Syncfusion React

FabComponent

is a circular button that floats above the UI and represents the primary action in an application. It supports flexible positioning, icon + text content, predefined styles, full accessibility compliance, and CSS customization.

Package:

@syncfusion/ej2-react-buttons

Syncfusion React

FabComponent

是一个圆形按钮，悬浮在UI上方，代表应用中的主操作。它支持灵活的定位、图标+文本内容、预定义样式、完整的无障碍访问合规性和CSS自定义。

包:

@syncfusion/ej2-react-buttons

Navigation Guide

导航指南

Getting Started

入门指南

📄 Read: references/floating-action-button-getting-started.md

Installing
```
@syncfusion/ej2-react-buttons
```
CSS theme imports for Tailwind3
Minimal
```
FabComponent
```
setup
Using
```
target
```
to position relative to a container
Handling the click event

📄 阅读: references/floating-action-button-getting-started.md

安装
```
@syncfusion/ej2-react-buttons
```
导入Tailwind3的CSS主题
最简
```
FabComponent
```
配置
使用
```
target
```
相对于容器定位
处理点击事件

Icons and Content

图标与内容

📄 Read: references/floating-action-button-icons.md

```
iconCss
```
prop for icon-only FAB
```
content
```
prop for text label
```
iconPosition
```
for icon-left vs icon-right layout
Combined icon + text examples

📄 阅读: references/floating-action-button-icons.md

使用
```
iconCss
```
属性创建仅图标FAB
使用
```
content
```
属性添加文本标签
使用
```
iconPosition
```
设置图标在文本左侧或右侧的布局
图标+文本组合示例

Positions

定位

📄 Read: references/floating-action-button-positions.md

```
position
```
prop with all nine predefined values (TopLeft → BottomRight)
```
target
```
prop to scope FAB to a container
Custom CSS position using
```
cssClass
```

📄 阅读: references/floating-action-button-positions.md

```
position
```
属性的9种预定义值（从TopLeft到BottomRight）
使用
```
target
```
属性将FAB限定在容器内
使用
```
cssClass
```
自定义CSS定位

Styles and Appearance

样式与外观

📄 Read: references/floating-action-button-styles.md

Predefined

cssClass

values:

e-primary

e-outline

e-info

e-success

e-warning

e-danger

CSS class override reference table
Show text on hover with CSS transition
Outline color customization

📄 阅读: references/floating-action-button-styles.md

预定义

cssClass

值：

e-primary

、

e-outline

、

e-info

、

e-success

、

e-warning

、

e-danger

CSS类覆盖参考表
使用CSS过渡实现悬停时显示文本
轮廓颜色自定义

Events

事件

📄 Read: references/floating-action-button-events.md

```
onClick
```
event for click handling
```
created
```
event for post-render initialization

📄 阅读: references/floating-action-button-events.md

```
onClick
```
事件处理点击
```
created
```
事件用于渲染后初始化

Accessibility

无障碍访问

📄 Read: references/floating-action-button-accessibility.md

WCAG 2.2 / Section 508 compliance
WAI-ARIA attributes (
```
aria-label
```
,
```
aria-disabled
```
,
```
role="button"
```
)
Keyboard navigation (Enter, Space, Tab, Escape)
RTL support via
```
enableRtl
```
Screen reader support

📄 阅读: references/floating-action-button-accessibility.md

符合WCAG 2.2 / Section 508标准
WAI-ARIA属性（
```
aria-label
```
、
```
aria-disabled
```
、
```
role="button"
```
）
键盘导航（Enter、Space、Tab、Escape）
通过
```
enableRtl
```
支持RTL布局
屏幕阅读器支持

API Reference

API参考

📄 Read: references/floating-action-button-api.md

All properties:

content

cssClass

disabled

enableHtmlSanitizer

enablePersistence

enableRtl

iconCss

iconPosition

isPrimary

isToggle

position

target

visible

Methods:

click()

destroy()

focusIn()

getPersistData()

refreshPosition()

Events:
```
created
```
,
```
onClick
```

📄 阅读: references/floating-action-button-api.md

所有属性：

content

、

cssClass

、

disabled

、

enableHtmlSanitizer

、

enablePersistence

、

enableRtl

、

iconCss

、

iconPosition

、

isPrimary

、

isToggle

、

position

、

target

、

visible

方法：

click()

、

destroy()

、

focusIn()

、

getPersistData()

、

refreshPosition()

事件：
```
created
```
、
```
onClick
```

Quick Start

快速开始

⚠️ Run the following command manually in your terminal. Do not execute automatically.

bash

undefined

⚠️ 请在终端中手动运行以下命令，不要自动执行。

bash

undefined

Run in your terminal

npm install @syncfusion/ej2-react-buttons --save


```css
/* src/App.css */
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css";

tsx

import { FabComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import './App.css';

function App() {
  return (
    <div>
      <div id="targetElement" style={{ position: 'relative', minHeight: '350px', border: '1px solid' }}></div>
      <FabComponent id="fab" content="Add" target="#targetElement" />
    </div>
  );
}
export default App;

npm install @syncfusion/ej2-react-buttons --save


```css
/* src/App.css */
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css";

tsx

import { FabComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import './App.css';

function App() {
  return (
    <div>
      <div id="targetElement" style={{ position: 'relative', minHeight: '350px', border: '1px solid' }}></div>
      <FabComponent id="fab" content="Add" target="#targetElement" />
    </div>
  );
}
export default App;

Common Patterns

常见模式

Icon-Only FAB (most common)

仅图标FAB（最常用）

tsx

import { FabComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';

function App() {
  return (
    <div>
      <div id="target" style={{ position: 'relative', minHeight: '350px' }}></div>
      <FabComponent id="fab" iconCss="e-icons e-edit" target="#target" />
    </div>
  );
}
export default App;

tsx

import { FabComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';

function App() {
  return (
    <div>
      <div id="target" style={{ position: 'relative', minHeight: '350px' }}></div>
      <FabComponent id="fab" iconCss="e-icons e-edit" target="#target" />
    </div>
  );
}
export default App;

FAB with Click Handler

带点击事件的FAB

tsx

import { FabComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';

function App() {
  function handleClick(): void {
    alert('FAB clicked!');
  }

  return (
    <div>
      <div id="target" style={{ position: 'relative', minHeight: '350px' }}></div>
      <FabComponent id="fab" iconCss="e-icons e-edit" content="Edit" onClick={handleClick} target="#target" />
    </div>
  );
}
export default App;

tsx

import { FabComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';

function App() {
  function handleClick(): void {
    alert('FAB clicked!');
  }

  return (
    <div>
      <div id="target" style={{ position: 'relative', minHeight: '350px' }}></div>
      <FabComponent id="fab" iconCss="e-icons e-edit" content="Edit" onClick={handleClick} target="#target" />
    </div>
  );
}
export default App;

FAB with Custom Style

自定义样式的FAB

tsx

import { FabComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';

function App() {
  return (
    <div>
      <div id="target" style={{ position: 'relative', minHeight: '350px' }}></div>
      <FabComponent id="fab" iconCss="e-icons e-delete" cssClass="e-danger" target="#target" />
    </div>
  );
}
export default App;

tsx

import { FabComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';

function App() {
  return (
    <div>
      <div id="target" style={{ position: 'relative', minHeight: '350px' }}></div>
      <FabComponent id="fab" iconCss="e-icons e-delete" cssClass="e-danger" target="#target" />
    </div>
  );
}
export default App;

Key Props at a Glance

关键属性概览

Prop	Type	Default	Purpose
`iconCss`	`string`	`''`	CSS class for the FAB icon
`content`	`string`	`''`	Text label displayed on/beside the FAB
`iconPosition`	`'Left' \| 'Right'`	`'Left'`	Icon placement relative to text
`position`	`FabPosition`	`'BottomRight'`	Predefined position within target/viewport
`target`	`string \| HTMLElement`	`''`	Container element selector for FAB scoping
`cssClass`	`string`	`''`	Custom CSS class(es) for styling
`disabled`	`boolean`	`false`	Disables the FAB
`visible`	`boolean`	`true`	Shows or hides the FAB
`isPrimary`	`boolean`	`true`	Applies primary styling
`enableRtl`	`boolean`	`false`	Right-to-left rendering
`enableHtmlSanitizer`	`boolean`	`true`	Sanitizes HTML in `content`

属性	类型	默认值	用途
`iconCss`	`string`	`''`	FAB图标的CSS类
`content`	`string`	`''`	FAB上/旁边显示的文本标签
`iconPosition`	`'Left' \| 'Right'`	`'Left'`	图标相对于文本的位置
`position`	`FabPosition`	`'BottomRight'`	在目标/视口中的预定义位置
`target`	`string \| HTMLElement`	`''`	FAB作用范围的容器元素选择器
`cssClass`	`string`	`''`	自定义CSS类（用于样式）
`disabled`	`boolean`	`false`	禁用FAB
`visible`	`boolean`	`true`	显示或隐藏FAB
`isPrimary`	`boolean`	`true`	应用主样式
`enableRtl`	`boolean`	`false`	从右到左渲染
`enableHtmlSanitizer`	`boolean`	`true`	清理 `content` 中的HTML

Speed Dial

The Syncfusion

SpeedDialComponent

is a floating action button (FAB) that reveals a set of contextual action items when clicked or hovered. It supports Linear and Radial display modes, flexible positioning, templates, animations, modal overlay, and full accessibility.

Syncfusion

SpeedDialComponent

是一个浮动操作按钮（FAB），点击或悬停时会显示一组上下文操作项。它支持线性和径向显示模式、灵活的定位、模板、动画、模态遮罩和完整的无障碍访问。

Navigation Guide

导航指南

Getting Started

入门指南

📄 Read: references/speeddial-getting-started.md

Installation and package setup
CSS imports and theme configuration
Rendering the first SpeedDialComponent
Basic items configuration
Target element setup

📄 阅读: references/speeddial-getting-started.md

安装和包配置
CSS导入和主题设置
渲染第一个SpeedDialComponent
基础项配置
目标元素设置

Items Configuration

项配置

📄 Read: references/speeddial-items.md

SpeedDialItemModel fields (text, iconCss, id, title, disabled)
Icon only, text only, icon with text combinations
Disabling individual items
Animation effects (Fade, Zoom, etc.)
Item templates overview

📄 阅读: references/speeddial-items.md

SpeedDialItemModel字段（text、iconCss、id、title、disabled）
仅图标、仅文本、图标+文本的组合
禁用单个项
动画效果（淡入、缩放等）
项模板概述

Display Modes

显示模式

📄 Read: references/speeddial-display-modes.md

Linear mode (default) and direction values (Up, Down, Left, Right, Auto)
Radial mode overview and usage

📄 阅读: references/speeddial-display-modes.md

线性模式（默认）和方向值（Up、Down、Left、Right、Auto）
径向模式概述和用法

Radial Menu

径向菜单

📄 Read: references/speeddial-radial-menu.md

Setting mode to Radial
radialSettings: direction (Clockwise, AntiClockwise, Auto)
startAngle and endAngle configuration
offset to control item distance from button

📄 阅读: references/speeddial-radial-menu.md

将模式设置为Radial
radialSettings: direction（Clockwise、AntiClockwise、Auto）
startAngle和endAngle配置
offset控制项与按钮的距离

Positions and Visibility Control

定位与可见性控制

📄 Read: references/speeddial-positions.md

Position values (TopLeft, TopCenter, TopRight, MiddleLeft, MiddleCenter, MiddleRight, BottomLeft, BottomCenter, BottomRight)
Target element relative positioning
opensOnHover for hover-based open behavior
Programmatic show() and hide() methods
refreshPosition() after layout changes

📄 阅读: references/speeddial-positions.md

位置值（TopLeft、TopCenter、TopRight、MiddleLeft、MiddleCenter、MiddleRight、BottomLeft、BottomCenter、BottomRight）
相对于目标元素的定位
opensOnHover实现悬停打开行为
程序化show()和hide()方法
布局变化后调用refreshPosition()

Styles and Appearance

样式与外观

📄 Read: references/speeddial-styles.md

openIconCss and closeIconCss for button icons
content property for text button
Predefined cssClass values (e-primary, e-outline, e-info, e-success, e-warning, e-danger)
disabled and visible properties
Tooltip via title attribute
Custom CSS overrides

📄 阅读: references/speeddial-styles.md

openIconCss和closeIconCss设置按钮图标
content属性设置文本按钮
预定义cssClass值（e-primary、e-outline、e-info、e-success、e-warning、e-danger）
disabled和visible属性
通过title属性添加提示框
自定义CSS覆盖

Templates

模板

📄 Read: references/speeddial-template.md

itemTemplate for custom item rendering
popupTemplate for full popup customization
JSX function template pattern

📄 阅读: references/speeddial-template.md

itemTemplate自定义项渲染
popupTemplate自定义完整弹出框
JSX函数模板模式

Events

事件

📄 Read: references/speeddial-events.md

clicked, created, beforeOpen, onOpen, beforeClose, onClose, beforeItemRender
Event argument types: SpeedDialItemEventArgs, SpeedDialBeforeOpenCloseEventArgs, SpeedDialOpenCloseEventArgs
Cancel pattern for beforeOpen and beforeClose

📄 阅读: references/speeddial-events.md

clicked、created、beforeOpen、onOpen、beforeClose、onClose、beforeItemRender
事件参数类型：SpeedDialItemEventArgs、SpeedDialBeforeOpenCloseEventArgs、SpeedDialOpenCloseEventArgs
beforeOpen和beforeClose的取消模式

Modal

模态

📄 Read: references/speeddial-modal.md

Enabling modal overlay
Interaction blocking behavior
Close on backdrop click

📄 阅读: references/speeddial-modal.md

启用模态遮罩
交互阻止行为
点击背景关闭

Accessibility

无障碍访问

📄 Read: references/speeddial-accessibility.md

WCAG 2.2, Section 508 compliance
WAI-ARIA attributes (role, aria-expanded, aria-label, etc.)
Keyboard navigation shortcuts
Screen reader support
RTL support via enableRtl

📄 阅读: references/speeddial-accessibility.md

符合WCAG 2.2、Section 508标准
WAI-ARIA属性（role、aria-expanded、aria-label等）
键盘导航快捷键
屏幕阅读器支持
通过enableRtl支持RTL布局

API Reference

API参考

📄 Read: references/speeddial-api.md

All properties, methods, and events with types and defaults

📄 阅读: references/speeddial-api.md

所有属性、方法和事件及其类型和默认值

Quick Start

快速开始

⚠️ Run the following command manually in your terminal. Do not execute automatically.

bash

undefined

⚠️ 请在终端中手动运行以下命令，不要自动执行。

bash

undefined

Run in your terminal

npm install @syncfusion/ej2-react-buttons --save


```css
/* src/App.css */
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css";

tsx

import { SpeedDialComponent, SpeedDialItemModel } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import './App.css';

function App() {
  const items: SpeedDialItemModel[] = [
    { text: 'Cut', iconCss: 'e-icons e-cut' },
    { text: 'Copy', iconCss: 'e-icons e-copy' },
    { text: 'Paste', iconCss: 'e-icons e-paste' }
  ];

  return (
    <div id="targetElement" style={{ position: 'relative', minHeight: '350px', border: '1px solid' }}>
      <SpeedDialComponent
        id='speeddial'
        content='Edit'
        openIconCss='e-icons e-edit'
        closeIconCss='e-icons e-close'
        items={items}
        target="#targetElement"
      />
    </div>
  );
}
export default App;

npm install @syncfusion/ej2-react-buttons --save


```css
/* src/App.css */
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css";

tsx

import { SpeedDialComponent, SpeedDialItemModel } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import './App.css';

function App() {
  const items: SpeedDialItemModel[] = [
    { text: 'Cut', iconCss: 'e-icons e-cut' },
    { text: 'Copy', iconCss: 'e-icons e-copy' },
    { text: 'Paste', iconCss: 'e-icons e-paste' }
  ];

  return (
    <div id="targetElement" style={{ position: 'relative', minHeight: '350px', border: '1px solid' }}>
      <SpeedDialComponent
        id='speeddial'
        content='Edit'
        openIconCss='e-icons e-edit'
        closeIconCss='e-icons e-close'
        items={items}
        target="#targetElement"
      />
    </div>
  );
}
export default App;

Common Patterns

常见模式

Icon-only items with tooltip

仅图标项带提示框

tsx

const items: SpeedDialItemModel[] = [
  { iconCss: 'e-icons e-cut', title: 'Cut' },
  { iconCss: 'e-icons e-copy', title: 'Copy' },
  { iconCss: 'e-icons e-paste', title: 'Paste' }
];
<SpeedDialComponent id='speeddial' openIconCss='e-icons e-edit' items={items} target="#targetElement" />

tsx

const items: SpeedDialItemModel[] = [
  { iconCss: 'e-icons e-cut', title: 'Cut' },
  { iconCss: 'e-icons e-copy', title: 'Copy' },
  { iconCss: 'e-icons e-paste', title: 'Paste' }
];
<SpeedDialComponent id='speeddial' openIconCss='e-icons e-edit' items={items} target="#targetElement" />

Radial mode

径向模式

tsx

import { RadialSettingsModel } from '@syncfusion/ej2-react-buttons';
const radialSettings: RadialSettingsModel = { direction: 'AntiClockwise', offset: '80px' };
<SpeedDialComponent id='speeddial' openIconCss='e-icons e-edit' items={items}
  mode='Radial' radialSettings={radialSettings} target="#targetElement" />

tsx

import { RadialSettingsModel } from '@syncfusion/ej2-react-buttons';
const radialSettings: RadialSettingsModel = { direction: 'AntiClockwise', offset: '80px' };
<SpeedDialComponent id='speeddial' openIconCss='e-icons e-edit' items={items}
  mode='Radial' radialSettings={radialSettings} target="#targetElement" />

Handle item click

处理项点击

tsx

import { SpeedDialItemEventArgs } from '@syncfusion/ej2-react-buttons';
function itemClick(args: SpeedDialItemEventArgs) {
  console.log('Clicked:', args.item.text);
}
<SpeedDialComponent id='speeddial' items={items} content='Edit' clicked={itemClick} target="#targetElement" />

tsx

import { SpeedDialItemEventArgs } from '@syncfusion/ej2-react-buttons';
function itemClick(args: SpeedDialItemEventArgs) {
  console.log('Clicked:', args.item.text);
}
<SpeedDialComponent id='speeddial' items={items} content='Edit' clicked={itemClick} target="#targetElement" />

Modal with overlay

带遮罩的模态

tsx

<SpeedDialComponent id='speeddial' items={items} openIconCss='e-icons e-edit'
  modal={true} target="#targetElement" />

tsx

<SpeedDialComponent id='speeddial' items={items} openIconCss='e-icons e-edit'
  modal={true} target="#targetElement" />

Programmatic open/close

程序化打开/关闭

tsx

let speeddialRef: SpeedDialComponent;
<SpeedDialComponent id='speeddial' items={items} openIconCss='e-icons e-edit'
  target="#targetElement" ref={scope => { speeddialRef = scope; }} />
// Open:  speeddialRef.show();
// Close: speeddialRef.hide();

tsx

let speeddialRef: SpeedDialComponent;
<SpeedDialComponent id='speeddial' items={items} openIconCss='e-icons e-edit'
  target="#targetElement" ref={scope => { speeddialRef = scope; }} />
// 打开:  speeddialRef.show();
// 关闭: speeddialRef.hide();

Implementing the Syncfusion React ProgressButton

实现Syncfusion React ProgressButton

The

ProgressButtonComponent

from

@syncfusion/ej2-react-splitbuttons

provides a button that visualises the progression of a background operation — complete with an animated spinner, a background progress bar fill, and content/style hooks at every stage of the operation.

来自

@syncfusion/ej2-react-splitbuttons

的

ProgressButtonComponent

提供了一个按钮，可可视化后台操作的进度——包含动画加载器、背景进度条填充，以及操作每个阶段的内容/样式钩子。

Navigation Guide

导航指南

Task	Read
Install package and first render	`references/getting-started.md`
Spinner position/size/template + progress bar + animations + step/percent/start/stop	`references/spinner-and-progress.md`
CSS classes, theming, Theme Studio	`references/style-and-appearance.md`
ARIA attributes, keyboard shortcuts, screen-reader compliance	`references/accessibility.md`
Enable the background progress fill	`references/how-to-enable-progress-in-button.md`
Hide the spinner (show only progress bar)	`references/how-to-hide-spinner.md`
Vertical, top, or reverse progress fill	`references/how-to-customize-progress-using-cssclass.md`
Change button text / CSS class while progress runs	`references/how-to-change-text-content-and-styles-of-the-progressbutton-during-progress.md`
Trace / handle lifecycle events	`references/how-to-trace-events-of-progress-button.md`
Full API reference (all props, events, methods, types)	`references/api.md`

任务	阅读文档
安装包并首次渲染	`references/getting-started.md`
加载器位置/尺寸/模板 + 进度条 + 动画 + 步骤/百分比/开始/停止	`references/spinner-and-progress.md`
CSS类、主题、Theme Studio	`references/style-and-appearance.md`
ARIA属性、键盘快捷键、屏幕阅读器合规性	`references/accessibility.md`
启用背景进度填充	`references/how-to-enable-progress-in-button.md`
隐藏加载器（仅显示进度条）	`references/how-to-hide-spinner.md`
垂直、顶部或反向进度填充	`references/how-to-customize-progress-using-cssclass.md`
进度运行时更改按钮文本/CSS类	`references/how-to-change-text-content-and-styles-of-the-progressbutton-during-progress.md`
追踪/处理生命周期事件	`references/how-to-trace-events-of-progress-button.md`
完整API参考（所有属性、事件、方法、类型）	`references/api.md`

Quick Start

快速开始

bash

npm install @syncfusion/ej2-react-splitbuttons --save

tsx

// src/App.tsx
import { ProgressButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import './App.css';

function App() {
  return <ProgressButtonComponent content="Submit" />;
}
export default App;

css

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

bash

npm install @syncfusion/ej2-react-splitbuttons --save

tsx

// src/App.tsx
import { ProgressButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import './App.css';

function App() {
  return <ProgressButtonComponent content="Submit" />;
}
export default App;

css

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

Common Patterns

常见模式

Progress bar + hidden spinner

进度条 + 隐藏加载器

tsx

<ProgressButtonComponent
  content="Upload"
  enableProgress={true}
  cssClass="e-hide-spinner"
  duration={4000}
/>

tsx

<ProgressButtonComponent
  content="Upload"
  enableProgress={true}
  cssClass="e-hide-spinner"
  duration={4000}
/>

Custom spinner (right, small, templated)

自定义加载器（右侧、小型、模板化）

tsx

import { SpinSettingsModel } from '@syncfusion/ej2-react-splitbuttons';

const spinSettings: SpinSettingsModel = {
  position: 'Right',
  width: 20,
  template: '<div class="my-spinner"></div>'
};

<ProgressButtonComponent content="Submit" spinSettings={spinSettings} />

tsx

import { SpinSettingsModel } from '@syncfusion/ej2-react-splitbuttons';

const spinSettings: SpinSettingsModel = {
  position: 'Right',
  width: 20,
  template: '<div class="my-spinner"></div>'
};

<ProgressButtonComponent content="Submit" spinSettings={spinSettings} />

Slide animation with centered spinner

滑动动画 + 居中加载器

tsx

import { AnimationSettingsModel, SpinSettingsModel } from '@syncfusion/ej2-react-splitbuttons';

const spinSettings: SpinSettingsModel = { position: 'Center' };
const animationSettings: AnimationSettingsModel = {
  effect: 'SlideLeft',
  duration: 500,
  easing: 'linear'
};

<ProgressButtonComponent
  content="Slide Left"
  enableProgress={true}
  spinSettings={spinSettings}
  animationSettings={animationSettings}
/>

tsx

import { AnimationSettingsModel, SpinSettingsModel } from '@syncfusion/ej2-react-splitbuttons';

const spinSettings: SpinSettingsModel = { position: 'Center' };
const animationSettings: AnimationSettingsModel = {
  effect: 'SlideLeft',
  duration: 500,
  easing: 'linear'
};

<ProgressButtonComponent
  content="Slide Left"
  enableProgress={true}
  spinSettings={spinSettings}
  animationSettings={animationSettings}
/>

Start / stop programmatic control

程序化控制开始/停止

tsx

let progressBtn: ProgressButtonComponent;

<ProgressButtonComponent
  content="Download"
  enableProgress={true}
  duration={4000}
  cssClass="e-hide-spinner"
  ref={(scope) => { progressBtn = scope as ProgressButtonComponent; }}
/>

// Pause:  progressBtn.stop();
// Resume: progressBtn.start();
// Finish: progressBtn.progressComplete();

tsx

let progressBtn: ProgressButtonComponent;

<ProgressButtonComponent
  content="Download"
  enableProgress={true}
  duration={4000}
  cssClass="e-hide-spinner"
  ref={(scope) => { progressBtn = scope as ProgressButtonComponent; }}
/>

// 暂停:  progressBtn.stop();
// 恢复: progressBtn.start();
// 完成: progressBtn.progressComplete();

Lifecycle events

生命周期事件

tsx

<ProgressButtonComponent
  content="Progress"
  enableProgress={true}
  begin={(args) => console.log('started', args.percent)}
  progress={(args) => console.log('progress', args.percent)}
  end={(args) => console.log('done', args.percent)}
  fail={(args) => console.log('failed', args)}
/>

tsx

<ProgressButtonComponent
  content="Progress"
  enableProgress={true}
  begin={(args) => console.log('started', args.percent)}
  progress={(args) => console.log('progress', args.percent)}
  end={(args) => console.log('done', args.percent)}
  fail={(args) => console.log('failed', args)}
/>

Reference Files

参考文件

File	Contents
`references/getting-started.md`	Installation, CSS imports, first component
`references/spinner-and-progress.md`	Spinner config, animation, step, dynamic %, start/stop
`references/style-and-appearance.md`	CSS class table, theming
`references/accessibility.md`	ARIA, keyboard nav, compliance matrix
`references/how-to-enable-progress-in-button.md`	`enableProgress` how-to
`references/how-to-hide-spinner.md`	`e-hide-spinner` how-to
`references/how-to-customize-progress-using-cssclass.md`	Vertical / top / reverse fill
`references/how-to-change-text-content-and-styles-of-the-progressbutton-during-progress.md`	Dynamic text/style during progress
`references/how-to-trace-events-of-progress-button.md`	Event tracing example
`references/api.md`	Full API: props, events, methods, types

文件	内容
`references/getting-started.md`	安装、CSS导入、第一个组件
`references/spinner-and-progress.md`	加载器配置、动画、步骤、动态百分比、开始/停止
`references/style-and-appearance.md`	CSS类表、主题
`references/accessibility.md`	ARIA、键盘导航、合规矩阵
`references/how-to-enable-progress-in-button.md`	`enableProgress` 实现指南
`references/how-to-hide-spinner.md`	`e-hide-spinner` 实现指南
`references/how-to-customize-progress-using-cssclass.md`	垂直/顶部/反向填充
`references/how-to-change-text-content-and-styles-of-the-progressbutton-during-progress.md`	进度期间动态文本/样式
`references/how-to-trace-events-of-progress-button.md`	事件追踪示例
`references/api.md`	完整API：属性、事件、方法、类型

Switch

The Syncfusion

SwitchComponent

is a graphical toggle control that switches between checked (on) and unchecked (off) states. It is part of the

@syncfusion/ej2-react-buttons

package and supports text labels, size variants, disabled state, form submission, RTL, programmatic control, and full CSS customization.

Syncfusion

SwitchComponent

是一种图形切换控件，可在选中（开启）和未选中（关闭）状态之间切换。它属于

@syncfusion/ej2-react-buttons

包，支持文本标签、尺寸变体、禁用状态、表单提交、RTL布局、程序化控制和完整的CSS自定义。

Navigation Guide

导航指南

Getting Started

入门指南

📄 Read: references/getting-started.md

Package installation and npm setup
CSS theme imports
Basic
```
SwitchComponent
```
rendering
Checked state initialization
Running the application

📄 阅读: references/getting-started.md

包安装和npm配置
CSS主题导入
基础
```
SwitchComponent
```
渲染
初始化选中状态
运行应用

Features and Configuration

功能与配置

📄 Read: references/features.md

```
onLabel
```
/
```
offLabel
```
text labels
```
disabled
```
property
```
name
```
and
```
value
```
for form submission
```
cssClass
```
for custom styling
```
enableRtl
```
for right-to-left support
```
enablePersistence
```
to persist state across reloads
```
htmlAttributes
```
for additional HTML attributes
```
locale
```
for localization

📄 阅读: references/features.md

```
onLabel
```
/
```
offLabel
```
文本标签
```
disabled
```
属性
用于表单提交的
```
name
```
和
```
value
```
用于自定义样式的
```
cssClass
```
用于从右到左支持的
```
enableRtl
```
用于跨重载保留状态的
```
enablePersistence
```
用于附加HTML属性的
```
htmlAttributes
```
用于本地化的
```
locale
```

Events and Methods

事件与方法

📄 Read: references/events-and-methods.md

```
change
```
event and
```
ChangeEventArgs
```
```
beforeChange
```
event to cancel state transitions
```
created
```
lifecycle event
```
toggle()
```
method for programmatic state control
```
click()
```
,
```
focusIn()
```
, and
```
destroy()
```
methods
Using
```
ref
```
to call methods imperatively

📄 阅读: references/events-and-methods.md

```
change
```
事件和
```
ChangeEventArgs
```
```
beforeChange
```
事件用于取消状态切换
```
created
```
生命周期事件
```
toggle()
```
方法用于程序化状态控制
```
click()
```
、
```
focusIn()
```
和
```
destroy()
```
方法
使用
```
ref
```
imperative调用方法

How-To Recipes

实现方案

📄 Read: references/how-to.md

Change switch size (small vs default)
Prevent state change using
```
beforeChange
```
Set text labels (ON/OFF)
Enable ripple on label click
Enable RTL layout
Set disabled state
Submit name and value in a form
Programmatic toggle via
```
toggle()
```
method

📄 阅读: references/how-to.md

更改开关尺寸（小型 vs 常规）
使用
```
beforeChange
```
阻止状态更改
设置文本标签（ON/OFF）
点击标签时启用波纹效果
启用RTL布局
设置禁用状态
在表单中提交name和value
通过
```
toggle()
```
方法程序化切换

Style and Appearance

样式与外观

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

CSS class reference table
Customizing bar and handle shape
Customizing switch colors
Small size variant
Using Theme Studio

📄 阅读: references/style-and-appearance.md

CSS类参考表
自定义滑块和手柄形状
自定义开关颜色
小型尺寸变体
使用Theme Studio

API Reference

API参考

📄 Read: references/api.md

All properties with types and defaults
All methods with return types
All events with argument interfaces
```
ChangeEventArgs
```
and
```
BeforeChangeEventArgs
```

📄 阅读: references/api.md

所有属性及其类型和默认值
所有方法及其返回类型
所有事件及其参数接口
```
ChangeEventArgs
```
和
```
BeforeChangeEventArgs
```

Quick Start

快速开始

tsx

import { SwitchComponent } from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
import '@syncfusion/ej2-base/styles/tailwind3.css';
import '@syncfusion/ej2-buttons/styles/tailwind3.css';

enableRipple(true);

function App() {
  return <SwitchComponent checked={true} />;
}
export default App;

Install the package first:

bash

npm install @syncfusion/ej2-react-buttons --save

tsx

import { SwitchComponent } from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
import '@syncfusion/ej2-base/styles/tailwind3.css';
import '@syncfusion/ej2-buttons/styles/tailwind3.css';

enableRipple(true);

function App() {
  return <SwitchComponent checked={true} />;
}
export default App;

先安装包：

bash

npm install @syncfusion/ej2-react-buttons --save

Common Patterns

常见模式

Switch with ON/OFF text labels

带ON/OFF文本标签的开关

tsx

<SwitchComponent onLabel="ON" offLabel="OFF" checked={true} />

Note: Text labels are not supported in Material themes.

tsx

<SwitchComponent onLabel="ON" offLabel="OFF" checked={true} />

注意：Material主题不支持文本标签。

Handle state changes

处理状态变化

tsx

import { ChangeEventArgs, SwitchComponent } from '@syncfusion/ej2-react-buttons';

function App() {
  function onChange(args: ChangeEventArgs) {
    console.log('Switch is now:', args.checked);
  }
  return <SwitchComponent change={onChange} />;
}

tsx

import { ChangeEventArgs, SwitchComponent } from '@syncfusion/ej2-react-buttons';

function App() {
  function onChange(args: ChangeEventArgs) {
    console.log('Switch is now:', args.checked);
  }
  return <SwitchComponent change={onChange} />;
}

Disabled switch

禁用开关

tsx

<SwitchComponent disabled={true} />

tsx

<SwitchComponent disabled={true} />

Small size switch

小型开关

tsx

<SwitchComponent cssClass="e-small" />

tsx

<SwitchComponent cssClass="e-small" />

Programmatic toggle

程序化切换

tsx

import { useRef } from 'react';
import { SwitchComponent } from '@syncfusion/ej2-react-buttons';

function App() {
  const switchRef = useRef<SwitchComponent>(null);

  function handleToggle() {
    switchRef.current?.toggle();
  }

  return (
    <>
      <SwitchComponent ref={switchRef} checked={false} />
      <button onClick={handleToggle}>Toggle</button>
    </>
  );
}

tsx

import { useRef } from 'react';
import { SwitchComponent } from '@syncfusion/ej2-react-buttons';

function App() {
  const switchRef = useRef<SwitchComponent>(null);

  function handleToggle() {
    switchRef.current?.toggle();
  }

  return (
    <>
      <SwitchComponent ref={switchRef} checked={false} />
      <button onClick={handleToggle}>Toggle</button>
    </>
  );
}

Form submission with name and value

带name和value的表单提交

tsx

<SwitchComponent name="wifi" value="enabled" checked={true} />

tsx

<SwitchComponent name="wifi" value="enabled" checked={true} />

Key Props at a Glance

关键属性概览

Prop	Type	Default	Purpose
`checked`	boolean	false	Initial checked state
`disabled`	boolean	false	Disables user interaction
`cssClass`	string	''	Custom CSS class (use `e-small` for small size)
`onLabel`	string	''	Label when checked
`offLabel`	string	''	Label when unchecked
`name`	string	''	Form field name
`value`	string	''	Form field value
`enableRtl`	boolean	false	Right-to-left layout
`enablePersistence`	boolean	false	Persist state on reload

属性	类型	默认值	用途
`checked`	boolean	false	初始选中状态
`disabled`	boolean	false	禁用用户交互
`cssClass`	string	''	自定义CSS类（使用 `e-small` 设置小型尺寸）
`onLabel`	string	''	选中时的标签
`offLabel`	string	''	未选中时的标签
`name`	string	''	表单字段名称
`value`	string	''	表单字段值
`enableRtl`	boolean	false	从右到左布局
`enablePersistence`	boolean	false	重载时保留状态

SplitButton

A comprehensive skill for implementing the SplitButton component in React applications. The SplitButton combines a primary action button with a dropdown menu for secondary actions.

这是一份在React应用中实现SplitButton组件的全面指南。SplitButton将主操作按钮与下拉菜单结合，用于次级操作。

Components Covered

涵盖组件

A button that displays a primary action and a dropdown menu of secondary actions.

Common Use Cases:

Save variants: Save, Save As, Save All
Send variants: Send, Schedule Send, Send All
Download variants: Download, Download All, Export
Share options: Share, Share Link, Share Email
Print options: Print, Print Preview, Print Settings

一个显示主操作和次级操作下拉菜单的按钮。

常见用例：

保存变体： 保存、另存为、全部保存
发送变体： 发送、定时发送、全部发送
下载变体： 下载、全部下载、导出
分享选项： 分享、分享链接、邮件分享
打印选项： 打印、打印预览、打印设置

Documentation

文档

Getting Started

入门指南

📄 Read: references/getting-started.md

Installation and package setup
Basic SplitButton implementation
CSS imports and themes
First working example
Module setup (standalone and module-based)

📄 阅读: references/getting-started.md

安装和包配置
基础SplitButton实现
CSS导入和主题
第一个可用示例
模块配置（独立和基于模块）

Types and Styles

类型与样式

📄 Read: references/types-and-styles.md

Button styles (primary, success, info, warning, danger, link)
Button types (flat, outline, round)
Icon positioning (left, right, top, bottom)
Size variations (small, medium, large)
Styled anchor elements
RTL support

📄 阅读: references/types-and-styles.md

按钮样式（primary、success、info、warning、danger、link）
按钮类型（flat、outline、round）
图标位置（左、右、上、下）
尺寸变体（小、中、大）
样式化锚点元素
RTL支持

SplitButton Features

SplitButton功能

📄 Read: references/splitbutton-features.md

Dropdown menu items
Icon and text combinations
Disabled state
Event handling (click, select, before open)
Dynamic item manipulation
Keyboard navigation
Tooltips and titles

📄 阅读: references/splitbutton-features.md

下拉菜单项
图标和文本组合
禁用状态
事件处理（click、select、before open）
动态项操作
键盘导航
提示框和标题

API Reference

API参考

📄 Read: references/api-reference.md

Complete properties documentation
Methods and their usage
Event handlers and callbacks
Model interfaces
Type definitions
Quick reference tables

📄 阅读: references/api-reference.md

完整属性文档
方法及其用法
事件处理程序和回调
模型接口
类型定义
快速参考表

Customization

自定义

📄 Read: references/customization.md

Custom CSS classes
Theming and color schemes
Custom icons and fonts
Custom templates for items
Responsive design
Animation and transitions
Item separators and grouping

📄 阅读: references/customization.md

自定义CSS类
主题和配色方案
自定义图标和字体
自定义项模板
响应式设计
动画和过渡
项分隔符和分组

Accessibility

无障碍访问

📄 Read: references/accessibility.md

WCAG 2.1 compliance
Keyboard navigation patterns
ARIA attributes
Screen reader support
Focus management
Accessible labels and descriptions

📄 阅读: references/accessibility.md

符合WCAG 2.1标准
键盘导航模式
ARIA属性
屏幕阅读器支持
焦点管理
无障碍标签和描述

Quick Start

快速开始

Basic SplitButton

基础SplitButton

tsx

import { SplitButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import '@syncfusion/ej2-react-splitbuttons/styles/material.css';

function App() {
  const items = [
    { text: 'Save' },
    { text: 'Save As' },
    { text: 'Save All' }
  ];

  const handleClick = (args) => {
    console.log('Primary action clicked');
  };

  const handleSelect = (args) => {
    console.log('Menu item selected:', args.item.text);
  };

  return (
    <SplitButtonComponent
      items={items}
      onClick={handleClick}
      select={handleSelect}
    >
      Save
    </SplitButtonComponent>
  );
}

export default App;

tsx

import { SplitButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import '@syncfusion/ej2-react-splitbuttons/styles/material.css';

function App() {
  const items = [
    { text: 'Save' },
    { text: 'Save As' },
    { text: 'Save All' }
  ];

  const handleClick = (args) => {
    console.log('Primary action clicked');
  };

  const handleSelect = (args) => {
    console.log('Menu item selected:', args.item.text);
  };

  return (
    <SplitButtonComponent
      items={items}
      onClick={handleClick}
      select={handleSelect}
    >
      Save
    </SplitButtonComponent>
  );
}

export default App;

SplitButton with Icons

带图标的SplitButton

tsx

import { SplitButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import '@syncfusion/ej2-react-splitbuttons/styles/material.css';

function SaveButton() {
  const items = [
    { text: 'Save', iconCss: 'e-icons e-save' },
    { text: 'Save As', iconCss: 'e-icons e-save-as' },
    { text: 'Save All', iconCss: 'e-icons e-save-all' }
  ];

  return (
    <SplitButtonComponent
      items={items}
      iconCss="e-icons e-save"
      cssClass="e-primary"
    >
      Save
    </SplitButtonComponent>
  );
}

export default SaveButton;

tsx

import { SplitButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import '@syncfusion/ej2-react-splitbuttons/styles/material.css';

function SaveButton() {
  const items = [
    { text: 'Save', iconCss: 'e-icons e-save' },
    { text: 'Save As', iconCss: 'e-icons e-save-as' },
    { text: 'Save All', iconCss: 'e-icons e-save-all' }
  ];

  return (
    <SplitButtonComponent
      items={items}
      iconCss="e-icons e-save"
      cssClass="e-primary"
    >
      Save
    </SplitButtonComponent>
  );
}

export default SaveButton;

SplitButton with Event Handling

带事件处理的SplitButton

tsx

import { SplitButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import { useState } from 'react';

function EventHandlingExample() {
  const [lastAction, setLastAction] = useState('');

  const items = [
    { text: 'Send Now' },
    { text: 'Schedule Send' },
    { text: 'Send Test' }
  ];

  const handlePrimaryClick = () => {
    setLastAction('Primary action: Send Now');
    console.log('Email sent immediately');
  };

  const handleMenuSelect = (args) => {
    setLastAction(`Menu selected: ${args.item.text}`);
    console.log('Selected:', args.item.text);
  };

  const handleBeforeOpen = (args) => {
    console.log('Dropdown menu opening');
  };

  return (
    <div>
      <SplitButtonComponent
        items={items}
        onClick={handlePrimaryClick}
        select={handleMenuSelect}
        beforeOpen={handleBeforeOpen}
        cssClass="e-primary"
      >
        Send
      </SplitButtonComponent>
      <p>{lastAction}</p>
    </div>
  );
}

export default EventHandlingExample;

tsx

import { SplitButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import { useState } from 'react';

function EventHandlingExample() {
  const [lastAction, setLastAction] = useState('');

  const items = [
    { text: 'Send Now' },
    { text: 'Schedule Send' },
    { text: 'Send Test' }
  ];

  const handlePrimaryClick = () => {
    setLastAction('Primary action: Send Now');
    console.log('Email sent immediately');
  };

  const handleMenuSelect = (args) => {
    setLastAction(`Menu selected: ${args.item.text}`);
    console.log('Selected:', args.item.text);
  };

  const handleBeforeOpen = (args) => {
    console.log('Dropdown menu opening');
  };

  return (
    <div>
      <SplitButtonComponent
        items={items}
        onClick={handlePrimaryClick}
        select={handleMenuSelect}
        beforeOpen={handleBeforeOpen}
        cssClass="e-primary"
      >
        Send
      </SplitButtonComponent>
      <p>{lastAction}</p>
    </div>
  );
}

export default EventHandlingExample;

SplitButton with Dynamic Items

带动态项的SplitButton

tsx

import { SplitButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import { useRef, useState } from 'react';

function DynamicItemsExample() {
  const [items, setItems] = useState([
    { text: 'Option 1' },
    { text: 'Option 2' }
  ]);

  const splitBtnRef = useRef(null);

  const addItem = () => {
    const newItem = { text: `Option ${items.length + 1}` };
    setItems([...items, newItem]);
  };

  const removeItem = () => {
    if (items.length > 1) {
      setItems(items.slice(0, -1));
    }
  };

  return (
    <div>
      <SplitButtonComponent
        ref={splitBtnRef}
        items={items}
        cssClass="e-primary"
      >
        Action
      </SplitButtonComponent>
      <div style={{ marginTop: '20px' }}>
        <button onClick={addItem}>Add Item</button>
        <button onClick={removeItem} style={{ marginLeft: '10px' }}>
          Remove Item
        </button>
      </div>
    </div>
  );
}

export default DynamicItemsExample;

tsx

import { SplitButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import { useRef, useState } from 'react';

function DynamicItemsExample() {
  const [items, setItems] = useState([
    { text: 'Option 1' },
    { text: 'Option 2' }
  ]);

  const splitBtnRef = useRef(null);

  const addItem = () => {
    const newItem = { text: `Option ${items.length + 1}` };
    setItems([...items, newItem]);
  };

  const removeItem = () => {
    if (items.length > 1) {
      setItems(items.slice(0, -1));
    }
  };

  return (
    <div>
      <SplitButtonComponent
        ref={splitBtnRef}
        items={items}
        cssClass="e-primary"
      >
        Action
      </SplitButtonComponent>
      <div style={{ marginTop: '20px' }}>
        <button onClick={addItem}>Add Item</button>
        <button onClick={removeItem} style={{ marginLeft: '10px' }}>
          Remove Item
        </button>
      </div>
    </div>
  );
}

export default DynamicItemsExample;

SplitButton with Custom Template

带自定义模板的SplitButton

tsx

import { SplitButtonComponent } from '@syncfusion/ej2-react-splitbuttons';

function CustomTemplateExample() {
  const items = [
    { text: 'Bold', icon: 'B' },
    { text: 'Italic', icon: 'I' },
    { text: 'Underline', icon: 'U' }
  ];

  const itemTemplate = (props) => {
    return (
      <div style={{ display: 'flex', alignItems: 'center', padding: '8px' }}>
        <span style={{ 
          fontWeight: props.icon === 'B' ? 'bold' : 'normal',
          fontStyle: props.icon === 'I' ? 'italic' : 'normal',
          textDecoration: props.icon === 'U' ? 'underline' : 'none',
          marginRight: '8px'
        }}>
          {props.icon}
        </span>
        <span>{props.text}</span>
      </div>
    );
  };

  return (
    <SplitButtonComponent
      items={items}
      itemTemplate={itemTemplate}
      cssClass="e-primary"
    >
      Format Text
    </SplitButtonComponent>
  );
}

export default CustomTemplateExample;

tsx

import { SplitButtonComponent } from '@syncfusion/ej2-react-splitbuttons';

function CustomTemplateExample() {
  const items = [
    { text: 'Bold', icon: 'B' },
    { text: 'Italic', icon: 'I' },
    { text: 'Underline', icon: 'U' }
  ];

  const itemTemplate = (props) => {
    return (
      <div style={{ display: 'flex', alignItems: 'center', padding: '8px' }}>
        <span style={{ 
          fontWeight: props.icon === 'B' ? 'bold' : 'normal',
          fontStyle: props.icon === 'I' ? 'italic' : 'normal',
          textDecoration: props.icon === 'U' ? 'underline' : 'none',
          marginRight: '8px'
        }}>
          {props.icon}
        </span>
        <span>{props.text}</span>
      </div>
    );
  };

  return (
    <SplitButtonComponent
      items={items}
      itemTemplate={itemTemplate}
      cssClass="e-primary"
    >
      Format Text
    </SplitButtonComponent>
  );
}

export default CustomTemplateExample;

Common Patterns

常见模式

Save Variant Pattern

保存变体模式

tsx

const items = [
  { text: 'Save', iconCss: 'e-icons e-save' },
  { separator: true },
  { text: 'Save As', iconCss: 'e-icons e-save-as' },
  { text: 'Save All', iconCss: 'e-icons e-save-all' }
];

tsx

const items = [
  { text: 'Save', iconCss: 'e-icons e-save' },
  { separator: true },
  { text: 'Save As', iconCss: 'e-icons e-save-as' },
  { text: 'Save All', iconCss: 'e-icons e-save-all' }
];

Download Pattern

下载模式

tsx

const items = [
  { text: 'Download PDF' },
  { text: 'Download Excel' },
  { text: 'Download CSV' },
  { separator: true },
  { text: 'Download All' }
];

tsx

const items = [
  { text: 'Download PDF' },
  { text: 'Download Excel' },
  { text: 'Download CSV' },
  { separator: true },
  { text: 'Download All' }
];

Share Pattern

分享模式

tsx

const items = [
  { text: 'Share Link', iconCss: 'e-icons e-link' },
  { text: 'Email', iconCss: 'e-icons e-mail' },
  { text: 'Print', iconCss: 'e-icons e-print' },
  { text: 'Export', iconCss: 'e-icons e-export' }
];

tsx

const items = [
  { text: 'Share Link', iconCss: 'e-icons e-link' },
  { text: 'Email', iconCss: 'e-icons e-mail' },
  { text: 'Print', iconCss: 'e-icons e-print' },
  { text: 'Export', iconCss: 'e-icons e-export' }
];

State Management Pattern

状态管理模式

tsx

const [isLoading, setIsLoading] = useState(false);

const handleAction = async (args) => {
  setIsLoading(true);
  try {
    // Perform action
    await performAction(args.item.text);
  } finally {
    setIsLoading(false);
  }
};

tsx

const [isLoading, setIsLoading] = useState(false);

const handleAction = async (args) => {
  setIsLoading(true);
  try {
    // 执行操作
    await performAction(args.item.text);
  } finally {
    setIsLoading(false);
  }
};

Key Properties Overview

关键属性概览

Property	Type	Default	Purpose
`items`	`ItemModel[]`	`[]`	Dropdown menu items
`cssClass`	`string`	`''`	CSS classes for styling
`iconCss`	`string`	`''`	Icon CSS for primary button
`iconPosition`	`string`	`'Left'`	Icon position (Left, Right, Top, Bottom)
`disabled`	`boolean`	`false`	Disable the button
`enableRtl`	`boolean`	`false`	Enable RTL mode
`created`	`function`	-	Event on component creation
`click`	`function`	-	Primary button click handler
`select`	`function`	-	Menu item selection handler
`beforeOpen`	`function`	-	Before dropdown opens
`beforeClose`	`function`	-	Before dropdown closes
`open`	`function`	-	After dropdown opens
`close`	`function`	-	After dropdown closes

属性	类型	默认值	用途
`items`	`ItemModel[]`	`[]`	下拉菜单项
`cssClass`	`string`	`''`	用于样式的CSS类
`iconCss`	`string`	`''`	主按钮的图标CSS
`iconPosition`	`string`	`'Left'`	图标位置（Left、Right、Top、Bottom）
`disabled`	`boolean`	`false`	禁用按钮
`enableRtl`	`boolean`	`false`	启用RTL模式
`created`	`function`	-	组件创建时的事件
`click`	`function`	-	主按钮点击处理程序
`select`	`function`	-	菜单项选择处理程序
`beforeOpen`	`function`	-	下拉菜单打开前的事件
`beforeClose`	`function`	-	下拉菜单关闭前的事件
`open`	`function`	-	下拉菜单打开后的事件
`close`	`function`	-	下拉菜单关闭后的事件

Next Steps

下一步

Installation & Setup → Read getting-started.md
Styling Options → Read types-and-styles.md
Features → Read splitbutton-features.md
Complete API → Read api-reference.md
Advanced Customization → Read customization.md
Accessibility → Read accessibility.md

安装与配置 → 阅读 getting-started.md
样式选项 → 阅读 types-and-styles.md
功能 → 阅读 splitbutton-features.md
完整API → 阅读 api-reference.md
高级自定义 → 阅读 customization.md
无障碍访问 → 阅读 accessibility.md

Troubleshooting Quick Links

故障排除快速链接

Items not showing? → Check references/getting-started.md#css-imports
Events not firing? → Check references/splitbutton-features.md#event-handling
Styling issues? → Check references/types-and-styles.md
Accessibility concerns? → Check references/accessibility.md

项未显示？ → 查看 references/getting-started.md#css-imports
事件未触发？ → 查看 references/splitbutton-features.md#event-handling
样式问题？ → 查看 references/types-and-styles.md
无障碍访问问题？ → 查看 references/accessibility.md

Resources

资源

Official Documentation: Syncfusion React SplitButton
API Reference: Syncfusion SplitButton API
Live Demos: Syncfusion React Demos

官方文档: Syncfusion React SplitButton
API参考: Syncfusion SplitButton API
在线演示: Syncfusion React Demos

Implementing Syncfusion React RadioButton

实现Syncfusion React RadioButton

A skill for implementing the Syncfusion React

RadioButtonComponent

— a graphical UI element that lets users select exactly one option from a group. Supports checked/unchecked states, label positioning, small size, form integration, RTL, disabled state, and full CSS customization.

这是一份关于实现Syncfusion React

RadioButtonComponent

的指南——这是一种图形UI元素，允许用户从一组选项中选择恰好一个。支持选中/未选中状态、标签定位、小型尺寸、表单集成、RTL布局、禁用状态和完整的CSS自定义。

Navigation Guide

导航指南

Getting Started

入门指南

📄 Read: references/getting-started.md

Package installation and CSS import
Basic
```
RadioButtonComponent
```
rendering
Grouping radio buttons with
```
name
```
prop
Quick Vite + React project setup
Enabling ripple effect

📄 阅读: references/getting-started.md

包安装和CSS导入
基础
```
RadioButtonComponent
```
渲染
使用
```
name
```
属性对单选按钮分组
Vite + React项目快速配置
启用波纹效果

Label and Size

标签与尺寸

📄 Read: references/label-and-size.md

Adding captions with the
```
label
```
property
Positioning labels before/after with
```
labelPosition
```
Applying small size with
```
cssClass="e-small"
```
Default vs. compact size variants

📄 阅读: references/label-and-size.md

使用
```
label
```
属性添加标题
使用
```
labelPosition
```
将标签定位在按钮之前/之后
使用
```
cssClass="e-small"
```
应用小型尺寸
常规与紧凑尺寸变体

Features and State

功能与状态

📄 Read: references/features-and-state.md

Setting checked/unchecked state with
```
checked
```
Disabling a RadioButton with
```
disabled
```
Grouping and form submission with
```
name
```
and
```
value
```
RTL layout with
```
enableRtl
```
Handling state change via the
```
change
```
event
Listening to component lifecycle with
```
created
```

📄 阅读: references/features-and-state.md

使用
```
checked
```
设置选中/未选中状态
使用
```
disabled
```
禁用RadioButton
使用
```
name
```
和
```
value
```
进行分组和表单提交
使用
```
enableRtl
```
实现RTL布局
通过
```
change
```
事件处理状态变化
通过
```
created
```
监听组件生命周期

Style and Appearance

样式与外观

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

Overriding default CSS classes
Creating semantic color variants (primary, success, warning, etc.)
Using
```
cssClass
```
for custom styles
Theme Studio integration for global theming
CSS class reference table

📄 阅读: references/style-and-appearance.md

覆盖默认CSS类
创建语义颜色变体（primary、success、warning等）
使用
```
cssClass
```
自定义样式
Theme Studio集成用于全局主题
CSS类参考表

Accessibility

无障碍访问

📄 Read: references/accessibility.md

WCAG 2.2 and Section 508 compliance
WAI-ARIA attributes (
```
role
```
,
```
aria-checked
```
,
```
aria-disabled
```
)
Keyboard navigation shortcuts
Screen reader support

📄 阅读: references/accessibility.md

符合WCAG 2.2和Section 508标准
WAI-ARIA属性（
```
role
```
、
```
aria-checked
```
、
```
aria-disabled
```
）
键盘导航快捷键
屏幕阅读器支持

API Reference

API参考

📄 Read: references/api.md

All properties:

checked

disabled

label

labelPosition

name

value

cssClass

enableRtl

enablePersistence

enableHtmlSanitizer

htmlAttributes

locale

Methods:

click()

destroy()

focusIn()

getSelectedValue()

Events:
```
change
```
(ChangeArgs),
```
created
```

📄 阅读: references/api.md

所有属性：

checked

、

disabled

、

label

、

labelPosition

、

name

、

value

、

cssClass

、

enableRtl

、

enablePersistence

、

enableHtmlSanitizer

、

htmlAttributes

、

locale

方法：

click()

、

destroy()

、

focusIn()

、

getSelectedValue()

事件：
```
change
```
（ChangeArgs）、
```
created
```

Quick Start

快速开始

tsx

import { enableRipple } from '@syncfusion/ej2-base';
import { RadioButtonComponent } from '@syncfusion/ej2-react-buttons';
import '@syncfusion/ej2-base/styles/tailwind3.css';
import '@syncfusion/ej2-buttons/styles/tailwind3.css';

enableRipple(true);

function App() {
  return (
    <ul>
      <li><RadioButtonComponent label="Option 1" name="group1" checked={true} /></li>
      <li><RadioButtonComponent label="Option 2" name="group1" /></li>
      <li><RadioButtonComponent label="Option 3" name="group1" /></li>
    </ul>
  );
}
export default App;

tsx

import { enableRipple } from '@syncfusion/ej2-base';
import { RadioButtonComponent } from '@syncfusion/ej2-react-buttons';
import '@syncfusion/ej2-base/styles/tailwind3.css';
import '@syncfusion/ej2-buttons/styles/tailwind3.css';

enableRipple(true);

function App() {
  return (
    <ul>
      <li><RadioButtonComponent label="Option 1" name="group1" checked={true} /></li>
      <li><RadioButtonComponent label="Option 2" name="group1" /></li>
      <li><RadioButtonComponent label="Option 3" name="group1" /></li>
    </ul>
  );
}
export default App;

Common Patterns

常见模式

Controlled state with change handler

受控状态与变化处理程序

tsx

import { RadioButtonComponent, ChangeArgs } from '@syncfusion/ej2-react-buttons';
import { useState } from 'react';

function App() {
  const [selected, setSelected] = useState('monthly');

  const handleChange = (args: ChangeArgs) => {
    setSelected(args.value);
  };

  return (
    <ul>
      <li>
        <RadioButtonComponent
          label="Monthly"
          name="plan"
          value="monthly"
          checked={selected === 'monthly'}
          change={handleChange}
        />
      </li>
      <li>
        <RadioButtonComponent
          label="Yearly"
          name="plan"
          value="yearly"
          checked={selected === 'yearly'}
          change={handleChange}
        />
      </li>
    </ul>
  );
}

tsx

import { RadioButtonComponent, ChangeArgs } from '@syncfusion/ej2-react-buttons';
import { useState } from 'react';

function App() {
  const [selected, setSelected] = useState('monthly');

  const handleChange = (args: ChangeArgs) => {
    setSelected(args.value);
  };

  return (
    <ul>
      <li>
        <RadioButtonComponent
          label="Monthly"
          name="plan"
          value="monthly"
          checked={selected === 'monthly'}
          change={handleChange}
        />
      </li>
      <li>
        <RadioButtonComponent
          label="Yearly"
          name="plan"
          value="yearly"
          checked={selected === 'yearly'}
          change={handleChange}
        />
      </li>
    </ul>
  );
}

Form submission with name/value

带name/value的表单提交

tsx

<form>
  <RadioButtonComponent name="payment" value="card"    label="Credit Card" checked={true} />
  <RadioButtonComponent name="payment" value="bank"    label="Net Banking" />
  <RadioButtonComponent name="payment" value="cod"     label="Cash on Delivery" />
  <button type="submit">Submit</button>
</form>

tsx

<form>
  <RadioButtonComponent name="payment" value="card"    label="Credit Card" checked={true} />
  <RadioButtonComponent name="payment" value="bank"    label="Net Banking" />
  <RadioButtonComponent name="payment" value="cod"     label="Cash on Delivery" />
  <button type="submit">Submit</button>
</form>

Disabled option in a group

组内禁用选项

tsx

<RadioButtonComponent label="Available"   name="seat" />
<RadioButtonComponent label="Unavailable" name="seat" disabled={true} />

tsx

<RadioButtonComponent label="Available"   name="seat" />
<RadioButtonComponent label="Unavailable" name="seat" disabled={true} />

Small compact size

小型紧凑尺寸

tsx

<RadioButtonComponent label="Compact" name="size" cssClass="e-small" />

tsx

<RadioButtonComponent label="Compact" name="size" cssClass="e-small" />

RTL support

RTL支持

tsx

<RadioButtonComponent label="خيار 1" name="rtl" enableRtl={true} />

tsx

<RadioButtonComponent label="خيار 1" name="rtl" enableRtl={true} />

Key Props Summary

关键属性摘要

Prop	Type	Default	Purpose
`label`	string	`''`	Caption displayed next to the button
`name`	string	`''`	Groups buttons as mutually exclusive
`value`	string	`''`	Form value submitted when checked
`checked`	boolean	`false`	Sets checked state
`disabled`	boolean	`false`	Prevents user interaction
`labelPosition`	`'Before'` \| `'After'`	`'After'`	Label placement
`cssClass`	string	`''`	Custom CSS class(es)
`enableRtl`	boolean	`false`	Right-to-left layout
`enablePersistence`	boolean	`false`	Persists state across page reloads

属性	类型	默认值	用途
`label`	string	`''`	按钮旁边显示的标题
`name`	string	`''`	将按钮分组为互斥选项
`value`	string	`''`	选中时提交的表单值
`checked`	boolean	`false`	设置选中状态
`disabled`	boolean	`false`	阻止用户交互
`labelPosition`	`'Before'` \| `'After'`	`'After'`	标签位置
`cssClass`	string	`''`	自定义CSS类
`enableRtl`	boolean	`false`	从右到左布局
`enablePersistence`	boolean	`false`	跨页面重载保留状态

Decision Guide

决策指南

User picks one of many options → Use
```
name
```
to group +
```
value
```
for each option
Pre-select a default → Set
```
checked={true}
```
on the desired option
Read which option is selected → Use
```
change
```
event (
```
args.value
```
) or call
```
getSelectedValue()
```
Prevent selection of an option → Use
```
disabled={true}
```
Dense UI layout → Add
```
cssClass="e-small"
```
RTL language UI → Use
```
enableRtl={true}
```
Custom color/branding → Use
```
cssClass
```
with custom CSS rules (see style-and-appearance.md)

用户从多个选项中选一个 → 使用
```
name
```
分组 + 每个选项设置
```
value
```
预选中默认选项 → 在目标选项上设置
```
checked={true}
```
读取选中的选项 → 使用
```
change
```
事件（
```
args.value
```
）或调用
```
getSelectedValue()
```
阻止选择某个选项 → 使用
```
disabled={true}
```
紧凑UI布局 → 添加
```
cssClass="e-small"
```
RTL语言UI → 使用
```
enableRtl={true}
```
自定义颜色/品牌 → 使用
```
cssClass
```
配合自定义CSS规则（查看style-and-appearance.md）