syncfusion-javascript-buttons

Syncfusion EJ2 JavaScript Buttons コンポーネント

概要

Syncfusion EJ2 JavaScript Buttons ライブラリは、インタラクティブなユーザーインターフェイスを構築するための、ボタンおよびトグルコンポーネントを包括的に 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

目的： 相互排他的な選択肢から1つを選択するラジオボタンです。

パッケージ： @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

---

SplitButton

目的： 関連する操作のドロップダウンメニューを備えたボタンです。

パッケージ： @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

---

Switch コンポーネント

目的： フォームや設定で二値状態を管理するためのオン／オフ切り替えコントロールです。

パッケージ： @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 - モダンなマテリアルデザイン
• Bootstrap 5 - Bootstrap フレームワーク
• Fluent - Microsoft Fluent デザイン
• 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 - ウェブコンテンツ・アクセシビリティ・ガイドライン
• 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 レイアウトを有効にする
• HTML フォームの送信に name と value を使用する
• セマンティック 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 は、2 つのアクションを備えたボタンを描画します。プライマリボタンは既定のアクションを実行し、セカンダリの矢印ボタンは追加のアクション項目を含むコンテキストポップアップメニューを開きます。アイコン、区切り線、項目／ポップアップのテンプレート、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 イベントによる項目のテンプレート設定
• カスタム HTML 要素を指定した target プロパティによるポップアップのテンプレート設定
• 動的な項目管理に使用する 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');