syncfusion-angular-accordion

Syncfusion Angular Accordion コンポーネントの実装

このスキルを使用する場面

次のような場合に、このスキルを使用します。

• 折りたたみ可能なコンテンツパネルを作成する - 関連するコンテンツを、スペースを節約するために折りたためる展開可能なセクションに整理します
• ステップ形式のウィザードを構築する - ユーザーがアコーディオン項目を順に進む複数ステップのフォームやワークフローを作成します
• FAQ セクションを実装する - よくある質問と、展開して表示する回答を提示します
• ナビゲーションメニューを作成する - 入れ子になった展開可能な項目を含む階層型メニューやナビゲーション構造を構築します
• コンテンツを動的に読み込む - ユーザーがアコーディオン項目を展開したときに、必要に応じてコンテンツを取得して表示します
• カスタムアニメーションを追加する - 滑らかな展開・折りたたみのトランジションでユーザーエクスペリエンスを向上させます
• 複雑なデータを整理する - 展開可能なカテゴリやサブカテゴリを使って、構造化データを表示します

コンポーネントの概要

Syncfusion Angular Accordion コンポーネントは、ユーザーが一度に 1 つまたは複数のセクションを展開できる、縦方向に折りたたみ可能なコンテンツパネルを表示します。主な機能は次のとおりです。

• 単一／複数の展開モード - 複数の項目を同時に開けるかどうかを制御します
• データバインディング - 配列または OData サービスからアコーディオン項目をバインドします
• 項目の動的管理 - 実行時に項目を追加、削除、更新します
• イベント処理 - 展開、折りたたみ、クリックの各イベントに応答します
• カスタムアニメーション - カスタム効果と継続時間で滑らかなトランジションを設定します
• ネストされたアコーディオン - 複雑なナビゲーションのために階層型のアコーディオン構造を作成します
• TreeView との統合 - TreeView などの他のコンポーネントを埋め込んで、高度なナビゲーションを実現します
• コンテンツプロジェクション - Angular の ng-content を使用して、再利用可能なコンテンツコンポーネントを作成します

ドキュメントの目次

ドキュメント内のクイックナビゲーション：

1. はじめに - インストール、セットアップ、基本的な初期化
2. 展開モード - 単一と複数の展開モード、設定
3. データバインディング - データソース、OData、REST API、更新方法
4. 動的な読み込みとインタラクション - イベント、メソッド、項目の動的管理
5. 高度な機能 - アニメーション、ネストされたアコーディオン、スタイル設定、RTL
6. ユースケースとパターン - 実際の実装例とパターン

ドキュメントとナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

次のような場合に参照してください。

• 最初の Accordion コンポーネントをセットアップする
• 必要なパッケージと依存関係をインストールする
• CSS のインポートとテーマ設定について理解する
• 基本的な初期化方法（テンプレートベース、items 配列、HTML 要素）を学ぶ
• 最初に動作する例を作成する

展開モード

📄 参照： references/expand-modes.md

次のような場合に参照してください。

• ユーザーが 1 つまたは複数の項目を展開できるようにするかを決める
• 単一モード（常に 1 つの項目だけを開く）を設定する
• 複数モードを使用して複数の項目を同時に開く
• ユースケースに適したモードを選択する
• 大規模なデータセットでのパフォーマンスに対応する

データバインディング

📄 参照： references/data-binding.md

次のような場合に参照してください。

• 外部ソースからアコーディオンのデータをバインドする
• DataManager を使用して OData サービスからデータを取得する
• データプロパティをヘッダーとコンテンツにマッピングする
• 構造化データの配列を扱う
• データ更新後にアコーディオンのコンテンツを更新する

動的な読み込みと操作

📄 参照先： references/dynamic-loading-and-interactions.md

使用する場面：

• 実行時に項目を動的に追加する
• 展開／折りたたみ／クリックのイベントを処理する
• AJAX やリモートリクエストでコンテンツを読み込む
• チェックボックスで制御する展開機能を実装する
• 項目の折りたたみを防止する、または項目を開いたままにする
• 再利用可能なコンテンツコンポーネントに ng-content を使用する
• 常に開いた状態のアコーディオン項目を作成する

高度な機能

📄 参照先： references/advanced-features.md

使用する場面：

• エフェクトやイージングを使って、展開／折りたたみアニメーションをカスタマイズする
• 階層構造用のネストされたアコーディオンを作成する
• アコーディオン項目内に TreeView コンポーネントを統合する
• カスタム CSS スタイルとテーマを適用する
• RTL（右から左）サポートを有効にする
• ヘッダー、項目、展開／折りたたみアイコンのスタイルを設定する

ユースケースとパターン

📄 参照先： references/use-cases-patterns.md

使用する場面：

• ベストプラクティスに沿って FAQ セクションを構築する
• バリデーション付きの複数ステップのウィザードフォームを作成する
• カテゴリー別の設定パネルを設計する
• ナビゲーションメニューや組織階層を構築する
• ヘルプやドキュメントのセクションを表示する
• 実際のパターンとコード構成の戦略を学ぶ

