syncfusion-react-buttons

Syncfusion React Buttons

📌 エージェントへのお知らせ： ナビゲーションガイドのセクションにある 📄 Read: リンクは、ファイルを参照目的で読み取るためのものです。ツールの自動呼び出し、コマンドの実行、アクションの連鎖を示すものではありません。

---

Button

Syncfusion の ButtonComponent は、クリック時にアクションを実行するグラフィカルユーザーインターフェイス要素です。テキスト、アイコン、またはその両方に対応しており、スタイル、アクセシビリティ、動作に関する豊富なオプションを備えています。

ナビゲーションガイド

はじめに

📄 読み取り： references/button-getting-started.md

• インストールとパッケージのセットアップ
• CSS のインポートとテーマの設定
• 最初の ButtonComponent のレンダリング
• リップル効果の有効化
• 基本的なクリック処理

種類とスタイル

📄 読み取り： references/button-types-and-styles.md

• 定義済みの色スタイル（primary、success、info、warning、danger、link）
• フラット、アウトライン、ラウンド、トグルの各ボタンタイプ
• 基本的な HTML ボタンタイプ（submit、reset）
• アイコンボタン（フォントアイコン、SVG）
• アイコンの配置（左／右）
• ボタンサイズ（small、normal）

実装パターン

📄 読み取り： references/button-how-to.md

• ブロック（全幅）ボタンの作成
• 角丸ボタンの作成
• ボタンへのナビゲーションリンクの追加
• CSS によるボタンの外観のカスタマイズ
• ネイティブの input 要素と anchor 要素をボタンとしてスタイリング
• 無効状態の設定
• 右から左（RTL）への対応の有効化
• ホバー時のツールチップの追加
• リピートボタンの実装

スタイルと外観

📄 読み取り： references/button-style-and-appearance.md

• 使用可能な CSS クラスとその用途
• デフォルトスタイルの上書き
• Theme Studio によるカスタムテーマの作成

アクセシビリティ

📄 読み取り： references/button-accessibility.md

• WCAG 2.2、Section 508 への準拠
• WAI-ARIA 属性
• キーボードナビゲーション
• スクリーンリーダーのサポート

API リファレンス

📄 読み取り： references/button-api.md

• すべてのプロパティ、メソッド、イベント
• プロパティの型、デフォルト値、制約

---

クイックスタート

⚠️ 次のコマンドはターミナルで手動で実行してください。自動的に実行しないでください。

# Run in your terminal
npm install @syncfusion/ej2-react-buttons --save

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

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

enableRipple(true);

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

---

よく使われるパターン

スタイル付きボタン

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

アイコンボタン

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

トグルボタン

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

無効化されたボタン

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

ブロック（全幅）ボタン

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

---

ButtonGroup

ButtonGroup は、複数のボタンを横方向（デフォルト）または縦方向にまとめる、CSS のみのコンポーネントです。通常のボタン動作に加えて、ラジオボタン形式（単一選択）やチェックボックス形式（複数選択）の動作にも対応しています。DropDownButton および SplitButton コンポーネントを入れ子にできます。

ナビゲーションガイド

はじめに

📄 読み取り： references/buttongroup-getting-started.md

• インストールとパッケージのセットアップ
• CSS の参照とテーマのインポート
• ButtonGroup の基本的な実装
• アプリケーションの実行

種類とスタイル

📄 読み取り： references/buttongroup-types-and-styles.md

• アウトライン ButtonGroup（e-outline）
• 定義済みの色スタイル（e-primary、e-success、e-info、e-warning、e-danger）
• グループ内でのスタイルの混在

選択と入れ子

📄 読み取り： references/buttongroup-selection-and-nesting.md

• 単一選択（ラジオボタン形式）
• 複数選択（チェックボックス形式）
• 初期選択状態の設定
• ButtonGroup 内への DropDownButton の入れ子
• ButtonGroup 内への SplitButton の入れ子

操作ガイド

📄 参照: references/buttongroup-how-to.md

• ボタンにアイコンを追加する（iconCss）
• 角を丸くする（e-round-corner）
• 個別のボタンまたはすべてのボタンを無効にする
• リップル効果を有効にする
• RTL サポートを有効にする
• 垂直方向の配置（e-vertical）
• ラジオボタン／チェックボックスの ButtonGroup でフォームを送信する
• createButtonGroup ユーティリティ関数を使用して初期化する

スタイルと外観

📄 参照: references/buttongroup-style-and-appearance.md

