syncfusion-aspnetcore-accordion

Syncfusion Accordion の実装

このスキルを使用するタイミング

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

• コンテンツを折りたたみ可能なセクションに整理する
• 展開可能な項目を含む FAQ やヘルプセクションを作成する
• アコーディオンペインを使ってタブのようなナビゲーションを作成する
• コンテンツを段階的に表示する
• 階層構造を持つネストされたアコーディオンを構築する
• 単一または複数の展開モードを設定する
• データソースからアコーディオンのコンテンツを動的に読み込む
• アコーディオンのアニメーションや操作をカスタマイズする
• アコーディオンを ASP.NET Core アプリケーションに統合する

Accordion コンポーネントは、縦に並んだ折りたたみ可能なコンテンツパネルを必要とし、一度に 1 つ以上のパネルを表示する場合に最適です。

コンポーネントの概要

Syncfusion Accordion は、縦方向に折りたためるコンテンツパネルコントロールです。次の機能を備えています。

• Single および Multiple の展開モードをサポートします
• 静的な項目とデータバインドされたコンテンツを処理します
• 階層構造のコンテンツに対応するネストされたアコーディオン構造を実現します
• 展開／折りたたみ操作のアニメーションを設定できます
• ライフサイクルイベント（created、expanding、expanded、collapsing、collapsed、clicked）を発生させます
• 部分ビューまたは POST リクエストによるコンテンツの読み込みをサポートします
• expandItem() などの公開メソッドからプログラムで操作できます
• ページの再読み込み後も状態を保持します
• RTL サポートと HTML サニタイズ機能を備えています

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

はじめに

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

• システムの前提条件と NuGet パッケージのインストール
• ASP.NET Core 用の TagHelper の登録
• スタイルシートとスクリプトリソースの設定
• 最初の Accordion コントロールの作成
• AccordionItem の構造とマークアップパターンの理解

展開モードと動作

📄 参照先： references/expand-modes.md

• 単一展開モード：項目を相互排他的に展開
• 複数展開モード：項目を個別に展開（デフォルト）
• 切り替え動作とユーザー操作
• 常に 1 つのペインを開いたままにする
• 展開モードの設定例

データバインディングと動的コンテンツ

📄 参照先： references/data-binding.md

• AccordionItem 要素を使った静的な項目のバインディング
• DataSource プロパティと動的なデータバインディング
• DataManager を使った OData サービスとの統合
• データからヘッダーとコンテンツのプロパティをマッピングする
• 複雑なデータ構造の処理

高度なコンテンツの読み込み

📄 参照先： references/content-loading.md

• 部分ビューからのコンテンツの読み込み
• パフォーマンスを高める遅延読み込みの方法
• 動的なコンテンツのレンダリングと更新
• POST ベースのコンテンツリクエスト
• コンテンツの更新と状態管理

カスタマイズとアニメーション

📄 参照先： references/customization-animation.md

• 展開／折りたたみアニメーションの設定
• アニメーション設定：effect、duration、easing
• イベント処理：expanding、expanded、collapsing、collapsed
• expandItem() メソッドによるプログラムでの展開／折りたたみ
• 高度な操作パターンと順次実行

ネストされたアコーディオン構造

📄 参照先： references/nested-accordion.md

• マルチレベルのアコーディオン階層の作成
• ネストされたアコーディオン要素の参照
• コンテンツ要素 ID の参照
• 大規模な構成でのパフォーマンスに関する考慮事項

API リファレンス全体

📄 参照先： api-reference.md

• 使用可能なすべてのプロパティ、メソッド、イベント
• AccordionItem の設定オプション
• アニメーション設定とイベント引数
• 詳細なガイダンスはスキルファイルを参照し、重複を避けたリファレンス

クイックスタートの例

<div class="control_wrapper accordion-control-section">
    <ejs-accordion id="myAccordion" expand-mode="Multiple">
        <e-accordion-accordionitems>
            <e-accordion-accordionitem expanded="true" 
                header="Getting Started" 
                content="Learn the basics of Accordion component integration">
            </e-accordion-accordionitem>
            <e-accordion-accordionitem 
                header="Features" 
                content="Explore expand modes, data binding, and customization options">
            </e-accordion-accordionitem>
            <e-accordion-accordionitem 
                header="Advanced Topics" 
                content="Discover nested accordions, animations, and event handling">
            </e-accordion-accordionitem>
        </e-accordion-accordionitems>
    </ejs-accordion>
</div>

これにより、3 つの項目を含む基本的なアコーディオンが作成され、最初の項目はデフォルトで展開されます。

よく使われるパターン

単一展開モードの FAQ セクション

一度に 1 つの FAQ の回答だけを表示する場合は、Single 展開モードを使用します。

<ejs-accordion expand-mode="Single">

複数のパネルを開いた状態でのドキュメント

Multiple 展開モード（デフォルト）を使用すると、読者は複数のセクションを同時に比較できます。

動的コンテンツの読み込み

アコーディオン項目を DataSource にバインドして、コンテンツを動的に読み込みます。

<ejs-accordion data-source="Model.AccordionItems">

常に1つのパネルを開いたままにする

Single モードでは、expanding イベントを設定して、最後に開いている項目が折りたたまれないようにします。

主なプロパティ

プロパティ	型	デフォルト	目的
expandMode	Single | Multiple	Multiple	1つまたは複数の項目を同時に展開できるかどうかを制御します
items	AccordionItemModel[]	[]	表示するアコーディオン項目の配列です
dataSource	Object[]	[]	動的データをアコーディオン項目にバインドします
expandedIndices	number[]	[]	初回読み込み時に展開する項目を指定します
height	string | number	auto	アコーディオンコンテナーの高さを設定します
width	string | number	100%	アコーディオンコンテナーの幅を設定します
animation	AccordionAnimationSettingsModel	Configured	展開／折りたたみのアニメーションをカスタマイズします
enablePersistence	boolean	false	ページを再読み込みしても展開状態を保持します
enableHtmlSanitizer	boolean	true	信頼できない HTML コンテンツをサニタイズします

各展開モードの使い分け

Single モード：コンテンツが相互排他的な場合や、一度に1つのセクションだけを表示する場合に使用します（例：ステップ形式のウィザード、ラジオボタンのような動作）。

Multiple モード：複数のセクションを同時に表示する必要がある場合に使用します（例：FAQ セクション、ドキュメント、機能一覧）。

---

次のステップ： ニーズに合ったリファレンスファイルを選択するか、「はじめに」からセットアップ手順を確認してください。