syncfusion-blazor-accordion

Syncfusion Blazor Accordion コンポーネント

Blazor Accordion は、1 つ以上のパネルを表示する、縦方向に折りたたみ可能なコンテンツコンテナーです。各パネルは、ヘッダーと展開可能なコンテンツセクションで構成されます。単一または複数パネルの展開、ネストされたアコーディオン、アニメーションに対応し、WCAG に準拠した完全なアクセシビリティを備えています。

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

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

• Blazor アプリケーションで折りたたみ可能なコンテンツセクションを作成する
• 回答を展開できる FAQ セクションを構築する
• ネストされた項目を含むナビゲーションメニューを実装する
• 大量のコンテンツを、コンパクトで展開可能なパネルに整理する
• ウィザードのような、順序立てたステップを持つインターフェイスを作成する
• ネストされたアコーディオンで階層データを表示する
• キーボードナビゲーションに対応した、アクセシブルな折りたたみ可能コンポーネントを実装する
• 展開／折りたたみのアニメーションと動作を設定する
• アコーディオン項目に動的データをバインドする
• アコーディオンの外観とスタイルをカスタマイズする

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

はじめに

📄 参照: references/getting-started.md

• Syncfusion.Blazor.Navigations NuGet パッケージのインストール
• 名前空間のインポートとサービスの登録
• テーマとスクリプトの参照の追加
• 基本的な項目を使った最初のアコーディオンの作成
• テンプレート（HeaderTemplate、ContentTemplate）を使ったアコーディオンの実装

展開モードと動作

📄 参照: references/expand-modes.md

• 単一展開モード（一度に開けるパネルは 1 つだけ）
• 複数展開モード（複数のパネルを同時に開ける）
• ExpandedIndices を使った初期展開状態の設定
• Expanded プロパティを使った個別項目の展開設定
• デフォルトの展開動作の制御

コンテンツのレンダリング

📄 参照: references/content-rendering.md

• パフォーマンスを最適化する LoadOnDemand プロパティ
• 初回読み込み時にすべてのコンテンツをレンダリングする
• オンデマンドでのコンテンツ読み込み（デフォルトの動作）
• 大規模なアコーディオンに関するパフォーマンス上の考慮事項

データバインディングとイベント

📄 参照: references/data-binding-events.md

• foreach ループを使ったローカルデータのバインド
• 動的コンテンツに HeaderTemplate と ContentTemplate を使用する
• Created および Destroyed ライフサイクルイベントの処理
• Clicked イベントへの応答
• Expanding／Expanded および Collapsing／Collapsed イベントの管理
• イベント引数を使ったデフォルトの展開／折りたたみ動作の防止

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

📄 参照: references/customization-styling.md

• アコーディオンの境界線と外観のカスタマイズ
• CSS によるアコーディオン項目のスタイル設定
• ヘッダーのコンテンツと展開／折りたたみアイコンのカスタマイズ
• ホバー時と選択項目のスタイルの適用
• 個別の項目での CssClass プロパティの使用
• CSS クラスの構造と使用可能なクラス
• テーマとの統合とレスポンシブデザイン

アクセシビリティとアニメーション

📄 参照: references/accessibility-animations.md

• WCAG 2.2 および Section 508 への準拠
• ARIA 属性とスクリーンリーダーのサポート
• キーボードナビゲーション（矢印キー、Space／Enter、Home／End）
• RTL サポートと色のコントラスト
• 展開／折りたたみアニメーションの設定
• アニメーション効果（SlideDown、SlideUp、FadeIn、FadeOut、ZoomIn、ZoomOut、None）
• アニメーションの時間とイージングのカスタマイズ

操作シナリオ

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