• カスタマイズに使用できる CSS クラス
• ホバー、フォーカス、アクティブ状態のオーバーライド
• Theme Studio との統合

アクセシビリティ

📄 参照: references/buttongroup-accessibility.md

• WCAG 2.2、Section 508 への準拠
• キーボード操作のショートカット
• スクリーンリーダーのサポート

---

クイックスタート

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

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

src/App.css で必要な CSS をインポートします：

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

---

よくあるパターン

ラジオボタン（単一選択）の ButtonGroup

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

チェックボックス（複数選択）の ButtonGroup

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

垂直方向の ButtonGroup

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

---

主な Props

Prop / Class	Component	説明
cssClass	ButtonComponent	スタイルクラスを適用します（e-outline、e-primary、e-success、e-info、e-warning、e-danger）
iconCss	ButtonComponent	ボタンアイコンの CSS クラス
disabled	ButtonComponent	ボタンを無効にします
isPrimary	ButtonComponent	ボタンをプライマリとして指定します
e-btn-group	container div	ButtonGroup に必須のラッパークラス
e-outline	container div + buttons	グループにアウトラインスタイルを適用します
e-round-corner	container div	グループの角を丸くします
e-vertical	container div	垂直方向のレイアウト
e-rtl	container div	右から左へのレイアウト

---

ドロップダウンボタン

Syncfusion の DropDownButtonComponent は、アクション項目の一覧を含むコンテキストポップアップメニューを開閉するボタンを表示します。アイコン、区切り線、テンプレート、アニメーション、アクセシビリティに対応し、幅広くカスタマイズできます。

ナビゲーションガイド

はじめに

📄 参照: references/dropdownbutton-getting-started.md

• インストールとパッケージのセットアップ
• CSS のインポートとテーマの設定
• 最初の DropDownButtonComponent の表示
• items によるデータソースのバインド
• 最小限の実行可能な例

ポップアップ項目とナビゲーション

📄 参照: references/dropdownbutton-popup-items.md

• iconCss を使用してポップアップ項目にアイコンを追加する
• 項目の url によるナビゲーション URL
• ポップアップ項目をグループ化する区切り線
• beforeItemRender による項目テンプレート
• ポップアップ（ターゲット）テンプレート
• 項目テキスト内の下線付き文字

アイコンとレイアウト

📄 参照: references/dropdownbutton-icons-and-layout.md

• iconCss と iconPosition によるボタンアイコン
• e-caret-hide によるアイコンのみのボタン
• スプライト画像アイコン
• e-vertical による垂直方向のボタンレイアウト
• アイコンサイズとボタン幅のカスタマイズ

外観とスタイル

📄 参照: references/dropdownbutton-appearance-and-styling.md

• CSS クラスのオーバーライド（色のスタイル、サイズ、状態）
• e-round-corner による角丸
• e-caret-hide によるドロップダウン矢印の非表示
• popupWidth によるポップアップ幅の設定
• Theme Studio によるカスタマイズ
• ポップアップを開閉する際のアニメーション設定

イベントとインタラクティブ操作

📄 参照: references/dropdownbutton-events-and-interactivity.md

• 項目クリック時の select イベントの処理
• 動的なキャレットアイコンのための beforeOpen ／ beforeClose
• ポップアップの位置をカスタマイズする open イベント
• disabled によるボタンの無効化
• enableRtl による RTL サポート
• 項目選択時にダイアログを開く
• 動的な addItems ／ removeItems メソッド
• プログラムによる開閉に使用する toggle メソッド

項目テンプレート

📄 参照: references/dropdownbutton-item-template.md

• 項目をカスタムレンダリングするための itemTemplate プロパティ
• 項目内でのリンク、アイコン、リッチコンテンツのレンダリング

ListView との連携

📄 参照: references/dropdownbutton-listview-integration.md

• ListView 要素での target プロパティの使用
• カテゴリヘッダー付きのグループ化されたポップアップ項目

アクセシビリティ

📄 参照: references/dropdownbutton-accessibility.md

• WCAG 2.2、Section 508、ADA への準拠
• WAI-ARIA 属性（role、aria-haspopup、aria-expanded）
• キーボードナビゲーションのショートカット
• スクリーンリーダーのサポート

API リファレンス

📄 参照: references/dropdownbutton-api.md

