syncfusion-javascript-accordion

Syncfusion TypeScript Accordion

Accordion は、1 つ以上の展開／折りたたみ可能なパネルを表示する、縦方向に折りたためるコンテンツパネルコンポーネントです。単一または複数の展開モード、カスタムアニメーション、アイコン、テンプレート、データバインディングに対応しています。

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

次のようなニーズがある場合に、このスキルを使用します。

• ナビゲーション用のレスポンシブなアコーディオンメニューを作成する
• ページの高さを抑えるため、展開可能なコンテンツセクションを作成する
• 検証機能付きのマルチステップウィザードやフォームを実装する
• 折りたたみ可能なパネルに階層データを表示する
• アイコン、アニメーション、スタイルでアコーディオンの外観をカスタマイズする
• データソースや AJAX からアコーディオンのコンテンツを動的に読み込む
• アコーディオンをほかのコンポーネント（TreeView、フォームなど）と連携させる
• ショッピングカートのステップや FAQ セクションなど、複雑な UI パターンを作成する

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

📚 ドキュメント構成

このスキルは、さまざまな側面を扱うテーマ別のリファレンスファイルで構成されています。

基礎

📄 はじめに

• npm パッケージによるインストールとセットアップ
• Items 配列の初期化
• HTML マークアップによる初期化
• CSS のインポートとテーマの設定
• 基本的な動作例

📄 展開モード

• 単一展開モードと複数展開モード
• 展開動作と切り替え
• 初期展開状態
• 各モードの使いどころ
• 一般的なワークフローパターン

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

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

• CSS のカスタマイズガイドとセレクター
• ヘッダー、項目、コンテンツのスタイル設定
• アイコンの統合（組み込みアイコンと Font Awesome）
• アニメーション効果とタイミング
• ホバー状態と選択項目のスタイル設定

データとコンテンツ

📄 データの読み込みとコンテンツ

• 項目の動的な読み込み
• Items 配列を使用する方法
• DataSource バインディングを使用する方法
• AJAX によるコンテンツの読み込み
• 入れ子のアコーディオン
• TreeView との連携

📄 テンプレート

• ヘッダーテンプレート
• 項目テンプレート
• テンプレートのデータバインディング
• テンプレートの動的な切り替え
• パフォーマンスの最適化

応用トピック

📄 高度な機能

• すべてのメソッド（addItem、removeItem、enableItem、expandItem、hideItem、select、refresh など）
• すべてのイベント（expanding、expanded、clicked、created、destroyed）
• イベント引数とプロパティ
• 状態管理
• イベントリスナー
• RTL サポートとアクセシビリティ

📄 高度なユースケース

• マルチステップフォームウィザード
• 条件付き検証ワークフロー
• ショッピングカートのチェックアウトフロー
• 進行状況の追跡
• ベストプラクティス

完全リファレンス

📄 API リファレンス ⭐ API 全体を確認するには、こちらから

• すべてのプロパティを型と既定値とともに記載
• すべてのメソッドをパラメーターと例とともに記載
• すべてのイベントとイベント引数
• アニメーションの設定
• コードの完全な例

クイックスタートの例

import { Accordion } from '@syncfusion/ej2-navigations';

// Initialize Accordion with items array
const accordion = new Accordion({
    items: [
        { 
            header: 'Getting Started', 
            content: 'Learn the basics of Accordion component',
            expanded: true 
        },
        { 
            header: 'Features', 
            content: 'Explore rich features like templates and data binding' 
        },
        { 
            header: 'API Reference', 
            content: 'Complete list of properties, events, and methods' 
        }
    ],
    // Use animation object, not enableAnimation boolean
    animation: {
        expand: { effect: 'SlideDown', duration: 400, easing: 'ease-in' },
        collapse: { effect: 'SlideUp', duration: 400, easing: 'ease-out' }
    }
});

accordion.appendTo('#accordion-element');

よくあるパターン

パターン 1：パネルを 1 つだけ開く（タブのような動作）

const accordion = new Accordion({
    expandMode: 'Single',
    items: [
        { header: 'Tab 1', content: 'Content 1', expanded: true },
        { header: 'Tab 2', content: 'Content 2' },
        { header: 'Tab 3', content: 'Content 3' }
    ]
});

パターン 2：複数のパネルを開く

const accordion = new Accordion({
    expandMode: 'Multiple',  // Default
    items: [
        { header: 'Section A', content: 'Content A', expanded: true },
        { header: 'Section B', content: 'Content B', expanded: true },
        { header: 'Section C', content: 'Content C' }
    ]
});

パターン 3：アイコン付きアコーディオン

const accordion = new Accordion({
    items: [
        { 
            header: 'Sports', 
            iconCss: 'e-sports e-acrdn-icons',
            content: 'Athletic activities content'
        },
        { 
            header: 'Games', 
            iconCss: 'e-games e-acrdn-icons',
            content: 'Gaming activities content'
        }
    ]
});

パターン 4：項目を動的に管理する

const accordion = new Accordion({
    items: [...],
    created: (args) => {
        // Disable item at index 2 initially
        accordion.enableItem(2, false);
        
        // After some action, enable it
        setTimeout(() => {
            accordion.enableItem(2, true);
        }, 2000);
    }
});

主なプロパティ

プロパティ	型	デフォルト	説明
items	AccordionItem[]	[]	ヘッダー、コンテンツ、オプションを含むアコーディオン項目の配列
dataSource	object[] | DataManager	-	外部データソース（項目の配列、OData、JSON、AJAX）
expandMode	'Single' | 'Multiple'	'Multiple'	単一または複数の展開モード
headerTemplate	string	-	項目ヘッダー用のカスタム HTML テンプレート
itemTemplate	string	-	項目全体用のカスタム HTML テンプレート
expandedIndices	number[]	[]	初期状態で展開する項目のインデックス
animation	AnimationSettings	{expand: {}, collapse: {}}	効果、期間、イージングを指定するアニメーション
height	string | number	auto	アコーディオンコンテナーの高さ
width	string | number	100%	アコーディオンコンテナーの幅
enableRtl	boolean	false	右から左へのテキスト方向
enablePersistence	boolean	false	展開状態を localStorage に保持します
enableHtmlSanitizer	boolean	true	セキュリティのために HTML をサニタイズします

必須のインポート

// Main component
import { Accordion } from '@syncfusion/ej2-navigations';

// Optional: Enable ripple effect
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);

// CSS styles (choose one theme)
import '@syncfusion/ej2-base/styles/fluent2.css';
import '@syncfusion/ej2-navigations/styles/fluent2.css';

次のステップ

• データの読み込みとコンテンツでデータバインディングのパターンを確認します
• カスタム UI 用のテンプレート構文をテンプレートで学びます
• 高度なユースケースでフォームウィザードを実装します
• イベント処理と状態管理については高度な機能を確認します