syncfusion-angular-buttons

Syncfusion Angular Buttons の実装

Button

Syncfusion Angular Button は、ejs-button ディレクティブでレンダリングされるグラフィカルユーザーインターフェイス要素です。クリック時にアクションを実行し、テキスト、アイコン、またはその両方に対応しています。また、幅広いスタイル設定、アクセシビリティ、動作に関するオプションを備えています。

ナビゲーションガイド

はじめに

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

• 前提条件とパッケージの依存関係
• 新しい Angular アプリケーションのセットアップ（スタンドアロンアーキテクチャ）
• ng add を使用した @syncfusion/ej2-angular-buttons のインストール
• Material およびその他のテーマ用の CSS／テーマのインポート
• 最初の ejs-button ディレクティブのレンダリング
• cssClass を使用したボタンタイプの変更

タイプとスタイル

📄 参照: 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）と標準

実装パターン

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

• e-block を使用したブロック（全幅）ボタンの作成
• カスタム CSS を使用した角丸ボタンの作成
• ボタン内へのナビゲーションリンクの追加
• カスタム CSS クラスによるボタンの外観のカスタマイズ
• ネイティブの <input> 要素と <a> 要素をボタンとしてスタイル設定
• [disabled]="true" による無効状態の設定
• [enableRtl]="true" による右から左（RTL）サポートの有効化
• created イベントを使用したホバー時のツールチップの追加
• マウスイベントとタッチイベントを使用した連続実行ボタンの実装

アクセシビリティ

📄 参照: references/button-accessibility.md

• WCAG 2.2 と Section 508 への準拠に関する詳細
• WAI-ARIA 属性（アイコンのみのボタン向けの aria-label）
• キーボード操作：Space キーの動作
• スクリーンリーダーのサポートと自動テストツール

EJ1 からの移行

📄 参照: references/button-ej1-migration.md

• EJ1 から EJ2 へのプロパティの対応付け（例：text → content、prefixIcon → iconCss）
• メソッドおよびイベントの対応項目
• EJ2 で利用できないプロパティ

API リファレンス

📄 参照: references/button-api.md

• 型、デフォルト値、コードサンプルを含むすべてのプロパティ
• メソッド：click()、focusIn()、destroy()
• イベント：created

---

クイックスタート

ng add @syncfusion/ej2-angular-buttons

// 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 以降の注意: CLI は src/app/app.ts、app.html、app.css を生成します（.component. のサフィックスは付きません）。Angular 19 以前では、ファイル名は app.component.ts です。

---

よくあるパターン

色付きボタン

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

アイコンボタン

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

トグルボタン

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

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

無効化されたボタン

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

ブロック（全幅）ボタン

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

---

ButtonGroup

Syncfusion Angular ButtonGroup は、複数のボタンをひとまとまりの UI 要素にまとめる CSS のみのコンポーネントです。水平および垂直のレイアウト、ラジオボタン／チェックボックス形式の選択動作、アウトラインとカラーのスタイル、アイコンボタン、ネストされた分割ボタン／ドロップダウンボタン、RTL、フォームとの統合、完全なアクセシビリティへの準拠をサポートしています。

パッケージ: @syncfusion/ej2-angular-buttons コンテナクラス: .e-btn-group ボタンディレクティブ: ejs-button（ButtonModule から）

---

ナビゲーションガイド

はじめに

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

• ng add を使用した @syncfusion/ej2-angular-buttons のインストール
• スタンドアロンコンポーネントの imports[] への ButtonModule のインポート
• Material テーマ用 CSS テーマのインポート
• ejs-button を使用した基本的な水平 ButtonGroup
• e-vertical クラスによる垂直方向の配置

種類とスタイル

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

• アウトライン ButtonGroup（コンテナーと各ボタンに e-outline を指定）
• cssClass によるカラーのスタイル：e-primary、e-success、e-info、e-warning、e-danger
• e-round-corner による角丸
• iconCss プロパティを使用したアイコンボタン