• すべてのプロパティ: items、cssClass、iconCss、iconPosition、disabled、enableRtl、animationSettings、popupWidth、target、itemTemplate、content、closeActionEvents、createPopupOnClick、enableHtmlSanitizer、enablePersistence、locale
• すべてのイベント: beforeClose、beforeOpen、beforeItemRender、close、open、select、created
• すべてのメソッド: addItems、removeItems、toggle、focusIn、destroy、getPersistData
• 型定義: ItemModel、MenuEventArgs、OpenCloseMenuEventArgs、BeforeOpenCloseMenuEventArgs

---

クイックスタート

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

enableRipple(true);

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

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

export default App;

---

よくあるパターン

アイコンとポップアップアイコン付きボタン

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

区切り線付きのグループ化された項目

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

項目選択の処理

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

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

---

フローティングアクションボタン

Syncfusion React の FabComponent は、UI の上に浮かぶ円形のボタンで、アプリケーションの主要なアクションを表します。柔軟な配置、アイコン＋テキストのコンテンツ、定義済みスタイル、完全なアクセシビリティ準拠、CSS によるカスタマイズに対応しています。

パッケージ: @syncfusion/ej2-react-buttons

ナビゲーションガイド

はじめに

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

• @syncfusion/ej2-react-buttons のインストール
• Tailwind3 用の CSS テーマのインポート
• 最小限の FabComponent のセットアップ
• target を使用したコンテナー基準の配置
• クリックイベントの処理

アイコンとコンテンツ

📄 参照: references/floating-action-button-icons.md

• アイコンのみの FAB 用 iconCss プロパティ
• テキストラベル用の content プロパティ
• アイコンを左または右に配置する iconPosition
• アイコンとテキストを組み合わせた例

位置

📄 参照: references/floating-action-button-positions.md

• 9 つの定義済み値（TopLeft → BottomRight）を指定する position プロパティ
• FAB の対象範囲をコンテナーに限定する target プロパティ
• cssClass を使用したカスタム CSS による配置

スタイルと外観

📄 参照: references/floating-action-button-styles.md

• 定義済みの cssClass 値: e-primary、e-outline、e-info、e-success、e-warning、e-danger
• CSS クラスのオーバーライド用リファレンステーブル
• CSS トランジションを使用したホバー時のテキスト表示
• アウトラインの色のカスタマイズ

イベント

📄 参照: references/floating-action-button-events.md

• クリック処理用の onClick イベント
• レンダリング後の初期化用の created イベント

アクセシビリティ

📄 参照: references/floating-action-button-accessibility.md

• WCAG 2.2 / Section 508 への準拠
• WAI-ARIA 属性（aria-label、aria-disabled、role="button"）
• キーボードナビゲーション（Enter、Space、Tab、Escape）
• enableRtl による RTL サポート
• スクリーンリーダーのサポート

API リファレンス

📄 参照： references/floating-action-button-api.md

• すべてのプロパティ：content、cssClass、disabled、enableHtmlSanitizer、enablePersistence、enableRtl、iconCss、iconPosition、isPrimary、isToggle、position、target、visible
• メソッド：click()、destroy()、focusIn()、getPersistData()、refreshPosition()
• イベント：created、onClick

---

クイックスタート

⚠️ 次のコマンドはターミナルで手動実行してください。自動実行しないでください。

# Run in your terminal
npm install @syncfusion/ej2-react-buttons --save

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

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

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

---

一般的なパターン

アイコンのみの FAB（最も一般的）

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

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

クリックハンドラー付き FAB

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

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

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

カスタムスタイルの FAB

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

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

---

主なプロパティ一覧

プロパティ	型	デフォルト	目的
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 をサニタイズします

---

スピードダイヤル

Syncfusion の SpeedDialComponent は、クリックまたはホバーすると、状況に応じたアクション項目のセットを表示するフローティングアクションボタン（FAB）です。リニアモードとラジアルモード、柔軟な配置、テンプレート、アニメーション、モーダルオーバーレイ、完全なアクセシビリティに対応しています。

ナビゲーションガイド

はじめに

📄 参照： references/speeddial-getting-started.md

• インストールとパッケージの設定
• CSS のインポートとテーマの設定
• 最初の SpeedDialComponent のレンダリング
• 基本的な項目の設定
• ターゲット要素の設定

項目の設定

📄 参照： references/speeddial-items.md

• SpeedDialItemModel のフィールド（text、iconCss、id、title、disabled）
• アイコンのみ、テキストのみ、アイコンとテキストの組み合わせ
• 個々の項目の無効化
• アニメーション効果（Fade、Zoom など）
• 項目テンプレートの概要

