syncfusion-javascript-buttons

Syncfusion EJ2 JavaScript 按钮组件

概述

Syncfusion EJ2 JavaScript 按钮库提供了 10 种按钮和切换组件，助您构建交互式用户界面。每个组件都附有完整文档，包含 TypeScript/JavaScript 示例、无障碍指南和常见用法模式。

所有组件均支持：

• 无障碍： 符合 WCAG 2.2 Level AA、Section 508 和 ADA 标准
• 主题： Material 3、Bootstrap 5、Fluent、Tailwind 3、Fabric
• API： 命令式 TypeScript/JavaScript，全面支持事件
• 键盘： 完整的键盘导航和交互支持

---

组件概览

快速导航

组件	用途	包	文件
Button	主要交互按钮	ej2-buttons	6
ButtonGroup	分组按钮容器	ej2-buttons	6
Chips	交互式标签/芯片元素	ej2-buttons	7
DropdownButton	带下拉菜单的按钮	ej2-splitbuttons	8
FAB	浮动操作按钮	ej2-buttons	7
ProgressButton	带进度指示器的按钮	ej2-splitbuttons	6
RadioButton	单选按钮	ej2-buttons	6
SpeedDial	可展开的浮动菜单	ej2-buttons	11
SplitButton	带下拉菜单的按钮	ej2-splitbuttons	6
Switch	开关切换组件	ej2-buttons	6

---

Button 组件

用途： 用于触发用户操作的主要交互按钮组件。

包： @syncfusion/ej2-buttons

快速示例

import { Button } from '@syncfusion/ej2-buttons';

const button: Button = new Button({
  cssClass: 'e-primary',
  click: (args: any): void => console.log('Clicked')
});
button.appendTo('#button');

文档

• button-getting-started.md - 设置和基础知识
• button-types-and-styles.md - 样式变体
• button-style-and-appearance.md - 自定义
• button-how-to.md - 常见模式
• button-accessibility.md - 无障碍
• button-api.md - 完整 API

---

ButtonGroup 组件

用途： 用于将相关按钮分组并提供选择模式的容器。

包： @syncfusion/ej2-buttons

快速示例

<div class="e-btn-group" data-mode="radio">
  <button>Left</button>
  <button>Center</button>
  <button>Right</button>
</div>

文档

• buttongroup-getting-started.md - 设置
• buttongroup-types-and-styles.md - 样式
• buttongroup-selection-and-nesting.md - 选择
• buttongroup-customization.md - 自定义
• buttongroup-how-to.md - 模式
• buttongroup-accessibility.md - 无障碍

---

Chips 组件

用途： 支持选择、删除和拖放的交互式芯片/标签元素。

包： @syncfusion/ej2-buttons

快速示例

import { ChipList } from '@syncfusion/ej2-buttons';

const chips: ChipList = new ChipList({
  chips: [
    { text: 'Angular' },
    { text: 'React' }
  ]
});
chips.appendTo('#chips');

文档

• chips-getting-started.md - 设置
• chips-types-and-selection.md - 选择
• chips-customization.md - 自定义
• chips-drag-and-drop.md - 拖放
• chips-style.md - 样式
• chips-api.md - API
• chips-accessibility.md - 无障碍

---

DropdownButton 组件

用途： 带下拉菜单的按钮，用于显示相关操作或项目。

包： @syncfusion/ej2-splitbuttons

快速示例

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

const dropdownBtn: DropdownButton = new DropdownButton({
  items: [
    { text: 'Item 1', iconCss: 'e-icons e-one' },
    { text: 'Item 2', iconCss: 'e-icons e-two' },
    { text: 'Item 3', iconCss: 'e-icons e-three' }
  ],
  select: (args: MenuEventArgs): void => {
    console.log('Selected:', args.item.text);
  }
});
dropdownBtn.appendTo('#dropdownbutton');

文档

