syncfusion-angular-buttons

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion Angular Buttons

实现Syncfusion Angular按钮组件

Button

The Syncfusion Angular Button is a graphical user interface element rendered via the

ejs-button

directive. It triggers an action on click and supports text, icons, or both — with extensive styling, accessibility, and behavioral options.

Syncfusion Angular Button是通过

ejs-button

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

Navigation Guide

导航指南

Getting Started

快速入门

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

Prerequisites and package dependencies
Setting up a new Angular application (standalone architecture)
Installing
```
@syncfusion/ej2-angular-buttons
```
via
```
ng add
```
CSS/theme imports for Material and other themes
Rendering the first
```
ejs-button
```
directive
Changing button type using
```
cssClass
```

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

前置条件和包依赖
搭建新Angular应用（独立架构）
通过
```
ng add
```
安装
```
@syncfusion/ej2-angular-buttons
```
Material及其他主题的CSS/主题导入
渲染第一个
```
ejs-button
```
指令
使用
```
cssClass
```
更改按钮类型

Types and Styles

类型与样式

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

Predefined color styles (

e-primary

e-success

e-info

e-warning

e-danger

e-link

)

Basic HTML types: submit and reset buttons
Flat, outline, round, and toggle button types
Toggle button active state via
```
e-active
```
class
Icon buttons using
```
iconCss
```
and
```
iconPosition
```
SVG icon support
Button sizes: small (
```
e-small
```
) vs normal

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

预定义颜色样式（

e-primary

、

e-success

、

e-info

、

e-warning

、

e-danger

、

e-link

）

基础HTML类型：提交按钮和重置按钮
扁平、轮廓、圆形和切换按钮类型
通过
```
e-active
```
类设置切换按钮激活状态
使用
```
iconCss
```
和
```
iconPosition
```
创建图标按钮
SVG图标支持
按钮尺寸：小尺寸（
```
e-small
```
）与默认尺寸

How-To Patterns

实操模式

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

Create a block (full-width) button using
```
e-block
```
Create a rounded-corner button with custom CSS
Add a navigation link inside a button
Customize button appearance with a custom CSS class
Style native
```
<input>
```
and
```
<a>
```
elements as buttons
Set disabled state with
```
[disabled]="true"
```
Enable right-to-left (RTL) support with
```
[enableRtl]="true"
```
Add a tooltip on hover using the
```
created
```
event
Implement a repeat button using mouse and touch events

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

使用
```
e-block
```
创建块级（全宽）按钮
通过自定义CSS创建圆角按钮
在按钮内添加导航链接
使用自定义CSS类自定义按钮外观
将原生
```
<input>
```
和
```
<a>
```
元素样式化为按钮
通过
```
[disabled]="true"
```
设置禁用状态
通过
```
[enableRtl]="true"
```
启用从右到左（RTL）布局
使用
```
created
```
事件添加悬停提示
通过鼠标和触摸事件实现重复按钮

Accessibility

无障碍访问

📄 Read: references/button-accessibility.md

WCAG 2.2 and Section 508 compliance details
WAI-ARIA attributes (
```
aria-label
```
for icon-only buttons)
Keyboard interaction: Space key behavior
Screen reader support and automated testing tools

📄 阅读： references/button-accessibility.md

WCAG 2.2和Section 508合规细节
WAI-ARIA属性（仅图标按钮使用
```
aria-label
```
）
键盘交互：空格键行为
屏幕阅读器支持和自动化测试工具

EJ1 Migration

EJ1迁移

📄 Read: references/button-ej1-migration.md

Property mapping from EJ1 to EJ2 (e.g.,
```
text
```
→
```
content
```
,
```
prefixIcon
```
→
```
iconCss
```
)
Method and event equivalents
Properties not available in EJ2

📄 阅读： references/button-ej1-migration.md

从EJ1到EJ2的属性映射（例如：
```
text
```
→
```
content
```
、
```
prefixIcon
```
→
```
iconCss
```
）
方法和事件等效项
EJ2中不支持的属性

API Reference

API参考

📄 Read: references/button-api.md

All properties with types, defaults, and code samples
Methods:
```
click()
```
,
```
focusIn()
```
,
```
destroy()
```
Events:
```
created
```

📄 阅读： references/button-api.md

所有属性的类型、默认值和代码示例
方法：
```
click()
```
、
```
focusIn()
```
、
```
destroy()
```
事件：
```
created
```

Quick Start

快速启动

bash

ng add @syncfusion/ej2-angular-buttons

typescript

// src/app/app.ts (Angular 20+) or src/app/app.component.ts (Angular 19 and below)
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { Component } from '@angular/core';