表示モード

📄 参照： references/speeddial-display-modes.md

• リニアモード（デフォルト）と方向の値（Up、Down、Left、Right、Auto）
• ラジアルモードの概要と使い方

ラジアルメニュー

📄 参照： references/speeddial-radial-menu.md

• モードを Radial に設定
• radialSettings：方向（Clockwise、AntiClockwise、Auto）
• startAngle と endAngle の設定
• offset でボタンから項目までの距離を制御

位置と表示の制御

📄 参照： references/speeddial-positions.md

• 位置の値（TopLeft、TopCenter、TopRight、MiddleLeft、MiddleCenter、MiddleRight、BottomLeft、BottomCenter、BottomRight）
• ターゲット要素を基準とした位置設定
• opensOnHover によるホバー時の開動作
• プログラムからの show() メソッドと hide() メソッド
• レイアウト変更後の refreshPosition()

スタイルと外観

📄 参照： references/speeddial-styles.md

• ボタンアイコン用の openIconCss と closeIconCss
• テキストボタン用の content プロパティ
• 定義済みの cssClass 値（e-primary、e-outline、e-info、e-success、e-warning、e-danger）
• disabled プロパティと visible プロパティ
• title 属性によるツールチップ
• カスタム CSS による上書き

テンプレート

📄 参照: references/speeddial-template.md

• カスタム項目のレンダリングに使用するitemTemplate
• ポップアップを完全にカスタマイズするpopupTemplate
• JSX 関数テンプレートのパターン

イベント

📄 参照: references/speeddial-events.md

• clicked、created、beforeOpen、onOpen、beforeClose、onClose、beforeItemRender
• イベント引数の型：SpeedDialItemEventArgs、SpeedDialBeforeOpenCloseEventArgs、SpeedDialOpenCloseEventArgs
• beforeOpen と beforeClose のキャンセルパターン

モーダル

📄 参照: references/speeddial-modal.md

• モーダルオーバーレイの有効化
• インタラクションをブロックする動作
• 背景クリック時に閉じる

アクセシビリティ

📄 参照: references/speeddial-accessibility.md

• WCAG 2.2、Section 508 への準拠
• WAI-ARIA 属性（role、aria-expanded、aria-label など）
• キーボード操作のショートカット
• スクリーンリーダーのサポート
• enableRtl による RTL のサポート

API リファレンス

📄 参照: references/speeddial-api.md

• すべてのプロパティ、メソッド、イベントとその型およびデフォルト値

---

クイックスタート

⚠️ 次のコマンドをターミナルで手動実行してください。自動実行しないでください。

# Run in your terminal
npm install @syncfusion/ej2-react-buttons --save

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

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

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

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

---

よく使われるパターン

ツールチップ付きのアイコンのみの項目

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

放射状モード

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

項目のクリックを処理する

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

オーバーレイ付きモーダル

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

プログラムから開閉する

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

Syncfusion React ProgressButton の実装

@syncfusion/ej2-react-splitbuttons の ProgressButtonComponent は、バックグラウンド処理の進行状況を視覚的に示すボタンです。アニメーションするスピナー、背景のプログレスバーの塗りつぶし、処理の各段階で利用できるコンテンツやスタイルのフックを備えています。

ナビゲーションガイド

タスク	参照先
パッケージのインストールと最初のレンダリング	references/getting-started.md
スピナーの位置／サイズ／テンプレート、プログレスバー、アニメーション、step／percent／start／stop	references/spinner-and-progress.md
CSS クラス、テーマ設定、Theme Studio	references/style-and-appearance.md
ARIA 属性、キーボードショートカット、スクリーンリーダーへの準拠	references/accessibility.md
背景のプログレスバーの塗りつぶしを有効にする	references/how-to-enable-progress-in-button.md
スピナーを非表示にする（プログレスバーのみを表示）	references/how-to-hide-spinner.md
垂直、上方向、または逆方向のプログレスバーの塗りつぶし	references/how-to-customize-progress-using-cssclass.md
進行中にボタンのテキスト／CSS クラスを変更する	references/how-to-change-text-content-and-styles-of-the-progressbutton-during-progress.md
ライフサイクルイベントをトレース／処理する	references/how-to-trace-events-of-progress-button.md
API リファレンス全体（すべての props、イベント、メソッド、型）	references/api.md

---

クイックスタート

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

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

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

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