• dropdownbutton-getting-started.md - 设置和基础知识
• dropdownbutton-popup-items.md - 弹出项
• dropdownbutton-icons-and-layout.md - 图标
• dropdownbutton-appearance-and-styling.md - 样式
• dropdownbutton-events-and-interactivity.md - 事件
• dropdownbutton-item-template.md - 模板
• dropdownbutton-api.md - API
• dropdownbutton-accessibility.md - 无障碍功能

---

浮动操作按钮（FAB）

用途： 悬浮在内容上方的圆形按钮，用于执行主要操作。

包： @syncfusion/ej2-buttons

快速示例

import { Fab } from '@syncfusion/ej2-buttons';

const fab: Fab = new Fab({
  iconCss: 'e-icons e-plus',
  position: 'BottomRight'
});
fab.appendTo('#fab');

文档

• floating-action-button-getting-started.md - 设置
• floating-action-button-positions.md - 位置
• floating-action-button-icons.md - 图标
• floating-action-button-events.md - 事件
• floating-action-button-styles.md - 样式
• floating-action-button-api.md - API
• floating-action-button-accessibility.md - 无障碍功能

---

速拨菜单

用途： 可展开的浮动菜单，支持线性或径向显示模式。

包： @syncfusion/ej2-buttons

快速示例

import { SpeedDial } from '@syncfusion/ej2-buttons';

const speedDial: SpeedDial = new SpeedDial({
  iconCss: 'e-icons e-plus',
  items: [
    { text: 'Edit', iconCss: 'e-icons e-edit' },
    { text: 'Delete', iconCss: 'e-icons e-delete' }
  ]
});
speedDial.appendTo('#speeddial');

文档

• speeddial-getting-started.md - 设置
• speeddial-items.md - 项目
• speeddial-positions.md - 位置
• speeddial-display-modes.md - 模式
• speeddial-events.md - 事件
• speeddial-modal.md - 模态框
• speeddial-styles.md - 样式
• speeddial-template.md - 模板
• speeddial-radial-menu.md - 径向菜单
• speeddial-api.md - API
• speeddial-accessibility.md - 无障碍功能

---

ProgressButton

用途： 带有进度指示器的按钮，用于异步操作。

包： @syncfusion/ej2-splitbuttons

快速示例

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

const progressBtn: ProgressButton = new ProgressButton({
  enableProgress: true
});
progressBtn.appendTo('#progressbutton');

文档

• progressbutton-getting-started.md - 设置
• progressbutton-spinner-and-progress.md - 进度
• progressbutton-events.md - 事件
• progressbutton-how-to.md - 常用模式
• progressbutton-accessibility.md - 无障碍功能
• progressbutton-api.md - API

---

RadioButton

用途： 单选按钮，用于互斥选项中的单项选择。

包： @syncfusion/ej2-buttons

快速示例

import { RadioButton } from '@syncfusion/ej2-buttons';

const radioBtn: RadioButton = new RadioButton({
  label: 'Option 1',
  name: 'group1',
  value: 'option1'
});
radioBtn.appendTo('#radio');

文档

• radiobutton-getting-started.md - 设置
• radiobutton-label-and-size.md - 标签
• radiobutton-features-and-state.md - 功能
• radiobutton-how-to.md - 模式
• radiobutton-accessibility.md - 无障碍功能
• radiobutton-api.md - API

---

分割按钮

用途： 带下拉菜单的按钮，用于执行相关操作。

包： @syncfusion/ej2-splitbuttons

快速示例

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

const splitBtn: SplitButton = new SplitButton({
  items: [
    { text: 'Item 1', iconCss: 'e-icons e-one' },
    { text: 'Item 2', iconCss: 'e-icons e-two' }
  ]
});
splitBtn.appendTo('#splitbutton');

文档

• splitbutton-getting-started.md - 设置
• splitbutton-icons-and-separator.md - 图标
• splitbutton-popup-items.md - 弹出菜单
• splitbutton-how-to.md - 模式
• splitbutton-accessibility.md - 无障碍功能
• splitbutton-api.md - API

---

开关组件

用途： 用于在表单和设置中管理二元状态的开/关切换控件。

包： @syncfusion/ej2-buttons

快速示例

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