選択（ラジオボタンとチェックボックス）

📄 参照： references/buttongroup-selection.md

• <input type="radio"> と <label class="e-btn"> を使用した単一選択（ラジオタイプ）
• <input type="checkbox"> と <label class="e-btn"> を使用した複数選択（チェックボックスタイプ）
• checked 属性を使用して初期レンダリング時に選択済みの状態を表示
• グループ内に DropDownButton または SplitButton をネスト

手順別レシピ

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

• 個別のボタンまたはグループ全体を無効化
• リップル効果を有効化
• RTL（右から左）レイアウト
• ラジオボタン／チェックボックスのボタングループを使用したフォーム送信
• createButtonGroup ユーティリティを使用したプログラムによる初期化

アクセシビリティ

📄 参照： references/buttongroup-accessibility.md

• WCAG 2.2／Section 508 への準拠
• キーボード操作のショートカット（通常、チェックボックス、ラジオボタンの動作）
• スクリーンリーダーの利用ガイド

---

クイックスタート

1. パッケージをインストールします：

ng add @syncfusion/ej2-angular-buttons

2. 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. 基本的な ButtonGroup を作成します：

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 { }

---

よくあるパターン

垂直方向の ButtonGroup

コンテナーに e-vertical を追加すると、ボタンが上から下へ並びます：

<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 のネストをサポートしません。

アウトラインスタイル

コンテナーに e-outline を追加し、各ボタンに cssClass='e-outline' を指定します：

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

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

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

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

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

---

選択の指針

ユーザーのニーズ	方法
アクションボタンを視覚的にグループ化する	ejs-button を使った基本的な e-btn-group
一度に1つのオプションのみ選択可能にする	ラジオタイプ（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

Syncfusion Angular DropDownButton は、ejs-dropdownbutton ディレクティブで描画されるグラフィカルな UI 要素です。クリックするとアクション項目のポップアップメニューを開くボタンを表示します。アイコン、カスタムテンプレート、アニメーション、ナビゲーションリンク、アクセシビリティ、RTL、動的な項目管理に対応しています。

---

ナビゲーションガイド

はじめに

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

• 前提条件とパッケージの依存関係
• 新しい Angular アプリケーションの設定（スタンドアロンアーキテクチャ）
• ng add による @syncfusion/ej2-angular-splitbuttons のインストール
• Material およびその他のテーマの CSS／テーマのインポート
• 最初の ejs-dropdownbutton ディレクティブの描画
• アクション項目 ItemModel[] の定義

アイコンと外観

📄 参照： references/dropdownbutton-icons-and-appearance.md

• iconCss と iconPosition（Left、Top）によるボタンアイコンの設定
• e-vertical cssClass を使用した垂直方向のボタンレイアウト
• e-caret-hide cssClass を使用したアイコンのみのボタン
• ボタンアイコンとしてのスプライト画像
• ドロップダウン矢印を非表示にする
• 角丸のスタイル設定
• アイコンのサイズとボタンの幅のカスタマイズ
• キャレット／ドロップダウン矢印アイコンの動的な変更

ポップアップ項目とテンプレート

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

• iconCss によるポップアップのアクション項目へのアイコン設定
• 項目の url プロパティによるナビゲーションリンク
• separator: true による区切り項目
• beforeItemRender イベントによる項目単位のテンプレート設定
• target プロパティによるポップアップ全体のテンプレート設定
• カスタム項目のレンダリングに使う itemTemplate プロパティ
• ポップアップのターゲットに ListView を使用した項目のグループ化
• 項目テキスト内の文字への下線の設定

イベントとインタラクティブ機能

📄 参照： references/dropdownbutton-events.md

• select — 項目選択の処理
• open / close — ポップアップを開く／閉じるときのコールバック
• beforeOpen / beforeClose — 開く／閉じる前のキャンセルまたはカスタマイズ
• beforeItemRender — レンダリング中に各項目をカスタマイズ
• created — コンポーネントの初期化時のコールバック
• ポップアップ項目のクリック時にダイアログを開く
• open イベントによるポップアップの表示位置の変更