• アコーディオンのヘッダーへのカスタムアイコンの追加
• ネストされたアコーディオンの作成（アコーディオン内のアコーディオン）
• アコーディオン項目の動的な追加と削除
• 順次検証を伴うウィザードインターフェイスの作成
• 特定のアコーディオン項目の有効化または無効化
• アコーディオンのコンテンツ内への他のコンポーネント（TreeView など）の統合
• 特定の条件での展開／折りたたみの防止
• 条件に応じたアコーディオン項目の表示または非表示

クイックスタート

基本的なアコーディオン

@using Syncfusion.Blazor.Navigations

<SfAccordion>
    <AccordionItems>
        <AccordionItem Header="ASP.NET" Content="Microsoft ASP.NET is a set of technologies for building Web applications."></AccordionItem>
        <AccordionItem Header="ASP.NET MVC" Content="The Model-View-Controller pattern separates an application into three components."></AccordionItem>
        <AccordionItem Header="JavaScript" Content="JavaScript is an interpreted programming language for web development."></AccordionItem>
    </AccordionItems>
</SfAccordion>

テンプレートを使ったアコーディオン

@using Syncfusion.Blazor.Navigations

<SfAccordion>
    <AccordionItems>
        <AccordionItem>
            <HeaderTemplate>
                <div>Employee Details</div>
            </HeaderTemplate>
            <ContentTemplate>
                <div>
                    <b>Name:</b> John Doe<br />
                    <b>Position:</b> Software Engineer
                </div>
            </ContentTemplate>
        </AccordionItem>
    </AccordionItems>
</SfAccordion>

データバインドされたアコーディオン

@using Syncfusion.Blazor.Navigations

<SfAccordion>
    <AccordionItems>
        @foreach (var item in AccordionData)
        {
            <AccordionItem>
                <HeaderTemplate>
                    <div>@item.Title</div>
                </HeaderTemplate>
                <ContentTemplate>
                    <div>@item.Content</div>
                </ContentTemplate>
            </AccordionItem>
        }
    </AccordionItems>
</SfAccordion>

@code {
    List<DataItem> AccordionData = new List<DataItem>() {
        new DataItem { Title = "Item 1", Content = "Content 1" },
        new DataItem { Title = "Item 2", Content = "Content 2" }
    };
    
    public class DataItem {
        public string Title { get; set; }
        public string Content { get; set; }
    }
}

よくあるパターン

単一展開モード

一度に開くパネルを1つだけにする場合に使用します（FAQ など）。

<SfAccordion ExpandMode="ExpandMode.Single">
    <AccordionItems>
        <AccordionItem Expanded="true" Header="Question 1" Content="Answer 1"></AccordionItem>
        <AccordionItem Header="Question 2" Content="Answer 2"></AccordionItem>
    </AccordionItems>
</SfAccordion>

展開イベントの処理

展開／折りたたみの際にアクションを実行する必要がある場合に使用します。

<SfAccordion>
    <AccordionEvents Expanding="OnExpanding" Expanded="OnExpanded"></AccordionEvents>
    <AccordionItems>
        <AccordionItem Header="Item 1" Content="Content 1"></AccordionItem>
    </AccordionItems>
</SfAccordion>

@code {
    public void OnExpanding(ExpandEventArgs args) {
        // Perform validation or load data before expansion
    }
    
    public void OnExpanded(ExpandedEventArgs args) {
        // Handle post-expansion actions
    }
}

項目の動的管理

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

<SfButton @onclick="AddItem">Add Item</SfButton>

<SfAccordion>
    <AccordionItems>
        @foreach (var item in Items)
        {
            <AccordionItem Header="@item.Header" Content="@item.Content"></AccordionItem>
        }
    </AccordionItems>
</SfAccordion>

@code {
    List<ItemData> Items = new List<ItemData>();
    
    void AddItem() {
        Items.Add(new ItemData { Header = "New Item", Content = "New Content" });
    }
}

入れ子のアコーディオン

階層的な折りたたみ可能セクションが必要な場合に使用します。