const switchComponent: Switch = new Switch({
  checked: false,
  content: 'Enable notifications',
  change: (args: ChangeEventArgs): void => {
    console.log('Switch state:', args.checked ? 'ON' : 'OFF');
  }
});
switchComponent.appendTo('#switch');

文档

• switch-getting-started.md - 设置和基础知识
• switch-features.md - 功能和配置
• switch-style-and-appearance.md - 样式
• switch-events-and-methods.md - 事件和方法
• switch-how-to.md - 常见模式
• switch-api.md - API 参考

---

常见模式

带图标和文本的按钮

import { Button } from '@syncfusion/ej2-buttons';

const button: Button = new Button({
  cssClass: 'e-primary',
  iconCss: 'e-icons e-send',
  iconPosition: 'Right'
});
button.appendTo('#button');

处理点击事件

const button: Button = new Button({
  click: (args: any): void => {
    console.log('Button clicked');
  }
});
button.appendTo('#button');

动态更新

const button: Button = new Button();
button.appendTo('#button');

// Update properties
button.cssClass = 'e-success';
button.refresh();

组选择

<div class="e-btn-group" data-mode="radio">
  <button>Option 1</button>
  <button>Option 2</button>
  <button>Option 3</button>
</div>


<div class="e-btn-group" data-mode="checkbox">
  <button>Bold</button>
  <button>Italic</button>
  <button>Underline</button>
</div>

---

安装

npm install @syncfusion/ej2-buttons @syncfusion/ej2-splitbuttons
npm audit

导入

import { Button, ButtonGroup, ChipList, Fab, SpeedDial, RadioButton, Switch } from '@syncfusion/ej2-buttons';
import { ProgressButton, SplitButton, DropdownButton } from '@syncfusion/ej2-splitbuttons';

主题支持

所有组件均支持以下主题：

• Material 3 - 现代 Material Design
• Bootstrap 5 - Bootstrap 框架
• Fluent - Microsoft Fluent Design
• Tailwind 3 - Tailwind CSS
• Fabric - Microsoft Fabric

<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/ej2-base/styles/material3.css" />
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/ej2-buttons/styles/material3.css" />

---

键盘导航

所有组件均支持完整的键盘导航：

• Tab： 聚焦组件
• Enter/Space： 激活按钮或菜单项
• Escape： 关闭菜单
• 方向键： 浏览菜单项

---

无障碍功能

所有组件均符合：

• WCAG 2.2 Level AA - Web 内容无障碍指南
• Section 508 - 美国联邦无障碍标准
• ADA - 美国残疾人法案

功能包括：

• 语义化 HTML 结构
• ARIA 标签和角色
• 键盘导航
• 屏幕阅读器支持
• 焦点管理
• 高对比度支持

---

快速入门示例

import { Button, ChipList, Switch } from '@syncfusion/ej2-buttons';
import { SpeedDial, DropdownButton } from '@syncfusion/ej2-buttons';
import { SplitButton } from '@syncfusion/ej2-splitbuttons';

// Create a button
const button: Button = new Button({
  cssClass: 'e-primary',
  click: (): void => console.log('Clicked')
});
button.appendTo('#button');

// Create a switch
const switchComponent: Switch = new Switch({
  checked: false,
  content: 'Enable feature'
});
switchComponent.appendTo('#switch');

// Create a dropdown button
const dropdownBtn: DropdownButton = new DropdownButton({
  items: [
    { text: 'Edit', iconCss: 'e-icons e-edit' },
    { text: 'Delete', iconCss: 'e-icons e-delete' }
  ]
});
dropdownBtn.appendTo('#dropdownbutton');

// Create chips
const chips: ChipList = new ChipList({
  chips: [
    { text: 'Angular' },
    { text: 'React' },
    { text: 'Vue.js' }
  ]
});
chips.appendTo('#chips');

// Create speed dial
const speedDial: SpeedDial = new SpeedDial({
  iconCss: 'e-icons e-plus',
  items: [
    { text: 'Edit', iconCss: 'e-icons e-edit' },
    { text: 'Delete', iconCss: 'e-icons e-delete' }
  ]
});
speedDial.appendTo('#speeddial');