@Component({
  imports: [ButtonModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="e-section-control">
      <button ejs-button>Default</button>
      <button ejs-button cssClass="e-primary">Primary</button>
      <button ejs-button cssClass="e-success">Success</button>
    </div>
  `
})
export class AppComponent { }

Angular 20+ note: The CLI generates
src/app/app.ts
,
app.html
, and
app.css
(no
.component.
suffix). In Angular 19 and below, the file is
app.component.ts
.

bash

ng add @syncfusion/ej2-angular-buttons

typescript

// src/app/app.ts (Angular 20+) 或 src/app/app.component.ts (Angular 19及以下)
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { Component } from '@angular/core';

@Component({
  imports: [ButtonModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="e-section-control">
      <button ejs-button>Default</button>
      <button ejs-button cssClass="e-primary">Primary</button>
      <button ejs-button cssClass="e-success">Success</button>
    </div>
  `
})
export class AppComponent { }

Angular 20+注意： CLI会生成
src/app/app.ts
、
app.html
和
app.css
（无
.component.
后缀）。在Angular 19及以下版本中，文件名为
app.component.ts
。

Common Patterns

常见模式

Color-Styled Buttons

颜色样式按钮

html

<button ejs-button cssClass="e-primary">Primary</button>
<button ejs-button cssClass="e-success">Success</button>
<button ejs-button cssClass="e-warning">Warning</button>
<button ejs-button cssClass="e-danger">Danger</button>

html

<button ejs-button cssClass="e-primary">Primary</button>
<button ejs-button cssClass="e-success">Success</button>
<button ejs-button cssClass="e-warning">Warning</button>
<button ejs-button cssClass="e-danger">Danger</button>

Icon Button

图标按钮

html

<button ejs-button iconCss="e-icons e-save">Save</button>
<button ejs-button iconCss="e-icons e-delete" iconPosition="Right">Delete</button>

html

<button ejs-button iconCss="e-icons e-save">Save</button>
<button ejs-button iconCss="e-icons e-delete" iconPosition="Right">Delete</button>

Toggle Button

切换按钮

typescript

// In component class
@ViewChild('togglebtn') togglebtn: ButtonComponent | any;
@HostListener('click', ['togglebtn'])
btnClick() {
  if (this.togglebtn.element.classList.contains('e-active')) {
    this.togglebtn.content = 'Pause';
  } else {
    this.togglebtn.content = 'Play';
  }
}

html

<button #togglebtn ejs-button cssClass="e-flat" [isToggle]="true" content="Play"></button>

typescript

// 在组件类中
@ViewChild('togglebtn') togglebtn: ButtonComponent | any;
@HostListener('click', ['togglebtn'])
btnClick() {
  if (this.togglebtn.element.classList.contains('e-active')) {
    this.togglebtn.content = 'Pause';
  } else {
    this.togglebtn.content = 'Play';
  }
}

html

<button #togglebtn ejs-button cssClass="e-flat" [isToggle]="true" content="Play"></button>

Disabled Button

禁用按钮

html

<button ejs-button [disabled]="true">Disabled</button>

html

<button ejs-button [disabled]="true">Disabled</button>

Block (Full-Width) Button

块级（全宽）按钮

html

<button ejs-button cssClass="e-block e-primary">Full Width</button>

html

<button ejs-button cssClass="e-block e-primary">Full Width</button>

ButtonGroup

The Syncfusion Angular ButtonGroup is a CSS-only component that groups multiple buttons together into a single cohesive UI element. It supports horizontal and vertical layouts, radio/checkbox selection behaviors, outline and color styles, icon buttons, nested split/dropdown buttons, RTL, form integration, and full accessibility compliance.

Package:

@syncfusion/ej2-angular-buttons

Container class:

.e-btn-group

Button directive:

ejs-button

(from

ButtonModule

)

Syncfusion Angular ButtonGroup是一个纯CSS组件，可将多个按钮组合成一个连贯的UI元素。它支持水平和垂直布局、单选/复选选择行为、轮廓和颜色样式、图标按钮、嵌套拆分/下拉按钮、RTL、表单集成，并完全符合无障碍访问标准。

包：

@syncfusion/ej2-angular-buttons

容器类：

.e-btn-group

按钮指令：

ejs-button

（来自

ButtonModule

）

Navigation Guide

导航指南

Getting Started

快速入门

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

Installing
```
@syncfusion/ej2-angular-buttons
```
via
```
ng add
```
```
ButtonModule
```
import in standalone component's
```
imports[]
```
CSS theme imports for material theme
Basic horizontal ButtonGroup with
```
ejs-button
```
Vertical orientation using
```
e-vertical
```
class

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

通过
```
ng add
```
安装
```
@syncfusion/ej2-angular-buttons
```
在独立组件的
```
imports[]
```
中导入
```
ButtonModule
```
Material主题的CSS导入
使用
```
ejs-button
```
创建基础水平ButtonGroup
使用
```
e-vertical
```
类设置垂直方向

Types and Styles

类型与样式

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

Outline ButtonGroup (
```
e-outline
```
on container + each button)

Color styles:

e-primary

e-success

e-info

e-warning

e-danger

via

cssClass

Rounded corners with
```
e-round-corner
```
Icon buttons using
```
iconCss
```
property

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

轮廓样式ButtonGroup（容器添加
```
e-outline
```
+ 每个按钮添加
```
e-outline
```
）

颜色样式：通过

cssClass

设置

e-primary

、

e-success

、

e-info

、

e-warning

、

e-danger

使用
```
e-round-corner
```
设置圆角
使用
```
iconCss
```
属性创建图标按钮

Selection (Radio & Checkbox)

选择（单选和复选）

📄 Read: references/buttongroup-selection.md

Single selection (radio type) with

<input type="radio">

<label class="e-btn">

Multiple selection (checkbox type) with

<input type="checkbox">

<label class="e-btn">

Show pre-selected state on initial render using
```
checked
```
attribute
Nesting DropDownButton or SplitButton inside a group

📄 阅读： references/buttongroup-selection.md

单选类型（

<input type="radio">

<label class="e-btn">

）

多选类型（

<input type="checkbox">

<label class="e-btn">

）

使用
```
checked
```
属性在初始渲染时显示预选中状态
在组内嵌套DropDownButton或SplitButton

How-To Recipes

实操方案

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

Disable individual button or entire group
Enable ripple effect
RTL (right-to-left) layout
Form submission with radio/checkbox button groups
Programmatic initialization using
```
createButtonGroup
```
utility

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

禁用单个按钮或整个组
启用涟漪效果
RTL（从右到左）布局
单选/复选按钮组的表单提交
使用
```
createButtonGroup
```
工具进行程序化初始化

Accessibility

无障碍访问

📄 Read: references/buttongroup-accessibility.md

WCAG 2.2 / Section 508 compliance
Keyboard navigation shortcuts (normal, checkbox, radio behaviors)
Screen reader guidance

📄 阅读： references/buttongroup-accessibility.md

WCAG 2.2 / Section 508合规性
键盘导航快捷键（常规、复选、单选行为）
屏幕阅读器指南

Quick Start

快速启动

1. Install the package:

bash

ng add @syncfusion/ej2-angular-buttons

2. Add CSS to
styles.css
:

css

@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';

3. Create a basic ButtonGroup:

typescript

import { Component } from '@angular/core';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';

@Component({
  imports: [ButtonModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class='e-btn-group'>
      <button ejs-button>HTML</button>
      <button ejs-button>CSS</button>
      <button ejs-button>JavaScript</button>
    </div>`
})
export class AppComponent { }

1. 安装包：

bash

ng add @syncfusion/ej2-angular-buttons

2. 在
styles.css
中添加CSS：

css

@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';

3. 创建基础ButtonGroup：

typescript

import { Component } from '@angular/core';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';

@Component({
  imports: [ButtonModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class='e-btn-group'>
      <button ejs-button>HTML</button>
      <button ejs-button>CSS</button>
      <button ejs-button>JavaScript</button>
    </div>`
})
export class AppComponent { }

Common Patterns

常见模式

Vertical ButtonGroup

垂直ButtonGroup

Add

e-vertical

to the container — buttons stack top-to-bottom:

html

<div class='e-btn-group e-vertical'>
  <button ejs-button>HTML</button>
  <button ejs-button>CSS</button>
  <button ejs-button>JavaScript</button>
</div>

e-vertical
does not support nesting SplitButton.

向容器添加

e-vertical

类，按钮将从上到下堆叠：

html

<div class='e-btn-group e-vertical'>
  <button ejs-button>HTML</button>
  <button ejs-button>CSS</button>
  <button ejs-button>JavaScript</button>
</div>

e-vertical
不支持嵌套SplitButton。

Outline Style

轮廓样式

Add

e-outline

to container and

cssClass='e-outline'

to each button:

html

<div class='e-btn-group e-outline'>
  <button ejs-button cssClass='e-outline'>HTML</button>
  <button ejs-button cssClass='e-outline'>CSS</button>
  <button ejs-button cssClass='e-outline'>JavaScript</button>
</div>

向容器添加

e-outline

，并为每个按钮设置

cssClass='e-outline'

：

html

<div class='e-btn-group e-outline'>
  <button ejs-button cssClass='e-outline'>HTML</button>
  <button ejs-button cssClass='e-outline'>CSS</button>
  <button ejs-button cssClass='e-outline'>JavaScript</button>
</div>

Radio Selection (Single Select)

单选选择（单选）

html

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

html

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

Checkbox Selection (Multi Select)

复选选择（多选）

html

<div class='e-btn-group'>
  <input type="checkbox" id="check_bold" name="font" value="bold"/>
  <label class="e-btn" for="check_bold">Bold</label>
  <input type="checkbox" id="check_italic" name="font" value="italic"/>
  <label class="e-btn" for="check_italic">Italic</label>
  <input type="checkbox" id="check_underline" name="font" value="underline"/>
  <label class="e-btn" for="check_underline">Underline</label>
</div>

html

<div class='e-btn-group'>
  <input type="checkbox" id="check_bold" name="font" value="bold"/>
  <label class="e-btn" for="check_bold">Bold</label>
  <input type="checkbox" id="check_italic" name="font" value="italic"/>
  <label class="e-btn" for="check_italic">Italic</label>
  <input type="checkbox" id="check_underline" name="font" value="underline"/>
  <label class="e-btn" for="check_underline">Underline</label>
</div>

Key Decision Guide

关键决策指南

User Need	Approach
Group action buttons visually	Basic `e-btn-group` with `ejs-button`
Only one option selectable at a time	Radio type (input[radio] + label.e-btn)
Multiple options selectable	Checkbox type (input[checkbox] + label.e-btn)
Stack buttons vertically	Add `e-vertical` to container
Buttons with icons	`iconCss` property on each `ejs-button`
Rounded edges on group	`e-round-corner` on container
RTL layout	`e-rtl` on container
Programmatic initialization	`createButtonGroup` from `@syncfusion/ej2-splitbuttons`
Extend group with dropdown/popup	Nest `ejs-dropdownbutton` or `ejs-splitbutton`

用户需求	实现方式
视觉上分组操作按钮	使用 `e-btn-group` 搭配 `ejs-button` 的基础组合
同一时间仅能选择一个选项	单选类型（input[radio] + label.e-btn）
可选择多个选项	复选类型（input[checkbox] + label.e-btn）
垂直堆叠按钮	向容器添加 `e-vertical` 类
带图标的按钮	在每个 `ejs-button` 上使用 `iconCss` 属性
组的圆角边缘	向容器添加 `e-round-corner` 类
RTL布局	向容器添加 `e-rtl` 类
程序化初始化	使用 `@syncfusion/ej2-splitbuttons` 中的 `createButtonGroup`
扩展组以添加下拉/弹出菜单	嵌套 `ejs-dropdownbutton` 或 `ejs-splitbutton`

DropDownButton

The Syncfusion Angular DropDownButton is a graphical UI element rendered via the

ejs-dropdownbutton

directive. It displays a button that opens a popup menu of action items when clicked. It supports icons, custom templates, animations, navigation links, accessibility, RTL, and dynamic item management.

Syncfusion Angular DropDownButton是通过

ejs-dropdownbutton

指令渲染的图形UI元素，显示一个按钮，点击时打开包含操作项的弹出菜单。它支持图标、自定义模板、动画、导航链接、无障碍访问、RTL和动态项管理。

Navigation Guide

导航指南

Getting Started

快速入门

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

Prerequisites and package dependencies
Setting up a new Angular application (standalone architecture)

Installing

@syncfusion/ej2-angular-splitbuttons

via

ng add

CSS/theme imports for Material and other themes
Rendering the first
```
ejs-dropdownbutton
```
directive
Defining
```
ItemModel[]
```
action items

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

前置条件和包依赖
搭建新Angular应用（独立架构）

通过

ng add

安装

@syncfusion/ej2-angular-splitbuttons

Material及其他主题的CSS/主题导入
渲染第一个
```
ejs-dropdownbutton
```
指令
定义
```
ItemModel[]
```
操作项

Icons and Appearance

图标与外观

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

Button icon with
```
iconCss
```
and
```
iconPosition
```
(Left, Top)
Vertical button layout using
```
e-vertical
```
cssClass
Icon-only button with
```
e-caret-hide
```
cssClass
Sprite image as button icon
Hiding the dropdown arrow
Rounded corner styling
Customizing icon size and button width
Changing the caret/dropdown arrow icon dynamically

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

使用
```
iconCss
```
和
```
iconPosition
```
（Left、Top）设置按钮图标
使用
```
e-vertical
```
cssClass设置垂直按钮布局
使用
```
e-caret-hide
```
cssClass创建仅图标按钮
使用精灵图作为按钮图标
隐藏下拉箭头
圆角样式
自定义图标尺寸和按钮宽度
动态更改下拉箭头图标

Popup Items and Templating

弹出项与模板

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

Icons on popup action items via
```
iconCss
```
Navigation links via
```
url
```
property on items
Separator items using
```
separator: true
```
Item-level templating with
```
beforeItemRender
```
event
Full popup templating using
```
target
```
property
```
itemTemplate
```
property for custom item rendering
Grouping items with ListView as popup target
Underlining a character in item text

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

通过
```
iconCss
```
为弹出操作项设置图标
通过项的
```
url
```
属性设置导航链接
使用
```
separator: true
```
设置分隔符项
使用
```
beforeItemRender
```
事件进行项级模板设置
使用
```
target
```
属性进行完整弹出模板设置
使用
```
itemTemplate
```
属性自定义项渲染
使用ListView作为弹出目标进行项分组
在项文本中为字符添加下划线

Events and Interactivity

事件与交互

📄 Read: references/dropdownbutton-events.md

```
select
```
— handle item selection
```
open
```
/
```
close
```
— popup open/close callbacks
```
beforeOpen
```
/
```
beforeClose
```
— cancel or customize before open/close
```
beforeItemRender
```
— customize each item during render
```
created
```
— component initialized callback
Opening a dialog on popup item click
Changing popup open position via
```
open
```
event

📄 阅读： references/dropdownbutton-events.md

```
select
```
— 处理项选择
```
open
```
/
```
close
```
— 弹出菜单打开/关闭回调
```
beforeOpen
```
/
```
beforeClose
```
— 在打开/关闭前取消或自定义
```
beforeItemRender
```
— 在渲染时自定义每个项
```
created
```
— 组件初始化完成回调
点击弹出项时打开对话框
通过
```
open
```
事件更改弹出菜单打开位置

Animation

动画

📄 Read: references/dropdownbutton-animation.md

```
animationSettings
```
property overview
Supported effects: None, SlideDown, ZoomIn, FadeIn
Configuring
```
duration
```
and
```
easing
```

📄 阅读： references/dropdownbutton-animation.md

```
animationSettings
```
属性概述
支持的效果：None、SlideDown、ZoomIn、FadeIn
配置
```
duration
```
和
```
easing
```

Configuration and Behavior

配置与行为

📄 Read: references/dropdownbutton-configuration.md

Disabling the DropDownButton via
```
disabled
```
RTL support via
```
enableRtl
```
```
popupWidth
```
for consistent popup sizing
```
createPopupOnClick
```
for deferred popup creation
```
enableHtmlSanitizer
```
for safe HTML rendering
```
closeActionEvents
```
to customize popup close trigger
```
enablePersistence
```
for state persistence
Dynamic item management:
```
addItems
```
,
```
removeItems
```
,
```
toggle
```

📄 阅读： references/dropdownbutton-configuration.md

通过
```
disabled
```
禁用DropDownButton
通过
```
enableRtl
```
支持RTL
使用
```
popupWidth
```
设置一致的弹出菜单尺寸
使用
```
createPopupOnClick
```
延迟创建弹出菜单
使用
```
enableHtmlSanitizer
```
进行安全HTML渲染
使用
```
closeActionEvents
```
自定义弹出菜单关闭触发条件
使用
```
enablePersistence
```
进行状态持久化
动态项管理：
```
addItems
```
、
```
removeItems
```
、
```
toggle
```

API Reference

API参考

📄 Read: references/dropdownbutton-api.md

All properties with types, defaults, and descriptions
All events with argument types
All methods with parameters and return types
```
ItemModel
```
interface fields

Supporting interfaces:

BeforeOpenCloseMenuEventArgs

MenuEventArgs

OpenCloseMenuEventArgs

📄 阅读： references/dropdownbutton-api.md

所有属性的类型、默认值和描述
所有事件的参数类型
所有方法的参数和返回类型
```
ItemModel
```
接口字段

支持的接口：

BeforeOpenCloseMenuEventArgs

、

MenuEventArgs

、

OpenCloseMenuEventArgs

Accessibility

无障碍访问

📄 Read: references/dropdownbutton-accessibility.md

WCAG 2.2 / Section 508 compliance
WAI-ARIA attributes and roles
Keyboard navigation shortcuts
Screen reader support
RTL support

📄 阅读： references/dropdownbutton-accessibility.md

WCAG 2.2 / Section 508合规性
WAI-ARIA属性和角色
键盘导航快捷键
屏幕阅读器支持
RTL支持

Quick Start

快速启动

typescript

import { Component } from '@angular/core';
import { DropDownButtonModule, ItemModel } from '@syncfusion/ej2-angular-splitbuttons';

@Component({
  standalone: true,
  imports: [DropDownButtonModule],
  selector: 'app-root',
  template: `
    <button ejs-dropdownbutton [items]="items" content="Clipboard" iconCss="e-icons e-copy" (select)="onSelect($event)"></button>
  `
})
export class AppComponent {
  public items: ItemModel[] = [
    { text: 'Cut',   iconCss: 'e-icons e-cut' },
    { text: 'Copy',  iconCss: 'e-icons e-copy' },
    { text: 'Paste', iconCss: 'e-icons e-paste' }
  ];

  onSelect(args: any) {
    console.log('Selected:', args.item.text);
  }
}

typescript

import { Component } from '@angular/core';
import { DropDownButtonModule, ItemModel } from '@syncfusion/ej2-angular-splitbuttons';

@Component({
  standalone: true,
  imports: [DropDownButtonModule],
  selector: 'app-root',
  template: `
    <button ejs-dropdownbutton [items]="items" content="Clipboard" iconCss="e-icons e-copy" (select)="onSelect($event)"></button>
  `
})
export class AppComponent {
  public items: ItemModel[] = [
    { text: 'Cut',   iconCss: 'e-icons e-cut' },
    { text: 'Copy',  iconCss: 'e-icons e-copy' },
    { text: 'Paste', iconCss: 'e-icons e-paste' }
  ];

  onSelect(args: any) {
    console.log('Selected:', args.item.text);
  }
}

Common Patterns

常见模式

Popup with separator groups

带分隔符组的弹出菜单

typescript

public items: ItemModel[] = [
  { text: 'Cut' },
  { text: 'Copy' },
  { text: 'Paste' },
  { separator: true },
  { text: 'Font' },
  { text: 'Paragraph' }
];

typescript

public items: ItemModel[] = [
  { text: 'Cut' },
  { text: 'Copy' },
  { text: 'Paste' },
  { separator: true },
  { text: 'Font' },
  { text: 'Paragraph' }
];

Icon-only button (no text, no caret)

仅图标按钮（无文本、无箭头）

html

<button ejs-dropdownbutton [items]="items" iconCss="e-icons e-menu" cssClass="e-caret-hide"></button>

html

<button ejs-dropdownbutton [items]="items" iconCss="e-icons e-menu" cssClass="e-caret-hide"></button>

Vertical layout with top icon

顶部图标的垂直布局

html

<button ejs-dropdownbutton [items]="items" content="Paste" iconCss="e-icons e-paste" iconPosition="Top" cssClass="e-vertical"></button>

html

<button ejs-dropdownbutton [items]="items" content="Paste" iconCss="e-icons e-paste" iconPosition="Top" cssClass="e-vertical"></button>

RTL layout

RTL布局

html

<button ejs-dropdownbutton [items]="items" content="Message" enableRtl="true"></button>

html

<button ejs-dropdownbutton [items]="items" content="Message" enableRtl="true"></button>

Custom popup width

自定义弹出菜单宽度

html

<button ejs-dropdownbutton [items]="items" [popupWidth]="'250px'" content="Options"></button>

html

<button ejs-dropdownbutton [items]="items" [popupWidth]="'250px'" content="Options"></button>

Navigation items

导航项

typescript

public items: ItemModel[] = [
  { text: 'Home',   url: '/home' },
  { text: 'About',  url: '/about' }
];

typescript

public items: ItemModel[] = [
  { text: 'Home',   url: '/home' },
  { text: 'About',  url: '/about' }
];

Floating Action Button

The Syncfusion Angular Floating Action Button (

ejs-fab

) 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, events, full accessibility compliance, and CSS customization.

Package:

@syncfusion/ej2-angular-buttons

Module:

FabModule

Selector:

ejs-fab

Syncfusion Angular浮动操作按钮（

ejs-fab

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

包：

@syncfusion/ej2-angular-buttons

模块：

FabModule

选择器：

ejs-fab

Navigation Guide

导航指南

Getting Started

快速入门

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

Installing
```
@syncfusion/ej2-angular-buttons
```
via
```
ng add
```
CSS theme imports for Material theme
```
FabModule
```
import in standalone component
Minimal
```
ejs-fab
```
setup
Using
```
target
```
to scope FAB to a container
Handling the
```
(click)
```
event

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

通过
```
ng add
```
安装
```
@syncfusion/ej2-angular-buttons
```
Material主题的CSS导入
在独立组件中导入
```
FabModule
```
最小化
```
ejs-fab
```
设置
使用
```
target
```
将FAB限定在容器内
处理
```
(click)
```
事件

Icons and Content

图标与内容

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

```
iconCss
```
property for icon-only FAB
```
content
```
property for text label
```
iconPosition
```
for Left vs Right icon placement
Combined icon + text FAB examples

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

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

Positions

定位

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

```
position
```
property with all nine predefined values (
```
TopLeft
```
→
```
BottomRight
```
)
```
target
```
property to scope FAB to a container element
Custom CSS position using
```
cssClass
```
Calling
```
refreshPosition()
```
after target resize

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

```
position
```
属性包含9个预定义值（从
```
TopLeft
```
到
```
BottomRight
```
）
使用
```
target
```
属性将FAB限定在容器元素内
使用
```
cssClass
```
自定义CSS定位
目标元素调整大小后调用
```
refreshPosition()
```

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 (
```
.e-fab.e-btn
```
, hover, focus, active, icon)
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类覆盖参考表（
```
.e-fab.e-btn
```
、hover、focus、active、icon）
通过CSS过渡实现悬停时显示文本
轮廓颜色自定义

Events

事件

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

```
(created)
```
event for post-render initialization
```
(click)
```
event for click handling

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

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

Accessibility

无障碍访问

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

WCAG 2.2 / Section 508 compliance summary
WAI-ARIA attributes (
```
aria-label
```
)
Keyboard interaction (Space key)
RTL support via
```
enableRtl
```
Screen reader guidance

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

WCAG 2.2 / Section 508合规性摘要
WAI-ARIA属性（
```
aria-label
```
）
键盘交互（空格键）
通过
```
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
```
,
```
click
```

📄 阅读： 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
```
、
```
click
```

Quick Start

快速启动

bash

ng add @syncfusion/ej2-angular-buttons

css

/* styles.css – added automatically by ng add */
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-icons/styles/material.css';

typescript

import { FabModule } from '@syncfusion/ej2-angular-buttons';
import { Component } from '@angular/core';

@Component({
  imports: [FabModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div id="targetElement" style="position:relative;min-height:350px;border:1px solid;"></div>
    <button ejs-fab id="fab" content="Add" target="#targetElement"></button>
  `
})
export class AppComponent { }