---

よく使われるパターン

プログレスバーと非表示のスピナー

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

カスタムスピナー（右側、小サイズ、テンプレート使用）

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

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

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

中央にスピナーを配置したスライドアニメーション

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

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

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

プログラムから開始／停止する

let progressBtn: ProgressButtonComponent;

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

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

ライフサイクルイベント

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

---

リファレンスファイル

ファイル	内容
references/getting-started.md	インストール、CSS のインポート、最初のコンポーネント
references/spinner-and-progress.md	スピナーの設定、アニメーション、ステップ、動的な %、開始／停止
references/style-and-appearance.md	CSS クラスの一覧、テーマ設定
references/accessibility.md	ARIA、キーボード操作、準拠状況の一覧
references/how-to-enable-progress-in-button.md	enableProgress の使用方法
references/how-to-hide-spinner.md	e-hide-spinner の使用方法
references/how-to-customize-progress-using-cssclass.md	垂直／上部／逆方向の塗りつぶし
references/how-to-change-text-content-and-styles-of-the-progressbutton-during-progress.md	進行中のテキスト／スタイルの動的な変更
references/how-to-trace-events-of-progress-button.md	イベント追跡の例
references/api.md	API 全般：プロパティ、イベント、メソッド、型

Switch

Syncfusion の SwitchComponent は、チェック済み（オン）状態と未チェック（オフ）状態を切り替えるグラフィカルなトグルコントロールです。@syncfusion/ej2-react-buttons パッケージの一部であり、テキストラベル、サイズのバリエーション、無効状態、フォーム送信、RTL、プログラムによる制御、CSS による完全なカスタマイズに対応しています。

ナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• パッケージのインストールと npm のセットアップ
• CSS テーマのインポート
• 基本的な SwitchComponent のレンダリング
• チェック状態の初期化
• アプリケーションの実行

機能と設定

📄 参照： references/features.md

• onLabel／offLabel のテキストラベル
• disabled プロパティ
• フォーム送信用の name と value
• カスタムスタイル用の cssClass
• 右から左への表示に対応する enableRtl
• 再読み込み後も状態を保持する enablePersistence
• 追加の HTML 属性を指定する htmlAttributes
• ローカライズ用の locale

イベントとメソッド

📄 参照： references/events-and-methods.md

• change イベントと ChangeEventArgs
• 状態遷移をキャンセルする beforeChange イベント
• created ライフサイクルイベント
• プログラムで状態を制御する toggle() メソッド
• click()、focusIn()、destroy() メソッド
• ref を使用した命令的なメソッド呼び出し

使用方法のレシピ

📄 参照： references/how-to.md

• スイッチのサイズを変更する（小サイズ／デフォルト）
• beforeChange を使用して状態変更を防止する
• テキストラベル（ON／OFF）を設定する
• ラベルのクリック時にリップルを有効にする
• RTL レイアウトを有効にする
• 無効状態を設定する
• フォームで name と value を送信する
• toggle() メソッドでプログラムから切り替える

スタイルと外観

📄 参照： references/style-and-appearance.md

• CSS クラスのリファレンス一覧
• バーとハンドルの形状のカスタマイズ
• スイッチの色のカスタマイズ
• 小サイズのバリエーション
• Theme Studio の使用

API リファレンス

📄 参照： references/api.md

• 型とデフォルト値を含むすべてのプロパティ
• 戻り値の型を含むすべてのメソッド
• 引数インターフェイスを含むすべてのイベント
• ChangeEventArgs と BeforeChangeEventArgs

クイックスタート

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

enableRipple(true);

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

最初にパッケージをインストールします。

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

よくあるパターン

ON／OFF のテキストラベル付きスイッチ

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

注：Material テーマではテキストラベルはサポートされていません。

状態変更の処理

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

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

無効なスイッチ

<SwitchComponent disabled={true} />

小サイズのスイッチ

<SwitchComponent cssClass="e-small" />

プログラムによる切り替え

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

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

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

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

名前と値を指定したフォーム送信

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

主要なプロパティ一覧

プロパティ	型	デフォルト	目的
checked	boolean	false	初期チェック状態
disabled	boolean	false	ユーザー操作を無効にします
cssClass	string	''	カスタム CSS クラス（小サイズには e-small を使用します）
onLabel	string	''	チェック時のラベル
offLabel	string	''	未チェック時のラベル
name	string	''	フォームフィールド名
value	string	''	フォームフィールドの値
enableRtl	boolean	false	右から左へのレイアウト
enablePersistence	boolean	false	再読み込み後も状態を保持します