---

其他资源

• Syncfusion 文档
• API 参考
• GitHub 仓库
• 在线演示

---

组件版本： 1.0.0
最后更新： 2024
包： @syncfusion/ej2-buttons, @syncfusion/ej2-splitbuttons 📄 阅读： references/getting-started.md

• 包依赖项（ej2-buttons、ej2-base）
• Webpack 快速入门项目设置
• CSS 主题导入
• TypeScript 基础渲染示例
• 选中和未选中状态

标签和尺寸

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

• 使用 label 属性设置标签文本
• 将标签放在按钮前面或后面（labelPosition: 'Before' / 'After'）
• 使用 cssClass: 'e-small' 设置小尺寸 RadioButton
• 默认尺寸 RadioButton

使用场景

📄 阅读： references/how-to.md

• 使用 disabled: true 设置禁用状态
• 通过 change 事件显示选中的标签
• 使用 enableRtl: true 启用 RTL 布局
• 使用 name 和 value 提交 HTML 表单
• 使用语义化 CSS 类（e-primary、e-success、e-info、e-warning、e-danger）自定义外观

无障碍功能

📄 阅读： references/accessibility.md

• 符合 WCAG 2.2、Section 508 和 ADA 标准
• WAI-ARIA 属性（aria-disabled）
• 键盘操作（上/左方向键、下/右方向键）
• 屏幕阅读器支持和色彩对比度

API 参考

📄 阅读： references/api.md

• 所有属性：checked、cssClass、disabled、enableHtmlSanitizer、enablePersistence、enableRtl、htmlAttributes、label、labelPosition、locale、name、value
• 所有方法：appendTo、click、dataBind、destroy、focusIn、getRootElement、getSelectedValue、refresh、addEventListener、removeEventListener
• 所有事件：change（ChangeArgs）、created

快速入门

TypeScript

import { RadioButton } from '@syncfusion/ej2-buttons';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

// Initialize RadioButton component
let radiobutton: RadioButton = new RadioButton({ label: 'Option 1', name: 'default' });
radiobutton.appendTo('#element1');

radiobutton = new RadioButton({ label: 'Option 2', name: 'default', checked: true });
radiobutton.appendTo('#element2');

<input id="element1" type="radio" />
<input id="element2" type="radio" />

TypeScript（模块设置）

index.html

<!DOCTYPE html>
<html>
<head>
  
  <link href="https://cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
  <link href="https://cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
</head>
<body>
  <input id="radio1" type="radio" />
  <input id="radio2" type="radio" />
  <script src="bundle.js"></script>
</body>
</html>

import { RadioButton } from '@syncfusion/ej2-buttons';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

const rb1: RadioButton = new RadioButton({ label: 'Option 1', name: 'default' });
rb1.appendTo('#radio1');

const rb2: RadioButton = new RadioButton({ label: 'Option 2', name: 'default', checked: true });
rb2.appendTo('#radio2');

常见模式

带有 change 事件的 RadioButton 组

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

let rb1: RadioButton = new RadioButton({
  label: 'Option 1',
  name: 'group',
  checked: true,
  change: (args: ChangeEventArgs) => {
    console.log('Selected: ' + (args.event.target as HTMLInputElement).value);
  }
});
rb1.appendTo('#element1');

小尺寸 RadioButton

import { RadioButton } from '@syncfusion/ej2-buttons';

let rb: RadioButton = new RadioButton({ label: 'Small', name: 'size', cssClass: 'e-small' });
rb.appendTo('#element');

禁用的 RadioButton

import { RadioButton } from '@syncfusion/ej2-buttons';

let rb: RadioButton = new RadioButton({ label: 'Disabled Option', name: 'group', disabled: true });
rb.appendTo('#element');

SplitButton

