Blazor Accordion (アコーディオン) の概要
Ignite UI for Blazor アコーディオンは、単一のコンテナーに表示されるクリック可能なヘッダーと関連するコンテンツ セクションを含む垂直方向に展開可能なパネルを構築するための GUI コンポーネントです。Accordion は、単一のページのコンテンツの複数のセクションでスクロールする必要性を軽減するためによく使用されます。キーボード ナビゲーションと基になるパネルの展開状態を制御する API を提供します。
ユーザーは、サムネイルやラベルなどの項目のリスト間で操作および移動できます。含まれる情報を表示するために、各項目を切り替えることができます (展開または縮小)。構成に応じて、一度に 1 つまたは複数の展開されている項目があります。
Blazor アコーディオンの例
以下は FAQ セクションの基本的な Ignite UI for Blazor アコーディオンの例です。アコーディオンとして動作し、個別に動作します。複数のパネルを同時に展開しながら、各テキスト ブロックをシングル クリックで切り替えることができます。これにより、自動的に展開および縮小パネル間を前後に移動することなく、情報をより簡単に読み取ることができます。このパネルは、以前に開いたセクションを毎回非表示にします。
その中で、アコーディオンとその展開パネルを定義する方法を見ることができます。このサンプルは、2 種類の展開動作も示します。切り替えボタンは SingleExpand プロパティを設定し、一度に展開する単一ブランチと複数ブランチを切り替えます。
Blazor アコーディオンで作業を開始
IgbAccordion を使用する前に、次のように登録する必要があります:
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbAccordionModule));
また、追加の CSS ファイルをリンクして、スタイルを IgbAccordion コンポーネントに適用する必要があります。以下は、Blazor Web Assembly プロジェクトの wwwroot/index.html ファイルまたは Blazor Server プロジェクトの Pages/_Host.cshtmlフ ァイルに配置する必要があります:
<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
これで、IgbAccordion とそのパネルの基本構成から始めることができます。
使用方法
Blazor アコーディオン コンポーネントの各セクションは、Blazor 展開パネルを使用して定義されます。
パネルには、Disabled および Open プロパティが用意されており、要件に応じてパネルの状態を構成できます。
Accordion の宣言
アコーディオンは、その中で宣言されたすべての展開パネルをラップします。
<IgbAccordion SingleExpand=true>
<IgbExpansionPanel>
<div slot="title">Title Panel 1</div>
<div>
Content Panel 1
</div>
</IgbExpansionPanel>
<IgbExpansionPanel>
<div slot="title">Title Panel 2</div>
<div>
Content Panel 2
</div>
</IgbExpansionPanel>
</IgbAccordion>
上記で示したように、SingleExpand プロパティを使用すると、一度に 1 つまたは複数のパネルを展開できるかどうかを設定できます。
HideAll メソッドと ShowAll メソッドを使用すると、IgbAccordion のすべての IgbExpansionPanel をプログラムでそれぞれ省略したり展開したりできます。
[!Note]
SingleExpandプロパティが true に設定されている場合、ShowAllメソッドを呼び出すと、フォーカスされたパネルのみが展開されます。
Blazor アコーディオンのカスタマイズの例
Blazor アコーディオンを使用すると、ヘッダーとコンテンツ パネルの外観をカスタマイズできます。
以下のサンプルは、IgbExpansionPanel の組み込みスロットを使用して、複雑なフィルタリング オプションを実装する方法を示しています。
ネストされた Blazor アコーディオンのシナリオ
次の Blazor アコーディオンの例では、この一般的なアプリケーション シナリオにどのように取り組むことができるかを説明するために、複雑な FAQ セクションが作成されています。サンプルでは、ネストされたアコーディオンは、展開パネル内に IgbAccordion を追加することによって実現されます。
キーボード ナビゲーション
Blazor アコーディオンのキーボード ナビゲーションは、エンド ユーザーにさまざまなキーボード操作を提供します。この機能はデフォルトで有効になっており、エンドユーザーは簡単にパネル間を移動できます。
アコーディオン ナビゲーションは、W3C アクセシビリティ標準に準拠しており、使いやすいです。
キーの組み合わせ
- ↓ - フォーカスを下のパネルに移動します。
- ↑ - フォーカスを上のパネルに移動します。
- Alt + ↓ - アコーディオンでフォーカスされたパネルを開きます。
- Alt + ↑ - Accordion でフォーカスされたパネルを閉じます。
- Shift + Alt + ↓ - 有効なすべてのパネルを開きます。(singleExpand が true に設定されている場合、フォーカスされたパネルが開きます)。
- Shift + Alt + ↑ - 有効なすべてのパネルを閉じます。
- Home - Accordion の最初の有効なパネルに移動します。
- End - Accordion の最後の有効なパネルに移動します。