クイックスタートの例

3 つの項目を含む基本的なテンプレートベースのアコーディオン：

import { Component } from '@angular/core';
import { AccordionModule } from '@syncfusion/ej2-angular-navigations';

@Component({
  standalone: true,
  selector: 'app-root',
  imports: [AccordionModule],
  template: `
    <ejs-accordion>
      <e-accordionitems>
        <e-accordionitem expanded="true">
          <ng-template #header>
            <div>ASP.NET</div>
          </ng-template>
          <ng-template #content>
            <div>Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services.</div>
          </ng-template>
        </e-accordionitem>
        
        <e-accordionitem>
          <ng-template #header>
            <div>ASP.NET MVC</div>
          </ng-template>
          <ng-template #content>
            <div>The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller.</div>
          </ng-template>
        </e-accordionitem>
        
        <e-accordionitem>
          <ng-template #header>
            <div>JavaScript</div>
          </ng-template>
          <ng-template #content>
            <div>JavaScript (JS) is an interpreted computer programming language used for creating interactive web pages and applications.</div>
          </ng-template>
        </e-accordionitem>
      </e-accordionitems>
    </ejs-accordion>
  `
})
export class AppComponent {}

項目配列を使用する方法：

import { Component } from '@angular/core';
import { AccordionModule } from '@syncfusion/ej2-angular-navigations';

@Component({
  standalone: true,
  selector: 'app-root',
  imports: [AccordionModule],
  template: `<ejs-accordion [items]="accordionItems"></ejs-accordion>`
})
export class AppComponent {
  public accordionItems = [
    {
      header: 'ASP.NET',
      content: 'Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications.',
      expanded: true
    },
    {
      header: 'ASP.NET MVC',
      content: 'The Model-View-Controller (MVC) architectural pattern separates an application into three main components.'
    },
    {
      header: 'JavaScript',
      content: 'JavaScript (JS) is an interpreted computer programming language used for creating interactive web pages.'
    }
  ];
}

一般的なパターン

パターン 1：単一展開モード（開く項目は 1 つ）

一度に開くアコーディオン項目を 1 つだけにしたい場合に使用します。ナビゲーションメニューや設定パネルでよく使われます。

<ejs-accordion expandMode="Single">
  
</ejs-accordion>

パターン 2：項目の動的な追加

ユーザー操作やデータの読み込みに応じて、項目をプログラムから追加します。

@ViewChild('accordion') accordionObj?: AccordionComponent;

addNewItem() {
  this.accordionObj?.addItem({
    header: 'New Item',
    content: 'New content here'
  });
}

パターン 3：イベント駆動型のワークフロー

バリデーションやデータ読み込みなどの独自ロジックを実行するため、アコーディオンのイベントに応答します。

<ejs-accordion (expanding)="onExpanding($event)" (expanded)="onExpanded($event)">
  
</ejs-accordion>

onExpanding(event: ExpandEventArgs) {
  // Prevent collapse of currently open item
  event.cancel = true;
}

パターン 4：アニメーション付きの展開／折りたたみ

視覚的なフィードバックを向上させるため、滑らかなアニメーションを追加します。

<ejs-accordion [animation]="animationSettings">
  
</ejs-accordion>

animationSettings = {
  expand: { effect: 'SlideDown', duration: 400, easing: 'ease' },
  collapse: { effect: 'SlideUp', duration: 400, easing: 'ease' }
};

API リファレンスの全容

各 API 要素の詳細なドキュメントと動作するコード例については、リファレンスファイルを参照してください。以下に包括的な概要を示します。

Accordion コンポーネントのプロパティ（全13項目）

プロパティ	型	デフォルト	用途	詳細
items	AccordionItemModel[]	[]	アコーディオン項目のコレクション	データバインディング
dataSource	DataManager | Object[]	null	項目をバインドするためのデータソース	データバインディング
expandMode	'Single' | 'Multiple'	'Multiple'	単一または複数項目の展開を制御	展開モード
expandedIndices	number[]	[]	初期状態で展開する項目のインデックス	展開モード
animation	AccordionAnimationSettingsModel	{ expand: { effect: 'SlideDown', duration: 400, easing: 'linear' }, collapse: { effect: 'SlideUp', duration: 400, easing: 'linear' } }	展開／折りたたみのアニメーション設定	高度な機能
headerTemplate	string | Function	null	項目ヘッダーのテンプレート	はじめに
itemTemplate	string | Function	null	項目コンテンツのテンプレート	はじめに
height	string | number	auto	コンポーネントの高さ	はじめに
width	string | number	100%	コンポーネントの幅	はじめに
enableRtl	boolean	false	右から左へのレイアウトを有効化	高度な機能
enablePersistence	boolean	false	展開状態をlocalStorageに保存	はじめに
enableHtmlSanitizer	boolean	true	コンテンツ内のHTMLをサニタイズ	データバインディング
locale	string	'en-US'	ローカライズのカルチャ設定	高度な機能