<SfAccordion>
    <AccordionItems>
        <AccordionItem Header="Parent Item">
            <ContentTemplate>
                <SfAccordion>
                    <AccordionItems>
                        <AccordionItem Header="Child Item 1" Content="Child Content 1"></AccordionItem>
                        <AccordionItem Header="Child Item 2" Content="Child Content 2"></AccordionItem>
                    </AccordionItems>
                </SfAccordion>
            </ContentTemplate>
        </AccordionItem>
    </AccordionItems>
</SfAccordion>

主なプロパティと設定

コアプロパティ

プロパティ	型	デフォルト	説明
ExpandMode	ExpandMode	Multiple	単一または複数の項目を展開できるかどうかを制御します
ExpandedIndices	int[]	null	最初に展開する項目のインデックス配列です
LoadOnDemand	bool	true	コンテンツをオンデマンドで読み込むか、初回のレンダリング時に読み込むかを指定します

AccordionItem のプロパティ

プロパティ	型	デフォルト	説明
Header	string	null	アコーディオンのヘッダーに表示するテキストです
Content	string	null	アコーディオンパネルに表示するテキストです
HeaderTemplate	RenderFragment	null	ヘッダー用のカスタムテンプレートです
ContentTemplate	RenderFragment	null	コンテンツ用のカスタムテンプレートです
Expanded	bool	false	項目を最初から展開するかどうかを指定します
Disabled	bool	false	項目を無効にするかどうかを指定します
Visible	bool	true	項目を表示するかどうかを指定します
IconCss	string	null	カスタムヘッダーアイコンの CSS クラスです
CssClass	string	null	項目に適用するカスタム CSS クラスです

アニメーションプロパティ

AccordionAnimationSettings を使用して、展開／折りたたみのアニメーションを設定します。

<SfAccordion>
    <AccordionAnimationSettings>
        <AccordionAnimationExpand Effect="AnimationEffect.SlideDown" Duration="400"></AccordionAnimationExpand>
        <AccordionAnimationCollapse Effect="AnimationEffect.SlideUp" Duration="400"></AccordionAnimationCollapse>
    </AccordionAnimationSettings>
    <AccordionItems>
        
    </AccordionItems>
</SfAccordion>

利用可能なアニメーション効果：SlideDown、SlideUp、FadeIn、FadeOut、FadeZoomIn、FadeZoomOut、ZoomIn、ZoomOut、None

一般的なユースケース

FAQ セクション

一度に1つの回答だけを表示する FAQ に最適です。

• ExpandMode.Single を使用します
• 最初の項目に Expanded="true" を設定します
• 質問のように見えるようヘッダーをスタイル設定します

マルチステップフォーム／ウィザード

順番に進むガイド付きワークフローを作成します。

• ステップを飛ばせないように Disabled プロパティを使用します
• アクティブなステップを制御するために Expanded プロパティを使用します
• 次のステップに進む前に検証するため、Expanding イベントを処理します

ナビゲーションメニュー

ナビゲーション項目を階層的に整理します。

• サブメニューには入れ子のアコーディオンを使用します
• メニューアイコンには IconCss を使用します
• ナビゲーション操作のために Clicked イベントを処理します

コンテンツの整理

大量のコンテンツをコンパクトな形式で整理します。

• パフォーマンス向上のため LoadOnDemand="true" を使用します
• 柔軟に表示できるよう、展開モードには Multiple を使用します
• 明確でわかりやすいヘッダーを設定します

データの表示

構造化データを折りたたみ可能なセクションに表示します。

• foreach を使用してデータをバインドします
• リッチコンテンツの表示にはテンプレートを使用します
• 詳細データを遅延読み込みするためにイベントを処理します

次のステップ

• インストールとセットアップについては、references/getting-started.md をお読みください
• 展開動作の設定については、references/expand-modes.md をお読みください
• イベント処理とデータバインディングについては、references/data-binding-events.md をお読みください
• スタイル設定とカスタマイズについては、references/customization-styling.md をお読みください
• 実用的な例については、references/how-to-scenarios.md をお読みください