SplitButton

React アプリケーションで SplitButton コンポーネントを実装するための包括的なスキルです。SplitButton は、主要なアクションボタンと、二次アクション用のドロップダウンメニューを組み合わせます。

対象コンポーネント

主要なアクションと、二次アクションのドロップダウンメニューを表示するボタンです。

一般的なユースケース：

• 保存のバリエーション： 保存、名前を付けて保存、すべて保存
• 送信のバリエーション： 送信、送信予約、すべて送信
• ダウンロードのバリエーション： ダウンロード、すべてダウンロード、エクスポート
• 共有オプション： 共有、リンクを共有、メールで共有
• 印刷オプション： 印刷、印刷プレビュー、印刷設定

ドキュメント

はじめに

📄 参照： references/getting-started.md

• インストールとパッケージのセットアップ
• SplitButton の基本的な実装
• CSS のインポートとテーマ
• 最初に動作するサンプル
• モジュールのセットアップ（スタンドアロンおよびモジュールベース）

種類とスタイル

📄 参照： references/types-and-styles.md

• ボタンのスタイル（プライマリ、成功、情報、警告、危険、リンク）
• ボタンの種類（フラット、アウトライン、ラウンド）
• アイコンの配置（左、右、上、下）
• サイズのバリエーション（小、中、大）
• スタイル付きアンカー要素
• RTL のサポート

SplitButton の機能

📄 参照： references/splitbutton-features.md

• ドロップダウンメニュー項目
• アイコンとテキストの組み合わせ
• 無効状態
• イベント処理（クリック、選択、開く前）
• 項目の動的な操作
• キーボードナビゲーション
• ツールチップとタイトル

API リファレンス

📄 参照： references/api-reference.md

• プロパティの完全なドキュメント
• メソッドとその使用方法
• イベントハンドラーとコールバック
• モデルインターフェース
• 型定義
• クイックリファレンステーブル

カスタマイズ

📄 参照： references/customization.md

• カスタム CSS クラス
• テーマとカラースキーム
• カスタムアイコンとフォント
• 項目用のカスタムテンプレート
• レスポンシブデザイン
• アニメーションとトランジション
• 項目の区切りとグループ化

アクセシビリティ

📄 参照： references/accessibility.md

• WCAG 2.1 への準拠
• キーボードナビゲーションのパターン
• ARIA 属性
• スクリーンリーダーのサポート
• フォーカス管理
• アクセシブルなラベルと説明

クイックスタート

基本的な SplitButton

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

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

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

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

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

export default App;

アイコン付き SplitButton

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

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

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

export default SaveButton;

イベント処理付き SplitButton

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

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

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

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

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

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

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

export default EventHandlingExample;

動的な項目を持つ SplitButton

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

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

  const splitBtnRef = useRef(null);

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

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

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

export default DynamicItemsExample;

カスタムテンプレートを使用した SplitButton

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

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

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

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

export default CustomTemplateExample;

一般的なパターン

保存のバリエーションパターン

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

ダウンロードパターン

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

共有パターン

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

状態管理パターン

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

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

主なプロパティの概要

プロパティ	型	デフォルト値	目的
items	ItemModel[]	[]	ドロップダウンメニューの項目
cssClass	string	''	スタイル設定用の CSS クラス
iconCss	string	''	プライマリボタンのアイコン CSS
iconPosition	string	'Left'	アイコンの位置（Left、Right、Top、Bottom）
disabled	boolean	false	ボタンを無効にします
enableRtl	boolean	false	RTL モードを有効にします
created	function	-	コンポーネント作成時のイベント
click	function	-	プライマリボタンのクリックハンドラー
select	function	-	メニュー項目の選択ハンドラー
beforeOpen	function	-	ドロップダウンが開く前に発生します
beforeClose	function	-	ドロップダウンが閉じる前に発生します
open	function	-	ドロップダウンが開いた後に発生します
close	function	-	ドロップダウンが閉じた後に発生します

次のステップ

1. インストールとセットアップ → getting-started.mdをお読みください
2. スタイル設定オプション → types-and-styles.mdをお読みください
3. 機能 → splitbutton-features.mdをお読みください
4. 完全な API → api-reference.mdをお読みください
5. 高度なカスタマイズ → customization.mdをお読みください
6. アクセシビリティ → accessibility.mdをお読みください