アニメーション

📄 参照： references/dropdownbutton-animation.md

• animationSettings プロパティの概要
• 対応エフェクト：None、SlideDown、ZoomIn、FadeIn
• duration と easing の設定

設定と動作

📄 参照： references/dropdownbutton-configuration.md

• disabled による DropDownButton の無効化
• enableRtl による RTL サポート
• ポップアップのサイズを統一する popupWidth
• ポップアップの作成を遅延させる createPopupOnClick
• 安全な HTML レンダリングのための enableHtmlSanitizer
• ポップアップを閉じるトリガーをカスタマイズする closeActionEvents
• 状態を保持する enablePersistence
• 項目の動的な管理：addItems、removeItems、toggle

API リファレンス

📄 参照： references/dropdownbutton-api.md

• すべてのプロパティとその型、既定値、説明
• すべてのイベントと引数の型
• すべてのメソッドとパラメーター、戻り値の型
• ItemModel インターフェースのフィールド
• 関連インターフェース：BeforeOpenCloseMenuEventArgs、MenuEventArgs、OpenCloseMenuEventArgs

アクセシビリティ

📄 参照： references/dropdownbutton-accessibility.md

• WCAG 2.2 / Section 508 への準拠
• WAI-ARIA 属性とロール
• キーボードナビゲーションのショートカット
• スクリーンリーダーのサポート
• RTL サポート

---

クイックスタート

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);
  }
}

---

よく使われるパターン

区切りグループを含むポップアップ

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

アイコンのみのボタン（テキストなし、キャレットなし）

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

上部にアイコンを配置した縦方向のレイアウト

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

RTL レイアウト

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

カスタムポップアップ幅

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

ナビゲーション項目

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

---

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

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

パッケージ： @syncfusion/ej2-angular-buttons モジュール： FabModule セレクター： ejs-fab

---

ナビゲーションガイド

はじめに

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

• ng add による @syncfusion/ej2-angular-buttons のインストール
• Material テーマ用の CSS テーマのインポート
• スタンドアロンコンポーネントへの FabModule のインポート
• 最小限の ejs-fab の設定
• target を使用した、FAB を適用するコンテナーの指定
• (click) イベントの処理

アイコンとコンテンツ

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

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

位置

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

• 9 種類の定義済み値（TopLeft → BottomRight）を指定する position プロパティ
• FAB をコンテナー要素に限定する target プロパティ
• cssClass を使用したカスタム CSS による位置指定
• target のサイズ変更後に refreshPosition() を呼び出す方法

スタイルと外観

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

• 定義済みの cssClass 値：e-primary、e-outline、e-info、e-success、e-warning、e-danger
• CSS クラスのオーバーライド用リファレンステーブル（.e-fab.e-btn、ホバー、フォーカス、アクティブ、アイコン）
• CSS トランジションを使用してホバー時にテキストを表示する方法
• アウトラインの色のカスタマイズ

イベント

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

• 描画後の初期化に使用する (created) イベント
• クリック処理に使用する (click) イベント

アクセシビリティ

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

• WCAG 2.2／Section 508 準拠の概要
• WAI-ARIA 属性（aria-label）
• キーボード操作（Space キー）
• 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、click

---

クイックスタート

ng add @syncfusion/ej2-angular-buttons

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

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 { }

---

よく使われるパターン

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

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

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

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 { }

---

主要なプロパティ一覧

プロパティ	型	デフォルト	用途
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 Angular Speed Dial コンポーネントは、展開すると一連のアクション項目を表示するフローティングアクションボタンを描画します。ejs-speeddial ディレクティブを基盤とし、リニアおよびラジアル表示モード、柔軟な位置指定、アニメーション、モーダルオーバーレイ、カスタムテンプレート、完全なアクセシビリティ対応をサポートします。

---