AccordionItem のプロパティ（全8項目）

プロパティ	型	デフォルト	用途	詳細
header	string | HTMLElement	''	項目のヘッダーテキストまたは要素	はじめに
content	string | HTMLElement | Function	''	項目のテキスト、HTML、または関数	はじめに
expanded	boolean	false	初期展開状態	展開モード
disabled	boolean	false	項目の操作を無効化	動的な読み込み
visible	boolean	true	項目の表示状態	動的な読み込み
cssClass	string	''	項目に設定するカスタムCSSクラス	高度な機能
iconCss	string	''	Font Awesome／Bootstrapのアイコンクラス	はじめに
id	string	''	項目を一意に識別するID	はじめに

メソッド（合計 7 個）

メソッド	シグネチャ	目的	詳細
addItem()	addItem(item: AccordionItemModel | Object[], index?: number): void	指定したインデックスまたは末尾に項目を追加します	動的読み込み
removeItem()	removeItem(index: number): void	指定したインデックスの項目を削除します	動的読み込み
expandItem()	expandItem(isExpand: boolean, index?: number): void	指定した項目またはすべての項目を展開／折りたたみします	動的読み込み、展開モード
enableItem()	enableItem(index: number, isEnable: boolean): void	項目の操作を有効／無効にします	動的読み込み
hideItem()	hideItem(index: number, isHidden?: boolean): void	項目を削除せずに表示／非表示にします	動的読み込み
select()	select(index: number): void	項目のヘッダーにフォーカスを設定します	動的読み込み
destroy()	destroy(): void	コンポーネントのリソースをクリーンアップします	動的読み込み

イベント（合計 5 個）

イベント	イベント引数	発生するタイミング	詳細
created	Event	コンポーネントのレンダリングが完了したとき	動的読み込み
expanding	ExpandEventArgs	項目の展開が始まるとき（キャンセル可能）	動的読み込み
expanded	ExpandEventArgs	項目の展開が完了したとき	動的読み込み
clicked	AccordionClickArgs	ヘッダーまたはコンテンツがクリックされたとき	動的読み込み
destroyed	Event	コンポーネントが破棄されたとき	動的読み込み

アニメーション効果（6 種類）

効果	展開時の動作	折りたたみ時の動作	最適な用途
SlideDown	コンテンツが下方向にスライドします	該当なし（SlideUp と組み合わせて使用）	デフォルト、滑らかなアニメーション
SlideUp	該当なし（SlideDown と組み合わせて使用）	コンテンツが上方向にスライドします	デフォルトの折りたたみ効果
FadeDown	スライドしながらコンテンツがフェードインします	該当なし（FadeUp と組み合わせて使用）	洗練された見た目
FadeUp	該当なし（FadeDown と組み合わせて使用）	スライドしながらコンテンツがフェードアウトします	洗練された見た目
Zoom	コンテンツが拡大します	コンテンツが縮小します	注目を集める効果
None	即時	即時	最高のパフォーマンス

イージング関数（5 種類）

イージング	曲線	最適な用途	一般的な使用例
linear	一定速度	シンプルなアニメーション	直線的な展開／折りたたみ
ease	開始時と終了時は遅く、中間は速い	デフォルトの動作	バランスの取れた感覚
ease-in	加速	折りたたみ動作	閉じるにつれて速度が上がります
ease-out	減速	展開動作	開くにつれて速度が下がります
ease-in-out	開始時と終了時は遅い	対称的なアニメーション	両方向で同じタイミング

一般的なユースケース

1. FAQ セクション - 単一展開モードを備えた、展開可能な質問と回答のペア
2. マルチステップウィザード - 検証と条件付き有効化を備えた、順序に沿った項目
3. 設定パネル - 展開可能なセクションに整理された、グループ化された設定
4. ナビゲーションメニュー - ネストされたアコーディオンを備えた階層型ナビゲーション
5. データエクスプローラー - 動的読み込みに対応した、展開可能なデータカテゴリ
6. ヘルプドキュメント - トピック別に整理された、折りたたみ可能なヘルプセクション

トラブルシューティングのクイックリファレンス

項目が展開されませんか？

• enableItem(false, index) で項目が無効になっていないか確認します
• expandMode の設定が要件に合っているか確認します

コンテンツが読み込まれませんか？

• header と content のプロパティが設定されていることを確認します
• スタイルに CSS のインポートが含まれているか確認します

アニメーションが滑らかではありませんか？

• CSS が正しくインポートされていることを確認します
• ブラウザーのコンソールにエラーがないか確認します
• 動作の遅いデバイスでは、アニメーションの再生時間を短くすることを検討します

複数の項目が予期せず閉じますか？

• 複数の項目を開いたままにする場合、expandMode が 'Multiple' に設定されているか確認します
• イベントハンドラーが e.cancel = true を呼び出していないか確認します

---

詳細については、上記のドキュメントとナビゲーションガイドを参照してください。このコンポーネントを初めて使う場合は、getting-started.md から始めてください。