トラブルシューティング用クイックリンク

• 項目が表示されませんか？ → references/getting-started.md#css-importsをご確認ください
• イベントが発生しませんか？ → references/splitbutton-features.md#event-handlingをご確認ください
• スタイルに問題がありますか？ → references/types-and-styles.mdをご確認ください
• アクセシビリティに懸念がありますか？ → references/accessibility.mdをご確認ください

リソース

• 公式ドキュメント： Syncfusion React SplitButton
• API リファレンス： Syncfusion SplitButton API
• ライブデモ： Syncfusion React Demos

RadioButton

Syncfusion React の RadioButtonComponent を実装するためのスキルです。グループからユーザーがオプションを1つだけ選択できるグラフィカルな UI 要素です。チェック済み／未チェック状態、ラベルの位置、小さいサイズ、フォームとの連携、RTL、無効状態、完全な CSS カスタマイズに対応しています。

ナビゲーションガイド

はじめに

📄 お読みください： references/getting-started.md

• パッケージのインストールと CSS のインポート
• 基本的な RadioButtonComponent の描画
• name プロパティを使ったラジオボタンのグループ化
• Vite + React プロジェクトのクイックセットアップ
• リップル効果の有効化

ラベルとサイズ

📄 お読みください： references/label-and-size.md

• label プロパティを使ったキャプションの追加
• labelPosition を使ったラベルの前後への配置
• cssClass="e-small" を使った小さいサイズの適用
• デフォルトとコンパクトサイズのバリエーション

機能と状態

📄 お読みください： references/features-and-state.md

• checked を使ったチェック済み／未チェック状態の設定
• disabled を使った RadioButton の無効化
• name と value を使ったグループ化とフォーム送信
• enableRtl を使った RTL レイアウト
• change イベントによる状態変更の処理
• created を使ったコンポーネントのライフサイクルの監視

スタイルと外観

📄 お読みください： references/style-and-appearance.md

• デフォルトの CSS クラスの上書き
• 意味に基づく色のバリエーション（primary、success、warning など）の作成
• カスタムスタイルへの cssClass の使用
• グローバルなテーマ設定のための Theme Studio との連携
• CSS クラスのリファレンステーブル

アクセシビリティ

📄 参照: references/accessibility.md

• WCAG 2.2 および Section 508 への準拠
• WAI-ARIA 属性（role、aria-checked、aria-disabled）
• キーボード操作のショートカット
• スクリーンリーダーのサポート

API リファレンス

📄 参照: references/api.md

• すべてのプロパティ：checked、disabled、label、labelPosition、name、value、cssClass、enableRtl、enablePersistence、enableHtmlSanitizer、htmlAttributes、locale
• メソッド：click()、destroy()、focusIn()、getSelectedValue()
• イベント：change（ChangeArgs）、created

クイックスタート

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

enableRipple(true);

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

よく使われるパターン

変更ハンドラーを使用した状態の制御

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

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

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

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

name/value を使用したフォーム送信

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

グループ内の無効なオプション

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

コンパクトな小さいサイズ

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

RTL のサポート

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

主な Props の概要

Prop	Type	Default	Purpose
label	string	''	ボタンの横に表示するラベル
name	string	''	ボタンを相互排他的なグループにまとめます
value	string	''	チェック時に送信されるフォームの値
checked	boolean	false	チェック状態を設定します
disabled	boolean	false	ユーザーの操作を無効にします
labelPosition	'Before' | 'After'	'After'	ラベルの配置
cssClass	string	''	カスタム CSS クラス
enableRtl	boolean	false	右から左へのレイアウト
enablePersistence	boolean	false	ページの再読み込み後も状態を保持します

選択ガイド

• 複数のオプションから 1 つを選ぶ → name でグループ化し、各オプションに value を設定します
• デフォルトを事前に選択する → 対象のオプションに checked={true} を設定します
• 選択されたオプションを確認する → change イベント（args.value）を使用するか、getSelectedValue() を呼び出します
• オプションを選択できないようにする → disabled={true} を使用します
• 高密度な UI レイアウト → cssClass="e-small" を追加します
• RTL 言語の UI → enableRtl={true} を使用します
• カスタムカラーやブランド設定 → cssClass とカスタム CSS ルールを使用します（style-and-appearance.md を参照）

チップ