ナビゲーションガイド

はじめに

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

• 前提条件とパッケージの依存関係
• ng add を使用した @syncfusion/ej2-angular-buttons のインストール
• CSS／テーマのインポート
• items を指定して最初の ejs-speeddial ディレクティブを描画する方法
• スタンドアロンと NgModule のアーキテクチャ

項目とアニメーション

📄 参照： references/speeddial-items-and-animation.md

• アクション項目の設定（SpeedDialItemModel：text、iconCss、id、title、disabled）
• アイコンのみ、テキストのみ、アイコンとテキストを組み合わせた項目の種類
• 個別の項目を無効にする方法
• 開閉アニメーションの設定（animation、SpeedDialAnimationSettingsModel）
• サポートされているアニメーション効果（Fade、Zoom など）

表示モード

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

• リニアモード：direction（Up、Down、Left、Right、Auto）を指定するリスト形式の表示
• ラジアルモード：mode='Radial' を使用した円形の配置
• ラジアル設定（radialSettings：direction、startAngle、endAngle、offset）の構成
• ユースケースに応じたモードの選択

位置と表示状態

📄 参照： references/speeddial-position-and-visibility.md

• 9 種類すべての position 値（TopLeft → BottomRight）
• target を使用して、コンテナー内に Speed Dial を配置
• opensOnHover によるホバー時の項目の表示
• show() および hide() メソッドによるプログラムからの表示／非表示
• refreshPosition() を使用したボタン位置の更新
• visible プロパティによる表示状態の制御

スタイルと外観

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

• ボタンアイコンのカスタマイズ：openIconCss、closeIconCss、content
• cssClass による定義済み CSS スタイル（e-primary、e-success、e-warning など）
• disabled によるコンポーネントの有効化／無効化
• visible による表示状態の制御
• opensOnHover によるホバー時の表示動作
• title フィールドによる項目のツールチップ
• カスタム CSS クラスの使用

テンプレート

📄 参照： references/speeddial-templates.md

• itemTemplate および <ng-template #itemTemplate> を使用した項目テンプレート
• popupTemplate および <ng-template #popupTemplate> を使用したポップアップテンプレート
• テンプレートのコンテキストとバインディング

イベント

📄 参照： references/speeddial-events.md

• clicked — アクション項目がクリックされた（SpeedDialItemEventArgs）
• created — コンポーネントがレンダリングされた
• beforeOpen / onOpen — ポップアップを開くときのライフサイクル
• beforeClose / onClose — ポップアップを閉じるときのライフサイクル
• beforeItemRender — 各項目がレンダリングされた

アクセシビリティ

📄 参照： references/speeddial-accessibility.md

• WCAG 2.2 および Section 508 に準拠
• WAI-ARIA 属性（role、aria-label、aria-expanded など）
• キーボードショートカット（Enter、矢印キー、Esc、Home、End）
• スクリーンリーダーおよび RTL のサポート

API リファレンス

📄 参照： references/speeddial-api.md

• 型と既定値を含む、すべてのコンポーネントプロパティ
• すべてのメソッド：show()、hide()、refreshPosition()
• 引数の型を含む、すべてのイベント
• SpeedDialItemModel のフィールド
• SpeedDialAnimationSettingsModel のフィールド
• RadialSettingsModel のフィールド

---

クイックスタート

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

---

よくあるパターン

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

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

ラジアルメニュー

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

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

モーダルオーバーレイ

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

プログラムによる表示／非表示

@ViewChild('speeddial') speeddialObj: SpeedDialComponent;

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

ProgressButton

Syncfusion Angular の ProgressButton（ejs-progressbutton）は、標準のボタンに進行状況の表示機能（スピナーや背景のフィラー UI）を組み込んだコンポーネントです。非同期処理、フォーム送信、または待ち時間を認識できるあらゆる操作に適しています。

ナビゲーションガイド