Syncfusion EJ2 JavaScript SplitButton 会呈现一个双操作按钮：主按钮触发默认操作，次级箭头按钮则打开上下文弹出菜单，其中包含其他操作项。它支持图标、分隔线、项目/弹出菜单模板、RTL、禁用状态、键盘导航和完整的无障碍功能，所有功能均来自 ej2-splitbuttons 包。

导航指南

入门

📄 阅读： references/getting-started.md

• 包依赖项（ej2-splitbuttons、ej2-base、ej2-buttons、ej2-popups）
• 本地脚本/样式设置
• 基于 CDN 的设置
• 最简可运行示例（ES5 全局命名空间）
• 通过 appendTo() 和 items 配置进行渲染

图标和分隔线

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

• 通过 iconCss 属性添加图标
• 设置图标位置：Left（默认）和 Top
• 使用 e-vertical CSS 类和 cssClass 创建垂直 SplitButton
• 通过 separator: true 在弹出菜单项之间添加水平分隔线

弹出菜单项

📄 阅读： references/popup-items.md

• 通过 ItemModel 上的 iconCss 为弹出菜单操作项添加图标
• 使用 beforeItemRender 事件设置项目模板
• 使用 target 属性和自定义 HTML 元素设置弹出菜单模板
• 使用 addItems() 和 removeItems() 方法动态管理项目

使用场景

📄 阅读： references/how-to.md

• 启用 RTL（从右向左）布局
• 设置禁用状态
• 使用 ListView 对弹出菜单项进行分组
• 通过 select 事件在点击弹出菜单项时打开 Dialog
• 使用 beforeItemRender 在弹出菜单项文本中为字符添加下划线

无障碍功能

📄 阅读： references/accessibility.md

• 符合 WCAG 2.2、Section 508 和 ADA 标准
• WAI-ARIA 属性：role、aria-haspopup、aria-expanded、aria-owns、aria-disabled
• 键盘快捷键（Esc、Enter、Space、方向键、Alt+方向键）
• 屏幕阅读器支持、RTL 和色彩对比度

API 参考

📄 阅读： references/api.md

• 所有属性：content、items、iconCss、iconPosition、cssClass、disabled、enableRtl、target、itemTemplate、animationSettings、closeActionEvents、createPopupOnClick、popupWidth、enableHtmlSanitizer、enablePersistence、locale
• 所有方法：appendTo、toggle、addItems、removeItems、dataBind、refresh、destroy、focusIn、getRootElement
• 所有事件：click、select、beforeOpen、open、beforeClose、close、beforeItemRender、created

快速入门

TypeScript

index.html

<!DOCTYPE html>
<html>
<head>
  
  <link href="https://cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
  <link href="https://cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
  <link href="https://cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
  <link href="https://cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
</head>
<body>
  <button id="element">Paste</button>
  <script src="bundle.js"></script>
</body>
</html>

import { SplitButton, ItemModel } from '@syncfusion/ej2-splitbuttons';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

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

const splitBtn: SplitButton = new SplitButton({ items: items });
splitBtn.appendTo('#element');

常见模式

带图标的 SplitButton（默认位于左侧）

import { SplitButton, ItemModel } from '@syncfusion/ej2-splitbuttons';

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

const splitBtn: SplitButton = new SplitButton({
  content: 'Paste',
  iconCss: 'e-icons e-paste',
  items: items
});
splitBtn.appendTo('#element');

带 click 和 select 事件处理程序的 SplitButton

import { SplitButton, ItemModel, ClickEventArgs, MenuEventArgs } from '@syncfusion/ej2-splitbuttons';

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

const splitBtn: SplitButton = new SplitButton({
  content: 'Paste',
  items: items,
  click: (args: ClickEventArgs): void => {
    console.log('Primary button clicked');
  },
  select: (args: MenuEventArgs): void => {
    console.log('Selected item: ' + args.item.text);
  }
});
splitBtn.appendTo('#element');

已禁用的 SplitButton

import { SplitButton, ItemModel } from '@syncfusion/ej2-splitbuttons';

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

const splitBtn: SplitButton = new SplitButton({
  content: 'Paste',
  items: items,
  disabled: true
});
splitBtn.appendTo('#element');