bash

ng add @syncfusion/ej2-angular-buttons

css

/* styles.css – ng add会自动添加 */
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-icons/styles/material.css';

typescript

import { FabModule } from '@syncfusion/ej2-angular-buttons';
import { Component } from '@angular/core';

@Component({
  imports: [FabModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div id="targetElement" style="position:relative;min-height:350px;border:1px solid;"></div>
    <button ejs-fab id="fab" content="Add" target="#targetElement"></button>
  `
})
export class AppComponent { }

Common Patterns

常见模式

Icon-Only FAB (most common)

仅图标FAB（最常用）

typescript

import { FabModule } from '@syncfusion/ej2-angular-buttons';
import { Component } from '@angular/core';

@Component({
  imports: [FabModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div id="target" style="position:relative;min-height:350px;border:1px solid;"></div>
    <button ejs-fab id="fab" iconCss="e-icons e-edit" target="#target"></button>
  `
})
export class AppComponent { }

typescript

import { FabModule } from '@syncfusion/ej2-angular-buttons';
import { Component } from '@angular/core';

@Component({
  imports: [FabModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div id="target" style="position:relative;min-height:350px;border:1px solid;"></div>
    <button ejs-fab id="fab" iconCss="e-icons e-edit" target="#target"></button>
  `
})
export class AppComponent { }

FAB with Click Handler

带点击处理器的FAB

typescript

import { FabModule } from '@syncfusion/ej2-angular-buttons';
import { Component } from '@angular/core';

@Component({
  imports: [FabModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div id="target" style="position:relative;min-height:350px;border:1px solid;"></div>
    <button ejs-fab id="fab" iconCss="e-icons e-edit" content="Edit"
      (click)="onFabClick()" target="#target"></button>
  `
})
export class AppComponent {
  onFabClick(): void {
    alert('FAB clicked!');
  }
}

typescript

import { FabModule } from '@syncfusion/ej2-angular-buttons';
import { Component } from '@angular/core';

@Component({
  imports: [FabModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div id="target" style="position:relative;min-height:350px;border:1px solid;"></div>
    <button ejs-fab id="fab" iconCss="e-icons e-edit" content="Edit"
      (click)="onFabClick()" target="#target"></button>
  `
})
export class AppComponent {
  onFabClick(): void {
    alert('FAB clicked!');
  }
}

FAB with Custom Style

自定义样式FAB

typescript

import { FabModule } from '@syncfusion/ej2-angular-buttons';
import { Component } from '@angular/core';

@Component({
  imports: [FabModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div id="target" style="position:relative;min-height:350px;border:1px solid;"></div>
    <button ejs-fab id="fab" iconCss="e-icons e-delete" cssClass="e-danger" target="#target"></button>
  `
})
export class AppComponent { }

typescript

import { FabModule } from '@syncfusion/ej2-angular-buttons';
import { Component } from '@angular/core';

@Component({
  imports: [FabModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div id="target" style="position:relative;min-height:350px;border:1px solid;"></div>
    <button ejs-fab id="fab" iconCss="e-icons e-delete" cssClass="e-danger" target="#target"></button>
  `
})
export class AppComponent { }

Key Props at a Glance

关键属性一览

Property	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 Angular Speed Dial component renders a floating action button that expands to reveal a set of action items. It is based on the

ejs-speeddial

directive and supports linear and radial display modes, flexible positioning, animations, modal overlay, custom templates, and full accessibility compliance.

Syncfusion Angular Speed Dial组件渲染一个浮动操作按钮，展开后显示一组操作项。它基于

ejs-speeddial

指令，支持线性和径向显示模式、灵活定位、动画、模态遮罩、自定义模板，并完全符合无障碍访问标准。

Navigation Guide

导航指南

Getting Started

快速入门

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

Prerequisites and package dependencies
Installing
```
@syncfusion/ej2-angular-buttons
```
via
```
ng add
```
CSS/theme imports
Rendering the first
```
ejs-speeddial
```
directive with
```
items
```
Standalone vs NgModule architecture

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

前置条件和包依赖
通过
```
ng add
```
安装
```
@syncfusion/ej2-angular-buttons
```
CSS/主题导入
使用
```
items
```
渲染第一个
```
ejs-speeddial
```
指令
独立架构与NgModule架构对比

Items and Animation

项与动画

📄 Read: references/speeddial-items-and-animation.md

Configuring action items (

SpeedDialItemModel

text

iconCss

id

title

disabled

)

Icon-only, text-only, and icon-with-text item variants
Disabling individual items

Configuring open/close animation (

animation

SpeedDialAnimationSettingsModel

)

Supported animation effects (Fade, Zoom, etc.)

📄 阅读： references/speeddial-items-and-animation.md

配置操作项（

SpeedDialItemModel

：

text

、

iconCss

、

id

、

title

、

disabled

）

仅图标、仅文本、图标+文本的项变体
禁用单个项

配置打开/关闭动画（

animation

、

SpeedDialAnimationSettingsModel

）

支持的动画效果（Fade、Zoom等）

Display Modes

显示模式

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

Linear mode: list-like display with
```
direction
```
(Up, Down, Left, Right, Auto)
Radial mode: circular pattern using
```
mode='Radial'
```

Configuring radial settings (

radialSettings

direction

startAngle

endAngle

offset

)

Choosing mode based on use case

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

线性模式：列表状显示，支持
```
direction
```
（Up、Down、Left、Right、Auto）
径向模式：使用
```
mode='Radial'
```
实现圆形布局

配置径向设置（

radialSettings

：

direction

、

startAngle

、

endAngle

、

offset

）

根据使用场景选择模式

Position and Visibility

定位与可见性

📄 Read: references/speeddial-position-and-visibility.md

All nine
```
position
```
values (TopLeft → BottomRight)
Using
```
target
```
to anchor Speed Dial within a container
Opening items on hover via
```
opensOnHover
```
Programmatic show/hide using
```
show()
```
and
```
hide()
```
methods
Refreshing button position using
```
refreshPosition()
```
Controlling visibility with
```
visible
```
property

📄 阅读： references/speeddial-position-and-visibility.md

全部9个
```
position
```
值（从
```
TopLeft
```
到
```
BottomRight
```
）
使用
```
target
```
将Speed Dial锚定在容器内
通过
```
opensOnHover
```
实现悬停时打开项
使用
```
show()
```
和
```
hide()
```
方法程序化显示/隐藏
使用
```
refreshPosition()
```
刷新按钮位置
使用
```
visible
```
属性控制可见性

Styles and Appearance

样式与外观

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

Button icon customization:
```
openIconCss
```
,
```
closeIconCss
```
,
```
content
```
Predefined CSS styles via
```
cssClass
```
(
```
e-primary
```
,
```
e-success
```
,
```
e-warning
```
, etc.)
Enabling/disabling the component with
```
disabled
```
Controlling visibility with
```
visible
```
Hover open behavior with
```
opensOnHover
```
Item tooltip via
```
title
```
field
Custom CSS class usage

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

按钮图标自定义：
```
openIconCss
```
、
```
closeIconCss
```
、
```
content
```
通过
```
cssClass
```
设置预定义CSS样式（
```
e-primary
```
、
```
e-success
```
、
```
e-warning
```
等）
使用
```
disabled
```
启用/禁用组件
使用
```
visible
```
控制可见性
使用
```
opensOnHover
```
设置悬停打开行为
通过
```
title
```
字段设置项提示
自定义CSS类的使用

Templates

模板

📄 Read: references/speeddial-templates.md

Item template using
```
itemTemplate
```
and
```
<ng-template #itemTemplate>
```

Popup template using

popupTemplate

and

<ng-template #popupTemplate>

Template context and binding

📄 阅读： references/speeddial-templates.md

使用
```
itemTemplate
```
和
```
<ng-template #itemTemplate>
```
设置项模板

使用

popupTemplate

和

<ng-template #popupTemplate>

设置弹出模板

模板上下文与绑定

Events

事件

📄 Read: references/speeddial-events.md

```
clicked
```
— action item clicked (
```
SpeedDialItemEventArgs
```
)
```
created
```
— component rendered
```
beforeOpen
```
/
```
onOpen
```
— popup opening lifecycle
```
beforeClose
```
/
```
onClose
```
— popup closing lifecycle
```
beforeItemRender
```
— each item rendered

📄 阅读： references/speeddial-events.md

```
clicked
```
— 操作项被点击（
```
SpeedDialItemEventArgs
```
）
```
created
```
— 组件渲染完成
```
beforeOpen
```
/
```
onOpen
```
— 弹出菜单打开生命周期
```
beforeClose
```
/
```
onClose
```
— 弹出菜单关闭生命周期
```
beforeItemRender
```
— 每个项渲染前

Accessibility

无障碍访问

📄 Read: references/speeddial-accessibility.md

WCAG 2.2 and Section 508 compliance
WAI-ARIA attributes (
```
role
```
,
```
aria-label
```
,
```
aria-expanded
```
, etc.)
Keyboard shortcuts (Enter, Arrow keys, Esc, Home, End)
Screen reader and RTL support

📄 阅读： references/speeddial-accessibility.md

WCAG 2.2和Section 508合规性
WAI-ARIA属性（
```
role
```
、
```
aria-label
```
、
```
aria-expanded
```
等）
键盘快捷键（Enter、方向键、Esc、Home、End）
屏幕阅读器和RTL支持

API Reference

API参考

📄 Read: references/speeddial-api.md

All component properties with types and defaults
All methods:
```
show()
```
,
```
hide()
```
,
```
refreshPosition()
```
All events with their argument types
```
SpeedDialItemModel
```
fields
```
SpeedDialAnimationSettingsModel
```
fields
```
RadialSettingsModel
```
fields

📄 阅读： references/speeddial-api.md

所有组件属性的类型和默认值
所有方法：
```
show()
```
、
```
hide()
```
、
```
refreshPosition()
```
所有事件及其参数类型
```
SpeedDialItemModel
```
字段
```
SpeedDialAnimationSettingsModel
```
字段
```
RadialSettingsModel
```
字段

Quick Start

快速启动

typescript

import { Component } from '@angular/core';
import { SpeedDialModule, SpeedDialItemModel } from '@syncfusion/ej2-angular-buttons';

@Component({
  imports: [SpeedDialModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div id="target" style="position:relative; min-height:350px; border:1px solid;"></div>
    <button ejs-speeddial
      id="speeddial"
      content="Edit"
      openIconCss="e-icons e-edit"
      closeIconCss="e-icons e-close"
      target="#target"
      [items]="items"
      (clicked)="onItemClicked($event)">
    </button>
  `
})
export class AppComponent {
  public items: SpeedDialItemModel[] = [
    { text: 'Cut',   iconCss: 'e-icons e-cut' },
    { text: 'Copy',  iconCss: 'e-icons e-copy' },
    { text: 'Paste', iconCss: 'e-icons e-paste' }
  ];

  public onItemClicked(args: any) {
    console.log(args.item.text + ' clicked');
  }
}

typescript

import { Component } from '@angular/core';
import { SpeedDialModule, SpeedDialItemModel } from '@syncfusion/ej2-angular-buttons';

@Component({
  imports: [SpeedDialModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div id="target" style="position:relative; min-height:350px; border:1px solid;"></div>
    <button ejs-speeddial
      id="speeddial"
      content="Edit"
      openIconCss="e-icons e-edit"
      closeIconCss="e-icons e-close"
      target="#target"
      [items]="items"
      (clicked)="onItemClicked($event)">
    </button>
  `
})
export class AppComponent {
  public items: SpeedDialItemModel[] = [
    { text: 'Cut',   iconCss: 'e-icons e-cut' },
    { text: 'Copy',  iconCss: 'e-icons e-copy' },
    { text: 'Paste', iconCss: 'e-icons e-paste' }
  ];

  public onItemClicked(args: any) {
    console.log(args.item.text + ' clicked');
  }
}

Common Patterns

常见模式

Icon-only items with tooltips

带提示的仅图标项

typescript

public items: SpeedDialItemModel[] = [
  { iconCss: 'e-icons e-cut',   title: 'Cut' },
  { iconCss: 'e-icons e-copy',  title: 'Copy' },
  { iconCss: 'e-icons e-paste', title: 'Paste' }
];

typescript

public items: SpeedDialItemModel[] = [
  { iconCss: 'e-icons e-cut',   title: 'Cut' },
  { iconCss: 'e-icons e-copy',  title: 'Copy' },
  { iconCss: 'e-icons e-paste', title: 'Paste' }
];

Radial menu

径向菜单

html

<button ejs-speeddial id="speeddial"
  openIconCss="e-icons e-edit"
  closeIconCss="e-icons e-close"
  mode="Radial"
  position="MiddleCenter"
  target="#target"
  [items]="items"
  [radialSettings]="radialSettings">
</button>

typescript

public radialSettings: RadialSettingsModel = {
  direction: 'AntiClockwise',
  startAngle: 180,
  endAngle: 360,
  offset: '80px'
};

html

<button ejs-speeddial id="speeddial"
  openIconCss="e-icons e-edit"
  closeIconCss="e-icons e-close"
  mode="Radial"
  position="MiddleCenter"
  target="#target"
  [items]="items"
  [radialSettings]="radialSettings">
</button>

typescript

public radialSettings: RadialSettingsModel = {
  direction: 'AntiClockwise',
  startAngle: 180,
  endAngle: 360,
  offset: '80px'
};

Modal overlay

模态遮罩

html

<button ejs-speeddial id="speeddial"
  openIconCss="e-icons e-edit"
  [modal]="true"
  target="#target"
  [items]="items">
</button>

html

<button ejs-speeddial id="speeddial"
  openIconCss="e-icons e-edit"
  [modal]="true"
  target="#target"
  [items]="items">
</button>

Programmatic show/hide

程序化显示/隐藏

typescript

@ViewChild('speeddial') speeddialObj: SpeedDialComponent;

show() { this.speeddialObj.show(); }
hide() { this.speeddialObj.hide(); }

typescript

@ViewChild('speeddial') speeddialObj: SpeedDialComponent;

show() { this.speeddialObj.show(); }
hide() { this.speeddialObj.hide(); }

ProgressButton

The Syncfusion Angular ProgressButton (

ejs-progressbutton

) extends a standard button with built-in progress indication — a spinner and/or background filler UI — ideal for async operations, form submissions, or any action with a perceivable wait time.

Syncfusion Angular ProgressButton（

ejs-progressbutton

）扩展了标准按钮，内置进度指示功能——包含加载动画和/或背景填充UI，非常适合异步操作、表单提交或任何有可感知等待时间的操作。

Navigation Guide

导航指南

Task	Reference File
Installation & basic setup	📄 references/getting-started.md
Spinner config & progress animation	📄 references/spinner-and-progress.md
How-to recipes (hide spinner, cssClass, events, text/style changes)	📄 references/how-to.md
Accessibility & keyboard interaction	📄 references/accessibility.md
Full API — properties, methods, events, interfaces	📄 references/api.md

任务	参考文档
安装与基础设置	📄 references/getting-started.md
加载动画配置与进度动画	📄 references/spinner-and-progress.md
实操方案（隐藏加载动画、cssClass、事件、文本/样式更改）	📄 references/how-to.md
无障碍访问与键盘交互	📄 references/accessibility.md
完整API——属性、方法、事件、接口	📄 references/api.md

Quick Start

快速启动

bash

undefined

bash

undefined

Install the package

安装包

ng add @syncfusion/ej2-angular-splitbuttons


```typescript
// src/app/app.ts (Angular 20+) or app.component.ts (Angular 19 and below)
import { Component } from '@angular/core';
import { ProgressButtonModule } from '@syncfusion/ej2-angular-splitbuttons';

@Component({
  standalone: true,
  imports: [ProgressButtonModule],
  selector: 'app-root',
  template: `
    <button ejs-progressbutton content="Upload" [enableProgress]="true"
            [duration]="3000">
    </button>
  `
})
export class AppComponent {}

css

/* styles.css — or import individually */
@import '@syncfusion/ej2-base/styles/material.css';
@import '@syncfusion/ej2-buttons/styles/material.css';
@import '@syncfusion/ej2-popups/styles/material.css';
@import '@syncfusion/ej2-splitbuttons/styles/material.css';

ng add @syncfusion/ej2-angular-splitbuttons


```typescript
// src/app/app.ts (Angular 20+) 或 app.component.ts (Angular 19及以下)
import { Component } from '@angular/core';
import { ProgressButtonModule } from '@syncfusion/ej2-angular-splitbuttons';

@Component({
  standalone: true,
  imports: [ProgressButtonModule],
  selector: 'app-root',
  template: `
    <button ejs-progressbutton content="Upload" [enableProgress]="true"
            [duration]="3000">
    </button>
  `
})
export class AppComponent {}

css

/* styles.css — 或单独导入 */
@import '@syncfusion/ej2-base/styles/material.css';
@import '@syncfusion/ej2-buttons/styles/material.css';
@import '@syncfusion/ej2-popups/styles/material.css';
@import '@syncfusion/ej2-splitbuttons/styles/material.css';

Common Patterns

常见模式

Spinner on the right

右侧加载动画

typescript

template: `
  <button ejs-progressbutton content="Submit"
          [spinSettings]="{ position: 'Right' }">
  </button>
`

typescript

template: `
  <button ejs-progressbutton content="Submit"
          [spinSettings]="{ position: 'Right' }">
  </button>
`

Background filler + animation

背景填充+动画

typescript

template: `
  <button ejs-progressbutton content="Download" [enableProgress]="true"
          [animationSettings]="{ effect: 'SlideLeft' }">
  </button>
`

typescript

template: `
  <button ejs-progressbutton content="Download" [enableProgress]="true"
          [animationSettings]="{ effect: 'SlideLeft' }">
  </button>
`

Handle lifecycle events

处理生命周期事件

typescript

template: `
  <button ejs-progressbutton content="Send"
          (begin)="onBegin($event)"
          (progress)="onProgress($event)"
          (end)="onEnd($event)"
          (fail)="onFail($event)">
  </button>
`
// Component class
onBegin(args: any)    { console.log('Started:', args.percent); }
onProgress(args: any) { console.log('Progress:', args.percent); }
onEnd(args: any)      { console.log('Completed'); }
onFail(args: any)     { console.log('Failed'); }

typescript

template: `
  <button ejs-progressbutton content="Send"
          (begin)="onBegin($event)"
          (progress)="onProgress($event)"
          (end)="onEnd($event)"
          (fail)="onFail($event)">
  </button>
`
// 组件类
onBegin(args: any)    { console.log('Started:', args.percent); }
onProgress(args: any) { console.log('Progress:', args.percent); }
onEnd(args: any)      { console.log('Completed'); }
onFail(args: any)     { console.log('Failed'); }

Programmatic control

程序化控制

typescript

@ViewChild('progressBtn') progressBtn!: ProgressButtonComponent;

startProgress()    { this.progressBtn.start(0); }
stopProgress()     { this.progressBtn.stop(); }
completeProgress() { this.progressBtn.progressComplete(); }

typescript

@ViewChild('progressBtn') progressBtn!: ProgressButtonComponent;

startProgress()    { this.progressBtn.start(0); }
stopProgress()     { this.progressBtn.stop(); }
completeProgress() { this.progressBtn.progressComplete(); }

Switch

A lightweight toggle component (

ejs-switch

) for on/off binary input. Supports checked state, labels, disabled, sizing, two-way binding, form integration, custom styling, events, and full WCAG 2.2 accessibility.

轻量级切换组件（

ejs-switch

），用于开/关二元输入。支持选中状态、标签、禁用、尺寸、双向绑定、表单集成、自定义样式、事件，并完全符合WCAG 2.2无障碍标准。

Navigation Guide

导航指南

Getting Started

快速入门

📄 Read: references/getting-started.md

Installation with
```
ng add @syncfusion/ej2-angular-buttons
```
Standalone component and NgModule setup
Basic Switch with
```
checked
```
state
CSS / SCSS theme imports
Setting
```
onLabel
```
and
```
offLabel
```
text

📄 阅读： references/getting-started.md

使用
```
ng add @syncfusion/ej2-angular-buttons
```
安装
独立组件和NgModule设置
带
```
checked
```
状态的基础Switch
CSS / SCSS主题导入
设置
```
onLabel
```
和
```
offLabel
```
文本

Switch Features

Switch功能

📄 Read: references/switch-features.md

Disabled state (
```
disabled
```
property)
Size variants — default and small (
```
cssClass: 'e-small'
```
)
RTL support (
```
enableRtl
```
)
Two-way data binding with
```
ngModel
```
Toggle programmatically with
```
toggle()
```
method
State persistence across page reloads (
```
enablePersistence
```
)

📄 阅读： references/switch-features.md

禁用状态（
```
disabled
```
属性）
尺寸变体——默认和小尺寸（
```
cssClass: 'e-small'
```
）
RTL支持（
```
enableRtl
```
）
使用
```
ngModel
```
进行双向数据绑定
使用
```
toggle()
```
方法程序化切换
页面刷新时保持状态（
```
enablePersistence
```
）

Events & State Control

事件与状态控制

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

```
change
```
event — react to user-driven state flips
```
beforeChange
```
event — intercept and cancel state change
```
created
```
event — run logic after component renders
```
click()
```
and
```
focusIn()
```
native methods

📄 阅读： references/events-and-state.md

```
change
```
事件——响应用户驱动的状态切换
```
beforeChange
```
事件——拦截并取消状态更改
```
created
```
事件——组件渲染后运行逻辑
```
click()
```
和
```
focusIn()
```
原生方法

Form Integration

表单集成

📄 Read: references/form-integration.md

```
name
```
and
```
value
```
attributes for form POST
Rules: disabled / unchecked values are NOT submitted
Template-driven two-way binding with
```
ngModel
```
Grouping switches by
```
name
```
in a form

📄 阅读： references/form-integration.md

表单POST使用的
```
name
```
和
```
value
```
属性
规则：禁用/未选中的值不会被提交
使用
```
ngModel
```
进行模板驱动的双向绑定
在表单中通过
```
name
```
分组Switch

Customization

自定义

📄 Read: references/customization.md

```
cssClass
```
for custom styles
Reshape bar/handle (square corners via CSS)
Custom bar colors for on/off states
Enable ripple effect on Switch labels
Extra HTML attributes via
```
htmlAttributes
```

📄 阅读： references/customization.md

使用
```
cssClass
```
进行自定义样式
重塑滑块/手柄（通过CSS设置方角）
自定义开/关状态的滑块颜色
启用Switch标签的涟漪效果
通过
```
htmlAttributes
```
添加额外HTML属性

Accessibility

无障碍访问

📄 Read: references/accessibility.md

WCAG 2.2 / Section 508 / ADA compliance
WAI-ARIA:
```
role="switch"
```
,
```
aria-disabled
```
Keyboard navigation (Space key to toggle)
Screen reader support and RTL accessibility

📄 阅读： references/accessibility.md

WCAG 2.2 / Section 508 / ADA合规性
WAI-ARIA：
```
role="switch"
```
、
```
aria-disabled
```
键盘导航（空格键切换）
屏幕阅读器支持和RTL无障碍访问

API Reference

API参考

📄 Read: references/api.md

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

📄 阅读： references/api.md

所有属性、方法和事件的类型及默认值
```
BeforeChangeEventArgs
```
和
```
ChangeEventArgs
```
接口

Quick Start

快速启动

bash

ng add @syncfusion/ej2-angular-buttons

typescript

// src/app/app.ts (Angular 19+ standalone)
import { Component } from '@angular/core';
import { SwitchModule } from '@syncfusion/ej2-angular-buttons';

@Component({
  standalone: true,
  imports: [SwitchModule],
  selector: 'app-root',
  template: `
    <ejs-switch [checked]="isOn" (change)="onToggle($event)"></ejs-switch>
  `
})
export class AppComponent {
  isOn = false;

  onToggle(args: any): void {
    console.log('Switch is now:', args.checked);
  }
}

css

/* styles.css */
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';

bash

ng add @syncfusion/ej2-angular-buttons

typescript

// src/app/app.ts (Angular 19+独立架构)
import { Component } from '@angular/core';
import { SwitchModule } from '@syncfusion/ej2-angular-buttons';

@Component({
  standalone: true,
  imports: [SwitchModule],
  selector: 'app-root',
  template: `
    <ejs-switch [checked]="isOn" (change)="onToggle($event)"></ejs-switch>
  `
})
export class AppComponent {
  isOn = false;

  onToggle(args: any): void {
    console.log('Switch is now:', args.checked);
  }
}

css

/* styles.css */
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';

Common Patterns

常见模式

Checked by default

默认选中

html

<ejs-switch [checked]="true"></ejs-switch>

html

<ejs-switch [checked]="true"></ejs-switch>

With ON / OFF labels

带ON/OFF标签

html

<ejs-switch [checked]="true" onLabel="ON" offLabel="OFF"></ejs-switch>

Labels are not displayed in Material themes. Avoid long custom text.

html

<ejs-switch [checked]="true" onLabel="ON" offLabel="OFF"></ejs-switch>

Material主题中不显示标签。避免使用过长的自定义文本。

Small size

小尺寸

html

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

html

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

Disabled

禁用

html

<ejs-switch [disabled]="true"></ejs-switch>

html

<ejs-switch [disabled]="true"></ejs-switch>

Two-way binding

双向绑定

html

<ejs-switch [(ngModel)]="isEnabled"></ejs-switch>
<p>State: {{ isEnabled }}</p>

html

<ejs-switch [(ngModel)]="isEnabled"></ejs-switch>
<p>State: {{ isEnabled }}</p>

Prevent state change conditionally

有条件地阻止状态更改

html

<ejs-switch (beforeChange)="onBeforeChange($event)"></ejs-switch>

typescript

onBeforeChange(args: BeforeChangeEventArgs): void {
  // Cancel if condition not met
  if (!this.canToggle) {
    args.cancel = true;
  }
}

html

<ejs-switch (beforeChange)="onBeforeChange($event)"></ejs-switch>

typescript

onBeforeChange(args: BeforeChangeEventArgs): void {
  // 条件不满足时取消
  if (!this.canToggle) {
    args.cancel = true;
  }
}

Programmatic toggle

程序化切换

typescript

@ViewChild('switch') switchObj!: SwitchComponent;

toggle(): void {
  this.switchObj.toggle();
}

typescript

@ViewChild('switch') switchObj!: SwitchComponent;

toggle(): void {
  this.switchObj.toggle();
}

RadioButton

The Syncfusion Angular RadioButton (

ejs-radiobutton

) is a form input component that lets users select exactly one option from a group. It supports labels, size variants, two-way binding, form integration, accessibility, and extensive customization.

Syncfusion Angular RadioButton（

ejs-radiobutton

）是表单输入组件，允许用户从一组选项中选择恰好一个选项。它支持标签、尺寸变体、双向绑定、表单集成、无障碍访问和广泛的自定义。

Navigation Guide

导航指南

Getting Started

快速入门

📄 Read: references/getting-started.md

Angular 19+/21 standalone setup
Package installation via
```
ng add
```
CSS/SCSS theme imports
Minimal RadioButton example
Running the application

📄 阅读： references/getting-started.md

Angular 19+/21独立架构设置
通过
```
ng add
```
安装包
CSS/SCSS主题导入
最小化RadioButton示例
运行应用

Labels, Sizes & States

标签、尺寸与状态

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

```
label
```
and
```
labelPosition
```
(Before/After)
Size variants: default and small (
```
e-small
```
)
```
checked
```
and unchecked states
```
disabled
```
state
```
enablePersistence
```

📄 阅读： references/label-size-states.md

```
label
```
和
```
labelPosition
```
（Before/After）
尺寸变体：默认和小尺寸（
```
e-small
```
）
选中和未选中状态
```
disabled
```
状态
```
enablePersistence
```

Forms & Data Binding

表单与数据绑定

📄 Read: references/forms-and-binding.md

```
name
```
attribute for grouping radio buttons
```
value
```
attribute for form submission
Which values are sent on form submit
Two-way binding with
```
[(ngModel)]
```
Binding a RadioButton group to a DropDownList

📄 阅读： references/forms-and-binding.md

使用
```
name
```
属性对单选按钮进行分组
表单提交使用的
```
value
```
属性
表单提交时发送哪些值
使用
```
[(ngModel)]
```
进行双向绑定
将单选按钮组与DropDownList绑定

Customization & Advanced Features

自定义与高级功能

📄 Read: references/customization-and-advanced.md

Custom CSS classes and appearance styles
Right-to-left (
```
enableRtl
```
)
```
htmlAttributes
```
for ARIA and data attributes
```
enableHtmlSanitizer
```
and
```
locale
```

Methods:

getSelectedValue()

click()

focusIn()

destroy()

📄 阅读： references/customization-and-advanced.md

自定义CSS类和外观样式
从右到左（
```
enableRtl
```
）
用于ARIA和数据属性的
```
htmlAttributes
```
```
enableHtmlSanitizer
```
和
```
locale
```

方法：

getSelectedValue()

、

click()

、

focusIn()

、

destroy()

Accessibility

无障碍访问

📄 Read: references/accessibility.md

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

📄 阅读： references/accessibility.md

WCAG 2.2、Section 508、ADA合规性
WAI-ARIA属性
键盘导航快捷键
屏幕阅读器支持

API Reference

API参考

📄 Read: references/api.md

All properties with types, defaults, and usage examples
All methods with signatures
Events and
```
ChangeArgs
```
interface

📄 阅读： references/api.md

所有属性的类型、默认值和使用示例
所有方法的签名
事件和
```
ChangeArgs
```
接口

Quick Start

快速启动

typescript

import { Component } from '@angular/core';
import { RadioButtonModule } from '@syncfusion/ej2-angular-buttons';

@Component({
  standalone: true,
  imports: [RadioButtonModule],
  selector: 'app-root',
  template: `
    <ejs-radiobutton label="Option A" name="choice" value="a" [checked]="true"></ejs-radiobutton>
    <ejs-radiobutton label="Option B" name="choice" value="b"></ejs-radiobutton>
    <ejs-radiobutton label="Option C" name="choice" value="c"></ejs-radiobutton>
  `
})
export class AppComponent {}

Always set a shared
name
attribute on buttons that belong to the same group — this enforces mutual exclusivity.

typescript

import { Component } from '@angular/core';
import { RadioButtonModule } from '@syncfusion/ej2-angular-buttons';

@Component({
  standalone: true,
  imports: [RadioButtonModule],
  selector: 'app-root',
  template: `
    <ejs-radiobutton label="Option A" name="choice" value="a" [checked]="true"></ejs-radiobutton>
    <ejs-radiobutton label="Option B" name="choice" value="b"></ejs-radiobutton>
    <ejs-radiobutton label="Option C" name="choice" value="c"></ejs-radiobutton>
  `
})
export class AppComponent {}

务必为同一组的按钮设置相同的
name
属性，这样才能确保互斥性。

Common Patterns

常见模式

Detect Selection Change

检测选择变化

typescript

template: `
  <ejs-radiobutton label="Credit Card" name="payment" value="credit"
    (change)="onPaymentChange($event)">
  </ejs-radiobutton>
  <ejs-radiobutton label="Debit Card" name="payment" value="debit"
    (change)="onPaymentChange($event)">
  </ejs-radiobutton>
`

onPaymentChange(args: ChangeArgs): void {
  console.log('Selected value:', args.value);  // 'credit' or 'debit'
}

typescript

template: `
  <ejs-radiobutton label="Credit Card" name="payment" value="credit"
    (change)="onPaymentChange($event)">
  </ejs-radiobutton>
  <ejs-radiobutton label="Debit Card" name="payment" value="debit"
    (change)="onPaymentChange($event)">
  </ejs-radiobutton>
`

onPaymentChange(args: ChangeArgs): void {
  console.log('Selected value:', args.value);  // 'credit' 或 'debit'
}

Two-Way Binding with ngModel

使用ngModel双向绑定

typescript

// All buttons share [(ngModel)]="selectedValue"
template: `
  <ejs-radiobutton label="Monthly" name="plan" value="monthly"
    [(ngModel)]="selectedPlan">
  </ejs-radiobutton>
  <ejs-radiobutton label="Annual" name="plan" value="annual"
    [(ngModel)]="selectedPlan">
  </ejs-radiobutton>
  <p>Selected: {{ selectedPlan }}</p>
`

typescript

// 所有按钮共享 [(ngModel)]="selectedValue"
template: `
  <ejs-radiobutton label="Monthly" name="plan" value="monthly"
    [(ngModel)]="selectedPlan">
  </ejs-radiobutton>
  <ejs-radiobutton label="Annual" name="plan" value="annual"
    [(ngModel)]="selectedPlan">
  </ejs-radiobutton>
  <p>Selected: {{ selectedPlan }}</p>
`

Small Size Variant

小尺寸变体

typescript

<ejs-radiobutton label="Small Option" name="size" cssClass="e-small"></ejs-radiobutton>

typescript

<ejs-radiobutton label="Small Option" name="size" cssClass="e-small"></ejs-radiobutton>

Disabled RadioButton

禁用RadioButton

typescript

<ejs-radiobutton label="Unavailable" name="plan" [disabled]="true"></ejs-radiobutton>

typescript

<ejs-radiobutton label="Unavailable" name="plan" [disabled]="true"></ejs-radiobutton>

Key Properties at a Glance

关键属性一览

Property	Type	Default	Purpose
`label`	string	`''`	Caption text next to the button
`name`	string	`''`	Groups mutually exclusive buttons
`value`	string	`''`	Form submission value
`checked`	boolean	`false`	Pre-select the button
`disabled`	boolean	`false`	Disable interaction
`cssClass`	string	`''`	Custom CSS; use `'e-small'` for small size
`labelPosition`	RadioLabelPosition	`'After'`	`'Before'` or `'After'`
`enableRtl`	boolean	`false`	Right-to-left layout

For the full API, read

references/api.md

属性	类型	默认值	用途
`label`	string	`''`	按钮旁边的标题文本
`name`	string	`''`	将互斥按钮分组
`value`	string	`''`	表单提交值
`checked`	boolean	`false`	预选中按钮
`disabled`	boolean	`false`	禁用交互
`cssClass`	string	`''`	自定义CSS；使用 `'e-small'` 设置小尺寸
`labelPosition`	RadioLabelPosition	`'After'`	`'Before'` 或 `'After'`
`enableRtl`	boolean	`false`	从右到左布局

完整API请阅读

references/api.md

。

SplitButton

A comprehensive guide for implementing the Syncfusion Essential JS 2 SplitButton component in Angular applications. Learn to create split buttons with dropdown menus, manage items, handle events, customize styling, and integrate with forms.

一份关于在Angular应用中实现Syncfusion Essential JS 2 SplitButton组件的综合指南。学习创建带下拉菜单的拆分按钮、管理项、处理事件、自定义样式以及与表单集成。

SplitButton Overview

SplitButton概述

The Syncfusion Angular SplitButton component is a versatile UI control that combines a primary button with a dropdown menu:

Dual-action design: Primary action button + dropdown menu with multiple options
Item management: Configure items with text, icons, separators, URLs, and disable states
Event system: click (primary), select (item), open, close, beforeOpen events
Popup control: Placement options, collision detection, offset adjustment, auto-positioning
Icon support: Material Design icons, Font Awesome, Bootstrap icons, custom fonts
Customization: CSS classes, themes (Material, Bootstrap, Fabric, Tailwind), dark mode
Template support: Item templates with HTML content, image icons, custom rendering
Accessibility: Full WCAG 2.2 compliance, keyboard navigation, ARIA attributes, RTL support
Forms integration: Reactive Forms and template-driven forms support
Dynamic updates: Add/remove items, update properties at runtime, state management

Package:

@syncfusion/ej2-angular-splitbuttons

Syncfusion Angular SplitButton组件是一个多功能UI控件，将主按钮与下拉菜单结合：

双动作设计： 主操作按钮 + 带多个选项的下拉菜单
项管理： 配置带文本、图标、分隔符、URL和禁用状态的项
事件系统： click（主按钮）、select（项）、open、close、beforeOpen事件
弹出菜单控制： 位置选项、碰撞检测、偏移调整、自动定位
图标支持： Material Design图标、Font Awesome、Bootstrap图标、自定义字体
自定义： CSS类、主题（Material、Bootstrap、Fabric、Tailwind）、深色模式
模板支持： 带HTML内容的项模板、图片图标、自定义渲染
无障碍访问： 完全符合WCAG 2.2标准、键盘导航、ARIA属性、RTL支持
表单集成： 响应式表单和模板驱动表单支持
动态更新： 运行时添加/移除项、更新属性、状态管理

包：

@syncfusion/ej2-angular-splitbuttons

Documentation Navigation

文档导航

Read the following references based on your specific needs:

根据你的具体需求阅读以下参考文档：

Getting Started

快速入门

📄 Read: references/getting-started.md

Package installation and module setup
CSS theme imports and dependencies
Basic SplitButton implementation
Component initialization with items
Event handler setup
Running and testing setup

📄 阅读： references/getting-started.md

包安装和模块设置
CSS主题导入和依赖
基础SplitButton实现
使用项初始化组件
事件处理器设置
运行和测试设置

Button Items Configuration

按钮项配置

📄 Read: references/button-items-configuration.md

ItemModel interface and properties
Text and icon configuration
URL navigation and external links
Separators between items
Item disable/enable states
Dynamic item management
Item click event handling

📄 阅读： references/button-items-configuration.md

ItemModel接口和属性
文本和图标配置
URL导航和外部链接
项之间的分隔符
项禁用/启用状态
动态项管理
项点击事件处理

Events & Methods

事件与方法

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

click event (primary button action)
select event (item selection from dropdown)
open event (dropdown opens)
close event (dropdown closes)
beforeOpen event (before dropdown opens)

Methods:

toggle()

addItems()

removeItems()

focusIn()

ViewChild access patterns
Event argument types and handling

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

click事件（主按钮操作）
select事件（从下拉菜单选择项）
open事件（下拉菜单打开）
close事件（下拉菜单关闭）
beforeOpen事件（下拉菜单打开前）

方法：

toggle()

、

addItems()

、

removeItems()

、

focusIn()

ViewChild访问模式
事件参数类型和处理

Styling & Customization

样式与自定义

📄 Read: references/styling-and-customization.md

CSS class customization (.e-split-button, .e-dropdown-popup)
Icon configuration (iconCss, prefix, suffix properties)
Icon positioning (left, right, top, bottom)
Theme selection (Material, Bootstrap, Fabric, Tailwind)
Dark mode implementation
RTL (Right-to-Left) support
Custom CSS overrides and sizing

📄 阅读： references/styling-and-customization.md

CSS类自定义（.e-split-button、.e-dropdown-popup）
图标配置（iconCss、prefix、suffix属性）
图标位置（左、右、上、下）
主题选择（Material、Bootstrap、Fabric、Tailwind）
深色模式实现
RTL（从右到左）支持
自定义CSS覆盖和尺寸设置

Templates & Icons

模板与图标

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

Icon font libraries (Material Design, Bootstrap, Font Awesome)
Icon positioning and sizing
Item templates with HTML content
Image icons and custom graphics
Content templates for rich styling
Multiple icon combinations
Icon alignment and spacing

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

图标字体库（Material Design、Bootstrap、Font Awesome）
图标定位和尺寸
带HTML内容的项模板
图片图标和自定义图形
用于丰富样式的内容模板
多图标组合
图标对齐和间距

Popup Behavior & Target Customization

弹出菜单行为与目标自定义

📄 Read: references/popup-positioning.md

Default popup behavior (auto opens below button)
```
popupWidth
```
property — fixed popup width
```
target
```
property — custom popup content (color picker, ListView, etc.)
```
createPopupOnClick
```
— deferred popup creation
```
closeActionEvents
```
— custom dismiss trigger
Grouped items with ListView as target
Edge cases: fixed toolbar, modal dialogs, scrollable containers

📄 阅读： references/popup-positioning.md

默认弹出菜单行为（自动在按钮下方打开）
```
popupWidth
```
属性——固定弹出菜单宽度
```
target
```
属性——自定义弹出菜单内容（颜色选择器、ListView等）
```
createPopupOnClick
```
——延迟创建弹出菜单
```
closeActionEvents
```
——自定义关闭触发条件
使用ListView作为目标进行项分组
边缘情况：固定工具栏、模态对话框、可滚动容器

Accessibility & Globalization

无障碍访问与全球化

📄 Read: references/accessibility-and-globalization.md

WCAG 2.2 and Section 508 compliance
ARIA roles and attributes (role="button", aria-haspopup, aria-expanded)
Keyboard navigation (Tab, Enter, Escape, Arrow Keys)
Screen reader compatibility and announcements
RTL (Right-to-Left) layout support
Localization and locale property usage
Language-specific formatting and translations

📄 阅读： references/accessibility-and-globalization.md

WCAG 2.2和Section 508合规性
ARIA角色和属性（role="button"、aria-haspopup、aria-expanded）
键盘导航（Tab、Enter、Escape、方向键）
屏幕阅读器兼容性和提示
RTL（从右到左）布局支持
本地化和locale属性使用
特定语言的格式和翻译

Reactive Forms Integration

响应式表单集成

📄 Read: references/reactive-forms-integration.md

FormControl integration with SplitButton
FormGroup and form binding
Validation rules and error states
Form state changes and subscriptions
Programmatic control and updates
Reset and submit patterns
Disabled state management

📄 阅读： references/reactive-forms-integration.md

SplitButton与FormControl集成
FormGroup和表单绑定
验证规则和错误状态
表单状态变化和订阅
程序化控制和更新
重置和提交模式
禁用状态管理

API Reference

API参考

📄 Read: references/api-reference.md

All 16 official properties:

content

items

iconCss

iconPosition

cssClass

disabled

enableRtl

target

popupWidth

animationSettings

closeActionEvents

createPopupOnClick

enableHtmlSanitizer

enablePersistence

locale

Official methods:

toggle()

addItems()

removeItems()

focusIn()

getPersistData()

onPropertyChanged()

All 8 official events with correct event arg interfaces

ItemModel

interface:

text

id

iconCss

url

separator

disabled

```
SplitButtonIconPosition
```
enum:
```
"Left"
```
|
```
"Top"
```

Event arg interfaces:

BeforeOpenCloseMenuEventArgs

OpenCloseMenuEventArgs

MenuEventArgs

ClickEventArgs

📄 阅读： references/api-reference.md

所有16个官方属性：

content

、

items

、

iconCss

、

iconPosition

、

cssClass

、

disabled

、

enableRtl

、

target

、

popupWidth

、

animationSettings

、

closeActionEvents

、

createPopupOnClick

、

enableHtmlSanitizer

、

enablePersistence

、

locale

官方方法：

toggle()

、

addItems()

、

removeItems()

、

focusIn()

、

getPersistData()

、

onPropertyChanged()

所有8个官方事件及正确的事件参数接口

ItemModel

接口：

text

、

id

、

iconCss

、

url

、

separator

、

disabled

```
SplitButtonIconPosition
```
枚举：
```
"Left"
```
|
```
"Top"
```

事件参数接口：

BeforeOpenCloseMenuEventArgs

、

OpenCloseMenuEventArgs

、

MenuEventArgs

、

ClickEventArgs

Quick Start Example

快速启动示例

typescript

// app.component.ts
import { Component } from '@angular/core';
import { ItemModel } from '@syncfusion/ej2-angular-splitbuttons';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // Dropdown items
  public dropdownItems: ItemModel[] = [
    { text: 'Cut' },
    { text: 'Copy' },
    { text: 'Paste' }
  ];
  
  // Primary button action handler
  onPrimaryClick(): void {
    console.log('Primary action clicked');
  }
  
  // Item selection handler
  onItemSelect(args: any): void {
    console.log('Selected item:', args.item.text);
  }
}

html

<!-- app.component.html -->
<div style="padding: 20px; font-family: Arial, sans-serif;">
  <h2>Basic SplitButton</h2>
  <ejs-splitbutton 
    content="Paste"
    [items]="dropdownItems"
    (click)="onPrimaryClick()"
    (select)="onItemSelect($event)">
  </ejs-splitbutton>
</div>

css

/* app.component.css */
@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material3.css';

:host ::ng-deep .e-split-button {
  margin: 10px;
}

typescript

// app.component.ts
import { Component } from '@angular/core';
import { ItemModel } from '@syncfusion/ej2-angular-splitbuttons';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // 下拉项
  public dropdownItems: ItemModel[] = [
    { text: 'Cut' },
    { text: 'Copy' },
    { text: 'Paste' }
  ];
  
  // 主按钮操作处理器
  onPrimaryClick(): void {
    console.log('Primary action clicked');
  }
  
  // 项选择处理器
  onItemSelect(args: any): void {
    console.log('Selected item:', args.item.text);
  }
}

html

<!-- app.component.html -->
<div style="padding: 20px; font-family: Arial, sans-serif;">
  <h2>Basic SplitButton</h2>
  <ejs-splitbutton 
    content="Paste"
    [items]="dropdownItems"
    (click)="onPrimaryClick()"
    (select)="onItemSelect($event)">
  </ejs-splitbutton>
</div>

css

/* app.component.css */
@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material3.css';

:host ::ng-deep .e-split-button {
  margin: 10px;
}

Common Patterns

常见模式

Pattern 1: Action Menu with Icons

模式1：带图标的操作菜单

When you need a split button with icon-rich dropdown menu:

typescript

export class AppComponent {
  public fileActions: ItemModel[] = [
    { text: 'Save', iconCss: 'e-icons e-save' },
    { text: 'Save As', iconCss: 'e-icons e-save-as' },
    { separator: true },
    { text: 'Export', iconCss: 'e-icons e-export' },
    { text: 'Print', iconCss: 'e-icons e-print' }
  ];
  
  onFileAction(args: any): void {
    const action = args.item.text;
    console.log(`File action: ${action}`);
    // Execute based on selected action
  }
}

当你需要一个带图标丰富下拉菜单的拆分按钮时：

typescript

export class AppComponent {
  public fileActions: ItemModel[] = [
    { text: 'Save', iconCss: 'e-icons e-save' },
    { text: 'Save As', iconCss: 'e-icons e-save-as' },
    { separator: true },
    { text: 'Export', iconCss: 'e-icons e-export' },
    { text: 'Print', iconCss: 'e-icons e-print' }
  ];
  
  onFileAction(args: any): void {
    const action = args.item.text;
    console.log(`File action: ${action}`);
    // 根据选择的操作执行逻辑
  }
}

Pattern 2: Conditional Item Enable/Disable

模式2：有条件地启用/禁用项

When you need to enable/disable menu items based on application state:

typescript

export class AppComponent {
  @ViewChild('splitBtn') splitButtonRef!: SplitButtonComponent;
  
  isEditMode: boolean = false;
  
  public items: ItemModel[] = [
    { text: 'Edit', disabled: true },
    { text: 'Delete', disabled: true },
    { text: 'Duplicate' }
  ];
  
  toggleEditMode(): void {
    this.isEditMode = !this.isEditMode;
    // Update item disabled states
    this.items[0].disabled = !this.isEditMode;
    this.items[1].disabled = !this.isEditMode;
  }
  
  onItemSelect(args: any): void {
    if (!args.item.disabled) {
      console.log('Executing:', args.item.text);
    }
  }
}

当你需要根据应用状态启用/禁用菜单项时：

typescript

export class AppComponent {
  @ViewChild('splitBtn') splitButtonRef!: SplitButtonComponent;
  
  isEditMode: boolean = false;
  
  public items: ItemModel[] = [
    { text: 'Edit', disabled: true },
    { text: 'Delete', disabled: true },
    { text: 'Duplicate' }
  ];
  
  toggleEditMode(): void {
    this.isEditMode = !this.isEditMode;
    // 更新项的禁用状态
    this.items[0].disabled = !this.isEditMode;
    this.items[1].disabled = !this.isEditMode;
  }
  
  onItemSelect(args: any): void {
    if (!args.item.disabled) {
      console.log('Executing:', args.item.text);
    }
  }
}

Pattern 3: Dynamic Item Management

模式3：动态项管理

When you need to add/remove items at runtime:

typescript

export class AppComponent {
  @ViewChild('splitBtn') splitButtonRef!: SplitButtonComponent;
  
  public items: ItemModel[] = [];
  
  ngOnInit(): void {
    // Load initial items
    this.loadItems();
  }
  
  loadItems(): void {
    this.items = [
      { text: 'Item 1' },
      { text: 'Item 2' },
      { text: 'Item 3' }
    ];
  }
  
  addItem(text: string): void {
    this.items.push({ text: text });
  }
  
  removeItem(index: number): void {
    this.items.splice(index, 1);
  }
  
  clearAllItems(): void {
    this.items = [];
  }
}

当你需要在运行时添加/移除项时：

typescript

export class AppComponent {
  @ViewChild('splitBtn') splitButtonRef!: SplitButtonComponent;
  
  public items: ItemModel[] = [];
  
  ngOnInit(): void {
    // 加载初始项
    this.loadItems();
  }
  
  loadItems(): void {
    this.items = [
      { text: 'Item 1' },
      { text: 'Item 2' },
      { text: 'Item 3' }
    ];
  }
  
  addItem(text: string): void {
    this.items.push({ text: text });
  }
  
  removeItem(index: number): void {
    this.items.splice(index, 1);
  }
  
  clearAllItems(): void {
    this.items = [];
  }
}

Pattern 4: Item Navigation with URLs

模式4：带URL的项导航

When you need menu items to navigate to different URLs. Note:

ItemModel

only supports

url

; the open-target (

_blank

_self

) must be handled in

(select)

typescript

export class AppComponent {
  public navigationItems: ItemModel[] = [
    { id: 'home',    text: 'Home',          url: '/' },
    { id: 'docs',    text: 'Documentation', url: '/docs' },
    { separator: true },
    { id: 'github',  text: 'GitHub',        url: 'https://github.com' },
    { id: 'support', text: 'Support',       url: 'https://support.syncfusion.com' }
  ];
  
  onNavigate(args: any): void {
    const itemUrl: string = args.item.url;
    if (!itemUrl) return;
    // Open external URLs in new tab, internal in same tab
    const isExternal = itemUrl.startsWith('http');
    window.open(itemUrl, isExternal ? '_blank' : '_self');
  }
}

当你需要菜单项导航到不同URL时。注意：

ItemModel

仅支持

url

；打开目标（

_blank

、

_self

）必须在

(select)

中处理：

typescript

export class AppComponent {
  public navigationItems: ItemModel[] = [
    { id: 'home',    text: 'Home',          url: '/' },
    { id: 'docs',    text: 'Documentation', url: '/docs' },
    { separator: true },
    { id: 'github',  text: 'GitHub',        url: 'https://github.com' },
    { id: 'support', text: 'Support',       url: 'https://support.syncfusion.com' }
  ];
  
  onNavigate(args: any): void {
    const itemUrl: string = args.item.url;
    if (!itemUrl) return;
    // 外部URL在新标签页打开，内部URL在当前标签页打开
    const isExternal = itemUrl.startsWith('http');
    window.open(itemUrl, isExternal ? '_blank' : '_self');
  }
}

Pattern 5: Custom Popup Width and Target

模式5：自定义弹出菜单宽度和目标

When you need a fixed popup width or a completely custom popup element:

typescript

import { Component } from '@angular/core';
import { ItemModel, SplitButtonModule } from '@syncfusion/ej2-angular-splitbuttons';

@Component({
  standalone: true,
  imports: [SplitButtonModule],
  selector: 'app-root',
  template: `
    <!-- Fixed-width popup -->
    <ejs-splitbutton
      content="Actions"
      [items]="items"
      popupWidth="250px"
      (beforeOpen)="onBeforeOpen($event)"
      (open)="onOpen()"
      (close)="onClose()">
    </ejs-splitbutton>
  `
})
export class AppComponent {
  public items: ItemModel[] = [
    { text: 'Save',   iconCss: 'e-icons e-save' },
    { text: 'Export', iconCss: 'e-icons e-export' },
    { text: 'Print',  iconCss: 'e-icons e-print' }
  ];

  onBeforeOpen(args: any): void {
    console.log('Popup about to open');
  }

  onOpen(): void {
    console.log('Popup opened');
  }

  onClose(): void {
    console.log('Popup closed');
  }
}

当你需要固定弹出菜单宽度或完全自定义弹出元素时：

typescript

import { Component } from '@angular/core';
import { ItemModel, SplitButtonModule } from '@syncfusion/ej2-angular-splitbuttons';

@Component({
  standalone: true,
  imports: [SplitButtonModule],
  selector: 'app-root',
  template: `
    <!-- 固定宽度弹出菜单 -->
    <ejs-splitbutton
      content="Actions"
      [items]="items"
      popupWidth="250px"
      (beforeOpen)="onBeforeOpen($event)"
      (open)="onOpen()"
      (close)="onClose()">
    </ejs-splitbutton>
  `
})
export class AppComponent {
  public items: ItemModel[] = [
    { text: 'Save',   iconCss: 'e-icons e-save' },
    { text: 'Export', iconCss: 'e-icons e-export' },
    { text: 'Print',  iconCss: 'e-icons e-print' }
  ];

  onBeforeOpen(args: any): void {
    console.log('Popup about to open');
  }

  onOpen(): void {
    console.log('Popup opened');
  }

  onClose(): void {
    console.log('Popup closed');
  }
}

Key Props Reference

关键属性参考

Prop	Type	Description	Example
`content`	`string`	Text for primary button	`content="Save"`
`items`	`ItemModel[]`	Dropdown menu items	`[items]="items"`
`iconCss`	`string`	Primary button icon CSS class	`iconCss="e-icons e-save"`
`iconPosition`	`SplitButtonIconPosition`	Icon position ( `"Left"` or `"Top"` )	`iconPosition="Top"`
`disabled`	`boolean`	Enable/disable component	`[disabled]="false"`
`cssClass`	`string`	Custom CSS classes on component	`cssClass="custom-split-btn"`
`enableRtl`	`boolean`	Enable RTL layout	`[enableRtl]="true"`
`target`	`string \| Element`	Custom element as popup content	`target="#colorPicker"`
`popupWidth`	`string \| number`	Popup width ( `"auto"` default)	`popupWidth="250px"`
`createPopupOnClick`	`boolean`	Defer popup DOM creation	`[createPopupOnClick]="true"`
`closeActionEvents`	`string`	DOM event to dismiss popup	`closeActionEvents="mouseleave"`
`animationSettings`	`AnimationModel`	Open/close animation	`[animationSettings]="animation"`
`locale`	`string`	Culture/language code	`locale="ar-SA"`
`(beforeOpen)`	`EventEmitter`	Before dropdown opens	`(beforeOpen)="onBeforeOpen($event)"`
`(click)`	`EventEmitter`	Primary button clicked	`(click)="onPrimaryClick($event)"`
`(select)`	`EventEmitter`	Item selected from dropdown	`(select)="onItemSelect($event)"`
`(open)`	`EventEmitter`	Dropdown opened	`(open)="onOpen($event)"`
`(close)`	`EventEmitter`	Dropdown closed	`(close)="onClose($event)"`
`(beforeClose)`	`EventEmitter`	Before dropdown closes	`(beforeClose)="onBeforeClose($event)"`
`(beforeItemRender)`	`EventEmitter`	Before each item renders	`(beforeItemRender)="onRender($event)"`
`(created)`	`EventEmitter`	Component created	`(created)="onCreated()"`

⚠️ Note:
position
,
title
and
open()
/
close()
methods do not exist in the official API. Use
toggle()
for programmatic open/close. See
references/api-reference.md
for the full authoritative API.

属性	类型	描述	示例
`content`	`string`	主按钮文本	`content="Save"`
`items`	`ItemModel[]`	下拉菜单项	`[items]="items"`
`iconCss`	`string`	主按钮图标CSS类	`iconCss="e-icons e-save"`
`iconPosition`	`SplitButtonIconPosition`	图标位置（ `"Left"` 或 `"Top"` ）	`iconPosition="Top"`
`disabled`	`boolean`	启用/禁用组件	`[disabled]="false"`
`cssClass`	`string`	组件上的自定义CSS类	`cssClass="custom-split-btn"`
`enableRtl`	`boolean`	启用RTL布局	`[enableRtl]="true"`
`target`	`string \| Element`	作为弹出内容的自定义元素	`target="#colorPicker"`
`popupWidth`	`string \| number`	弹出菜单宽度（默认 `"auto"` ）	`popupWidth="250px"`
`createPopupOnClick`	`boolean`	延迟创建弹出菜单DOM	`[createPopupOnClick]="true"`
`closeActionEvents`	`string`	关闭弹出菜单的DOM事件	`closeActionEvents="mouseleave"`
`animationSettings`	`AnimationModel`	打开/关闭动画	`[animationSettings]="animation"`
`locale`	`string`	文化/语言代码	`locale="ar-SA"`
`(beforeOpen)`	`EventEmitter`	下拉菜单打开前	`(beforeOpen)="onBeforeOpen($event)"`
`(click)`	`EventEmitter`	主按钮被点击	`(click)="onPrimaryClick($event)"`
`(select)`	`EventEmitter`	从下拉菜单选择项	`(select)="onItemSelect($event)"`
`(open)`	`EventEmitter`	下拉菜单打开	`(open)="onOpen($event)"`
`(close)`	`EventEmitter`	下拉菜单关闭	`(close)="onClose($event)"`
`(beforeClose)`	`EventEmitter`	下拉菜单关闭前	`(beforeClose)="onBeforeClose($event)"`
`(beforeItemRender)`	`EventEmitter`	每个项渲染前	`(beforeItemRender)="onRender($event)"`
`(created)`	`EventEmitter`	组件创建完成	`(created)="onCreated()"`

⚠️ 注意： 官方API中不存在
position
、
title
和
open()
/
close()
方法。使用
toggle()
进行程序化打开/关闭。完整权威API请查看
references/api-reference.md
。

Common Use Cases

常见用例

Use Case 1: Document Toolbar

Primary action (Save), dropdown with Save As, Export, Print
Icons for visual clarity
Disable Save when no changes
Solution: Combine iconCss with dynamic disable states
Reference: Button Items Configuration + Styling & Customization

Use Case 2: Form Actions Menu

Primary button (Submit), dropdown with Save Draft, Schedule, Delete
Disable options based on form state
Handle each action differently
Solution: Use select event with item tracking
Reference: Events & Methods + Reactive Forms Integration

Use Case 3: Navigation Menu

Primary action (Dashboard), dropdown with other pages
External links to documentation or support
RTL support for international apps
Solution: Use url property and target attribute
Reference: Button Items Configuration + Accessibility & Globalization

Use Case 4: Settings Panel

Accessible split button with keyboard navigation
Screen reader compatible
WCAG 2.2 compliant
Solution: Use proper ARIA attributes and keyboard handlers
Reference: Accessibility & Globalization

Use Case 5: Responsive Toolbar

Split button with adaptive positioning
Responsive popup on small screens
Touch-friendly spacing
Solution: Use dynamic positioning and responsive CSS
Reference: Popup Positioning + Styling & Customization

用例1：文档工具栏

主操作（保存），下拉菜单包含另存为、导出、打印
使用图标提升视觉清晰度
无更改时禁用保存按钮
解决方案：结合iconCss和动态禁用状态
参考：按钮项配置 + 样式与自定义

用例2：表单操作菜单

主按钮（提交），下拉菜单包含保存草稿、计划、删除
根据表单状态禁用选项
为每个操作设置不同的处理逻辑
解决方案：使用select事件跟踪项
参考：事件与方法 + 响应式表单集成

用例3：导航菜单

主操作（仪表板），下拉菜单包含其他页面
指向文档或支持的外部链接
为国际应用提供RTL支持
解决方案：使用url属性和target属性
参考：按钮项配置 + 无障碍访问与全球化

用例4：设置面板

支持键盘导航的无障碍拆分按钮
兼容屏幕阅读器
符合WCAG 2.2标准
解决方案：使用正确的ARIA属性和键盘处理器
参考：无障碍访问与全球化

用例5：响应式工具栏

带自适应定位的拆分按钮
小屏幕上的响应式弹出菜单
适合触摸操作的间距
解决方案：使用动态定位和响应式CSS
参考：弹出菜单定位 + 样式与自定义