タスク	参照ファイル
インストールと基本設定	📄 references/getting-started.md
スピナーの設定と進行状況のアニメーション	📄 references/spinner-and-progress.md
実装例（スピナーの非表示、cssClass、イベント、テキスト／スタイルの変更）	📄 references/how-to.md
アクセシビリティとキーボード操作	📄 references/accessibility.md
API 全般 — プロパティ、メソッド、イベント、インターフェイス	📄 references/api.md

クイックスタート

# Install the package
ng add @syncfusion/ej2-angular-splitbuttons

// 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 {}

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

よくあるパターン

右側にスピナーを表示

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

背景フィラーとアニメーション

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

ライフサイクルイベントの処理

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

プログラムによる制御

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

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

Switch

オン／オフの二値入力に対応する軽量なトグルコンポーネント（ejs-switch）です。チェック状態、ラベル、無効化、サイズ変更、双方向バインディング、フォーム連携、カスタムスタイル、イベント、WCAG 2.2 への完全なアクセシビリティに対応しています。

ナビゲーションガイド

はじめに

📄 読む： references/getting-started.md

• ng add @syncfusion/ej2-angular-buttons によるインストール
• スタンドアロンコンポーネントと NgModule のセットアップ
• checked 状態を使った基本的な Switch
• CSS／SCSS テーマのインポート
• onLabel と offLabel のテキスト設定

Switch の機能

📄 読む： references/switch-features.md

• 無効状態（disabled プロパティ）
• サイズのバリエーション — デフォルトと小（cssClass: 'e-small'）
• RTL 対応（enableRtl）
• ngModel による双方向データバインディング
• toggle() メソッドによるプログラムからの切り替え
• ページ再読み込み後も状態を保持（enablePersistence）

イベントと状態の制御

📄 読む： references/events-and-state.md

• change イベント — ユーザー操作による状態の切り替えに応答します
• beforeChange イベント — 状態変更を捕捉してキャンセルします
• created イベント — コンポーネントの描画後に処理を実行します
• ネイティブメソッドの click() と focusIn()

フォーム連携

📄 読む： references/form-integration.md

• フォーム POST 用の name 属性と value 属性
• ルール：無効または未チェックの値は送信されません
• ngModel によるテンプレート駆動型の双方向バインディング
• フォーム内で name によって Switch をグループ化

カスタマイズ

📄 読む： references/customization.md

• カスタムスタイル用の cssClass
• バー／ハンドルの形状変更（CSS で角を四角くします）
• オン／オフ状態に合わせたバーの色のカスタマイズ
• Switch ラベルのリップル効果を有効化
• htmlAttributes による追加の HTML 属性

アクセシビリティ

📄 読む： references/accessibility.md

• WCAG 2.2／Section 508／ADA に準拠
• WAI-ARIA：role="switch"、aria-disabled
• キーボードナビゲーション（Space キーで切り替え）
• スクリーンリーダー対応と RTL アクセシビリティ

API リファレンス

📄 読む： references/api.md

• すべてのプロパティ、メソッド、イベントの型とデフォルト値
• BeforeChangeEventArgs と ChangeEventArgs インターフェイス

---

クイックスタート

ng add @syncfusion/ej2-angular-buttons

// 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);
  }
}

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

---

よく使われるパターン

デフォルトでチェック済みにする

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

ON／OFF ラベル付き

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

Material テーマではラベルは表示されません。長いカスタムテキストは避けてください。

小さいサイズ

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

無効化

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

双方向バインディング

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

条件に応じて状態変更を防止する

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

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

プログラムから切り替える

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

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

RadioButton

Syncfusion Angular RadioButton（ejs-radiobutton）は、グループから1つだけ選択できるフォーム入力コンポーネントです。ラベル、サイズのバリエーション、双方向バインディング、フォーム連携、アクセシビリティ、幅広いカスタマイズに対応しています。

ナビゲーションガイド

はじめに

📄 読む： references/getting-started.md

