SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场syncfusion-javascript-buttons

syncfusion-javascript-buttons

前端与建站

查看项目

更新于 10-16 02:50

技能介绍

用途

Syncfusion EJ2 JavaScript Buttons 库用于在 Web 应用中构建按钮、分组按钮、标签与切换类交互控件。资料显示其提供 10 个按钮与切换组件，每个组件配有 TypeScript/JavaScript 示例、无障碍指南和常见用法模式。

主要能力（按组件）

  • Button：主要的交互按钮组件，用于触发用户操作。包为 @syncfusion/ej2-buttons。
  • ButtonGroup：用于按选择模式对相关按钮进行分组的容器，示例中通过 e-btn-group 与 data-mode（radio、checkbox）实现分组选择。
  • Chips：交互式标签/芯片元素，支持选择、删除与拖放。
  • DropdownButton：带下拉菜单的按钮，用于展示相关操作或条目，支持图标、弹出项、模板与事件。
  • FAB（悬浮操作按钮）：悬浮于内容之上的圆形按钮，用于主要操作，支持位置、图标、事件与样式配置。
  • SpeedDial：可展开的悬浮菜单，支持线性或径向显示模式，支持条目、位置、模态、模板与径向菜单。
  • ProgressButton：带进度指示的按钮，用于异步操作，支持 spinner 与进度、事件。
  • RadioButton：单选按钮，用于互斥选项，支持标签、尺寸（e-small）、禁用状态、RTL 与表单提交用的 name/value。
  • SplitButton：双动作按钮，主按钮触发默认操作，次级箭头按钮打开上下文弹出菜单展示额外操作项，支持图标、分隔符、条目/弹出模板、RTL、禁用状态与键盘导航。
  • Switch：开/关切换控件，用于表单与设置中的二元状态管理，支持内容文本、样式、事件与方法。

共性能力

  • 无障碍：所有组件符合 WCAG 2.2 Level AA、Section 508、ADA；具备语义化 HTML 结构、ARIA 标签与角色、键盘导航、屏幕阅读器支持、焦点管理、高对比度支持。
  • 主题：Material 3、Bootstrap 5、Fluent、Tailwind 3、Fabric。
  • API：命令式 TypeScript/JavaScript，并具备完整事件支持。
  • 键盘：完整键盘导航与交互；Tab 聚焦、Enter/Space 激活按钮或菜单项、Escape 关闭菜单、箭头键导航条目。

使用方式

安装（资料提供）：

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

典型用法示例（资料提供）：

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

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

ButtonGroup 分组选择（资料提供）：

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

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

主题引入（资料提供；CDN 仅用于快速原型，生产项目应从 node_modules 导入）：

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

动态更新示例（资料提供）：

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

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

适用场景

  • Web 界面中的主操作按钮、分组工具条、单选/开关表单控件。
  • 需要下拉操作项的按钮（DropdownButton、SplitButton）。
  • 悬浮主要操作（FAB）与可展开悬浮菜单（SpeedDial）。
  • 异步操作反馈（ProgressButton）。
  • 标签/过滤项选择与拖放（Chips）。
  • 对无障碍合规（WCAG 2.2 AA、Section 508、ADA）有要求的项目。

限制

资料未提供收费、价格与授权方式信息，暂未提供。除已列组件与主题外，其他平台支持情况暂未提供。