Syncfusion React のチップ（ChipListComponent）コンポーネントは、入力、属性、アクションを表す、コンパクトでインタラクティブな要素を表示します。単一選択／複数選択、削除、ドラッグ＆ドロップ、アバター、アイコン、テンプレート、豊富なスタイル設定に対応しています。

ナビゲーションガイド

はじめに

📄 参照: references/getting-started.md

• インストールとパッケージの設定（@syncfusion/ej2-react-buttons）
• CSS／テーマのインポート
• 基本的なチップまたはチップリストの表示
• 単一チップと ChipsDirective／ChipDirective を使用したチップリスト
• アプリケーションの実行

タイプと選択

📄 参照: references/types-and-selection.md

• 4 種類のチップ：入力、選択、フィルター、アクション
• 単一選択（selection="Single"）— 選択チップ
• 複数選択（selection="Multiple"）— フィルターチップ
• 削除可能なチップ（enableDelete）
• selectedChips によるチップの事前選択
• アクションチップのクリックイベント（onClick）

カスタマイズ

📄 参照: references/customization.md

• 定義済みスタイル：e-primary、e-success、e-info、e-warning、e-danger
• 先頭のアイコン（leadingIconCss、leadingIconUrl）
• アバター画像（avatarIconCss）とアバターのテキスト（avatarText）
• 末尾のアイコン（trailingIconCss、trailingIconUrl）
• アウトラインチップ（cssClass="e-outline"）
• カスタムチップテンプレート（template プロパティ）
• カスタム HTML 属性用の htmlAttributes

ドラッグ＆ドロップ

📄 参照: references/drag-and-drop.md

• ドラッグ＆ドロップの有効化（allowDragAndDrop）
• ドラッグ領域の制限（dragArea）
• ドラッグイベント：dragStart、dragging、dragStop
• コンテナー間のドラッグ＆ドロップ

スタイルのカスタマイズ

📄 参照： references/style.md

• チップのテキスト、アイコン、削除ボタンの CSS オーバーライド
• アウトラインチップの枠線スタイル
• 選択したチップの背景色と文字色
• アバターテキストの背景スタイル
• チップの高さ／サイズのカスタマイズ

アクセシビリティ

📄 参照： references/accessibility.md

• WCAG 2.2、Section 508、ADA への準拠
• WAI-ARIA 属性（role、aria-selected、aria-disabled など）
• キーボードナビゲーションのショートカット
• RTL 対応、スクリーンリーダー対応

API リファレンス

📄 参照： references/api.md

• すべてのプロパティ：text、chips、selection、enableDelete、cssClass、selectedChips、enabled、enableRtl、enablePersistence、allowDragAndDrop、dragArea、htmlAttributes、leadingIconCss、leadingIconUrl、avatarIconCss、avatarText、trailingIconCss、trailingIconUrl
• メソッド：add()、remove()、find()、getSelectedChips()、select()、destroy()
• イベント：click、beforeClick、created、delete、deleted、dragStart、dragging、dragStop

クイックスタート

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

enableRipple(true);

function App() {
  return (
    <ChipListComponent id="chip-list">
      <ChipsDirective>
        <ChipDirective text="Angular" />
        <ChipDirective text="React" />
        <ChipDirective text="Vue" />
      </ChipsDirective>
    </ChipListComponent>
  );
}
export default App;

CSS（App.css）：

@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-react-buttons/styles/tailwind3.css';

よくあるパターン

フィルターチップ（複数選択）

<ChipListComponent selection="Multiple">
  <ChipsDirective>
    <ChipDirective text="React" />
    <ChipDirective text="Angular" />
    <ChipDirective text="Vue" />
  </ChipsDirective>
</ChipListComponent>

イベント付きの削除可能なチップ

<ChipListComponent enableDelete={true} delete={(e) => console.log('Deleting:', e.text)}>
  <ChipsDirective>
    <ChipDirective text="Tag One" />
    <ChipDirective text="Tag Two" />
  </ChipsDirective>
</ChipListComponent>

アバターのイニシャル付きチップ

<ChipListComponent>
  <ChipsDirective>
    <ChipDirective text="Andrew" avatarText="A" />
    <ChipDirective text="Laura" avatarText="L" />
  </ChipsDirective>
</ChipListComponent>

プログラムによる操作（ref 経由でチップを追加／削除）

const chipRef = React.useRef<ChipListComponent>(null);

// Add a chip
chipRef.current?.add('New Tag');

// Remove chip at index 0
chipRef.current?.remove([0]);

// Get selected
const selected = chipRef.current?.getSelectedChips();