• Angular 19+/21 のスタンドアロンセットアップ
• ng add によるパッケージのインストール
• CSS／SCSS テーマのインポート
• RadioButton の最小限の例
• アプリケーションの実行

ラベル、サイズ、状態

📄 読む： references/label-size-states.md

• label と labelPosition（Before／After）
• サイズのバリエーション：デフォルトと小（e-small）
• checked 状態と未チェック状態
• disabled 状態
• enablePersistence

フォームとデータバインディング

📄 読む： references/forms-and-binding.md

• ラジオボタンのグループ化に使用する name 属性
• フォーム送信に使用する value 属性
• フォーム送信時に送信される値
• [(ngModel)] による双方向バインディング
• RadioButton グループと DropDownList のバインディング

カスタマイズと高度な機能

📄 参照： references/customization-and-advanced.md

• カスタム CSS クラスと外観スタイル
• 右から左へのレイアウト（enableRtl）
• ARIA 属性とデータ属性用の htmlAttributes
• enableHtmlSanitizer と locale
• メソッド：getSelectedValue()、click()、focusIn()、destroy()

アクセシビリティ

📄 参照： references/accessibility.md

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

API リファレンス

📄 参照： references/api.md

• 型、既定値、使用例を含むすべてのプロパティ
• シグネチャを含むすべてのメソッド
• イベントと ChangeArgs インターフェイス

---

クイックスタート

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 属性を設定してください。これにより、相互排他的な選択が保証されます。

---

よく使われるパターン

選択の変更を検出する

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

ngModel による双方向バインディング

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

小さいサイズのバリエーション

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

無効化された RadioButton

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

---

主なプロパティ一覧

プロパティ	型	既定値	用途
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

Angular アプリケーションで Syncfusion Essential JS 2 SplitButton コンポーネントを実装するための包括的なガイドです。ドロップダウンメニュー付きの SplitButton の作成、項目の管理、イベント処理、スタイルのカスタマイズ、フォームとの連携方法を説明します。

SplitButton の概要

Syncfusion Angular SplitButton コンポーネントは、メインボタンとドロップダウンメニューを組み合わせた多機能な UI コントロールです。

• 2 つのアクションを備えた設計： メインアクションボタンと複数のオプションを含むドロップダウンメニュー
• 項目管理： テキスト、アイコン、区切り線、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

ドキュメントの案内

ニーズに応じて、以下のリファレンスを参照してください。

はじめに

📄 参照： references/getting-started.md

• パッケージのインストールとモジュールの設定
• CSS テーマのインポートと依存関係
• SplitButton の基本的な実装
• 項目を使用したコンポーネントの初期化
• イベントハンドラーの設定
• セットアップの実行とテスト

ボタン項目の設定

📄 参照： references/button-items-configuration.md

• ItemModel インターフェイスとプロパティ
• テキストとアイコンの設定
• URL ナビゲーションと外部リンク
• 項目間の区切り線
• 項目の有効・無効状態
• 動的な項目管理
• 項目クリックイベントの処理

イベントとメソッド

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

• click イベント（メインボタンのアクション）
• select イベント（ドロップダウンからの項目選択）
• open イベント（ドロップダウンが開く）
• close イベント（ドロップダウンが閉じる）
• beforeOpen イベント（ドロップダウンが開く前）
• メソッド：toggle()、addItems()、removeItems()、focusIn()
• ViewChild のアクセスパターン
• イベント引数の型と処理

スタイル設定とカスタマイズ

📄 参照： references/styling-and-customization.md

• CSS クラスのカスタマイズ（.e-split-button、.e-dropdown-popup）
• アイコンの設定（iconCss、prefix、suffix プロパティ）
• アイコンの配置（left、right、top、bottom）
• テーマの選択（Material、Bootstrap、Fabric、Tailwind）
• ダークモードの実装
• RTL（右から左）サポート
• カスタム CSS による上書きとサイズ設定

テンプレートとアイコン

📄 参照： references/templates-and-icons.md

• アイコンフォントライブラリ（Material Design、Bootstrap、Font Awesome）
• アイコンの配置とサイズ設定
• HTML コンテンツを含む項目テンプレート
• 画像アイコンとカスタムグラフィック
• リッチなスタイル設定のためのコンテンツテンプレート
• 複数のアイコンの組み合わせ
• アイコンの配置と間隔

ポップアップの動作とターゲットのカスタマイズ

📄 参照： references/popup-positioning.md

• デフォルトのポップアップ動作（ボタンの下に自動的に開きます）
• popupWidth プロパティ — ポップアップの固定幅
• target プロパティ — カスタムポップアップコンテンツ（カラーピッカー、ListView など）
• createPopupOnClick — ポップアップの作成を遅延
• closeActionEvents — カスタムの閉じるトリガー
• ListView をターゲットにしたグループ化された項目
• エッジケース：固定ツールバー、モーダルダイアログ、スクロール可能なコンテナー

アクセシビリティと多言語対応

📄 参照： references/accessibility-and-globalization.md

• WCAG 2.2 および Section 508 への準拠
• ARIA のロールと属性（role="button"、aria-haspopup、aria-expanded）
• キーボード操作（Tab、Enter、Escape、矢印キー）
• スクリーンリーダーとの互換性と通知
• RTL（右から左）レイアウトのサポート
• ローカライズと locale プロパティの使用
• 言語固有の書式設定と翻訳

リアクティブフォームとの統合

📄 参照： references/reactive-forms-integration.md

• SplitButton と FormControl の統合
• FormGroup とフォームのバインド
• 検証ルールとエラー状態
• フォーム状態の変更とサブスクリプション
• プログラムによる制御と更新
• リセットと送信のパターン
• 無効状態の管理

API リファレンス

📄 参照： 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

クイックスタートの例

// 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);
  }
}

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

/* 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;
}

よく使われるパターン

パターン 1：アイコン付きアクションメニュー

アイコンを豊富に使ったドロップダウンメニューを備える分割ボタンが必要な場合：

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
  }
}

パターン 2：条件に応じた項目の有効化／無効化

アプリケーションの状態に応じてメニュー項目を有効または無効にする必要がある場合：

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);
    }
  }
}

パターン 3：項目の動的な管理

実行時に項目を追加または削除する必要がある場合：

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 = [];
  }
}

パターン 4：URL を使った項目のナビゲーション

メニュー項目から異なる URL に移動する場合に使用します。注：ItemModel がサポートするのは url のみです。リンクを開くターゲット（_blank、_self）は (select) で処理する必要があります。

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

パターン 5：ポップアップの幅とターゲットのカスタマイズ

ポップアップの幅を固定する場合、または完全にカスタマイズしたポップアップ要素を使用する場合に使用します。

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

主要な Props のリファレンス

Prop	Type	Description	Example
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()"

⚠️ 注： position、title、および open()／close() メソッドは、公式 API には存在しません。プログラムから開閉するには toggle() を使用してください。公式 API の詳細については、references/api-reference.md を参照してください。

一般的な使用例

使用例 1：ドキュメントツールバー

• メインアクション（保存）、［名前を付けて保存］、［エクスポート］、［印刷］を含むドロップダウン
• 視認性を高めるアイコン
• 変更がない場合は［保存］を無効化
• 解決策：iconCss と動的な無効状態を組み合わせます
• 参考：ボタン項目の設定 + スタイル設定とカスタマイズ

使用例 2：フォームアクションメニュー

• メインボタン（送信）、［下書きを保存］、［スケジュール］、［削除］を含むドロップダウン
• フォームの状態に応じてオプションを無効化
• アクションごとに異なる処理を行います
• 解決策：項目を追跡しながら select イベントを使用します
• 参考：イベントとメソッド + リアクティブフォームとの統合

使用例 3：ナビゲーションメニュー

• メインアクション（ダッシュボード）、その他のページを含むドロップダウン
• ドキュメントやサポートへの外部リンク
• 国際対応アプリ向けの RTL サポート
• 解決策：url プロパティと target 属性を使用します
• 参考：ボタン項目の設定 + アクセシビリティとグローバル化

使用例 4：設定パネル

• キーボード操作に対応したアクセシブルなスプリットボタン
• スクリーンリーダーに対応
• WCAG 2.2 に準拠
• 解決策：適切な ARIA 属性とキーボードハンドラーを使用します
• 参考：アクセシビリティとグローバル化

使用例 5：レスポンシブツールバー

• 位置を動的に調整するスプリットボタン
• 小さな画面に対応したレスポンシブなポップアップ
• タッチ操作に適した間隔
• 解決策：動的な位置指定とレスポンシブ CSS を使用します
• 参考：ポップアップの位置指定 + スタイル設定とカスタマイズ

チップ

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

ナビゲーションガイド

はじめに

📄 参照: references/getting-started.md

• インストールとパッケージの設定（@syncfusion/ej2-angular-buttons）
• CSS／テーマのインポート
• 基本的なチップまたはチップリストの描画
• e-chips／e-chip を使った単一チップとチップリスト
• アプリケーションの実行

種類と選択

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

• 4 種類のチップ：入力、選択、フィルター、アクション
• 単一選択（selection="Single"）— 選択チップ
• 複数選択（selection="Multiple"）— フィルターチップ
• 削除可能なチップ（[enableDelete]="true"）
• [selectedChips] を使ったチップの事前選択
• アクションチップ用のクリックイベント（(click)）

カスタマイズ

📄 参照: 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]="true"）
• ドラッグ領域の制限（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 { Component } from '@angular/core';
import { ChipListModule } from '@syncfusion/ej2-angular-buttons';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ChipListModule],
  template: `
    <ejs-chiplist id="chip-list">
      <e-chips>
        <e-chip text="Angular"></e-chip>
        <e-chip text="Vue"></e-chip>
        <e-chip text="Svelte"></e-chip>
      </e-chips>
    </ejs-chiplist>
  `
})
export class AppComponent {}

CSS（src/styles.css）：

@import '~@syncfusion/ej2-base/styles/tailwind3.css';
@import '~@syncfusion/ej2-angular-buttons/styles/tailwind3.css';

よく使われるパターン

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

<ejs-chiplist selection="Multiple">
  <e-chips>
    <e-chip text="Angular"></e-chip>
    <e-chip text="Vue"></e-chip>
    <e-chip text="Svelte"></e-chip>
  </e-chips>
</ejs-chiplist>

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

<ejs-chiplist [enableDelete]="true" (delete)="onChipDelete($event)">
  <e-chips>
    <e-chip text="Tag One"></e-chip>
    <e-chip text="Tag Two"></e-chip>
  </e-chips>
</ejs-chiplist>

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

<ejs-chiplist>
  <e-chips>
    <e-chip text="Andrew" avatarText="A"></e-chip>
    <e-chip text="Laura" avatarText="L"></e-chip>
  </e-chips>
</ejs-chiplist>

プログラムによる制御（ViewChild 経由でチップを追加／削除）

import { Component, ViewChild } from '@angular/core';
import { ChipListComponent, ChipListModule } from '@syncfusion/ej2-angular-buttons';

@Component({
  selector: 'app-chip-demo',
  standalone: true,
  imports: [ChipListModule],
  template: `
    <ejs-chiplist #chipList id="chip-list">
      <e-chips>
        <e-chip text="Angular"></e-chip>
        <e-chip text="Vue"></e-chip>
      </e-chips>
    </ejs-chiplist>
  `
})
export class ChipDemoComponent {
  @ViewChild('chipList') chipList?: ChipListComponent;

  addChip() {
    this.chipList?.add('New Tag');
  }

  removeFirstChip() {
    this.chipList?.remove([0]);
  }

  getSelected() {
    const selected = this.chipList?.getSelectedChips();
    console.log(selected);
  }
}