Web Components Accordion (アコーディオン) の概要
Ignite UI for Web Components アコーディオンは、単一のコンテナーに表示されるクリック可能なヘッダーと関連するコンテンツ セクションを含む垂直方向に展開可能なパネルを構築するための GUI コンポーネントです。Accordion は、単一のページのコンテンツの複数のセクションでスクロールする必要性を軽減するためによく使用されます。キーボード ナビゲーションと基になるパネルの展開状態を制御する API を提供します。
ユーザーは、サムネイルやラベルなどの項目のリスト間で操作および移動できます。含まれる情報を表示するために、各項目を切り替えることができます (展開または縮小)。構成に応じて、一度に 1 つまたは複数の展開されている項目があります。
Web Components アコーディオンの例
以下は FAQ セクションの基本的な Ignite UI for Web Components アコーディオンの例です。アコーディオンとして動作し、個別に動作します。複数のパネルを同時に展開しながら、各テキスト ブロックをシングル クリックで切り替えることができます。これにより、自動的に展開および縮小パネル間を前後に移動することなく、情報をより簡単に読み取ることができます。このパネルは、以前に開いたセクションを毎回非表示にします。
その中で、アコーディオンとその展開パネルを定義する方法を見ることができます。このサンプルは、2 種類の展開動作も示します。切り替えボタンは singleExpand プロパティを設定し、一度に展開する単一ブランチと複数ブランチを切り替えます。
Web Components アコーディオンで作業を開始
まず、次のコマンドを実行して Ignite UI for Web Components をインストールする必要があります:
npm install igniteui-webcomponents
IgcAccordionComponent を使用する前に、次のように登録する必要があります:
import { defineComponents, IgcAccordionComponent } from 'igniteui-webcomponents';
defineComponents(IgcAccordionComponent);
Ignite UI for Web Components の完全な概要については、作業の開始トピックを参照してください。
これで、IgcAccordionComponent とそのパネルの基本構成から始めることができます。
使用方法
Web Components アコーディオン コンポーネントの各セクションは、Web Components 展開パネルを使用して定義されます。
パネルには、Disabled および Open プロパティが用意されており、要件に応じてパネルの状態を構成できます。
Accordion の宣言
アコーディオンは、その中で宣言されたすべての展開パネルをラップします。
<igc-accordion id="accordion" single-expand="true">
<igc-expansion-panel>
<div slot="title">Title Panel 1</div>
<div>
Content Panel 1
</div>
</igc-expansion-panel>
<igc-expansion-panel>
<div slot="title">Title Panel 2</div>
<div>
Content Panel 2
</div>
</igc-expansion-panel>
</igc-accordion>
Panels アクセサーを使用して、IgcAccordionComponent のすべての子の拡張パネルを含むコレクションへの参照を取得できます。
private accordion: IgcAccordionComponent;
private panels: IgcExpansionPanelComponent[];
constructor() {
this.accordion = document.getElementById("accordion") as IgcAccordionComponent;
this.panels = this.accordion.panels;
}
上記で示したように、singleExpand プロパティを使用すると、一度に 1 つまたは複数のパネルを展開できるかどうかを設定できます。
hideAll メソッドと showAll メソッドを使用すると、IgcAccordionComponent のすべての IgcExpansionPanelComponent をプログラムでそれぞれ省略したり展開したりできます。
[!Note]
singleExpandプロパティが true に設定されている場合、showAllメソッドを呼び出すと、フォーカスされたパネルのみが展開されます。
Web Components アコーディオンのカスタマイズの例
Web Components アコーディオンを使用すると、ヘッダーとコンテンツ パネルの外観をカスタマイズできます。
以下のサンプルは、IgcExpansionPanelComponent の組み込みスロットを使用して、複雑なフィルタリング オプションを実装する方法を示しています。
ネストされた Web Components アコーディオンのシナリオ
次の Web Components アコーディオンの例では、この一般的なアプリケーション シナリオにどのように取り組むことができるかを説明するために、複雑な FAQ セクションが作成されています。サンプルでは、ネストされたアコーディオンは、展開パネル内に IgcAccordionComponent を追加することによって実現されます。
キーボード ナビゲーション
Web Components アコーディオンのキーボード ナビゲーションは、エンド ユーザーにさまざまなキーボード操作を提供します。この機能はデフォルトで有効になっており、エンドユーザーは簡単にパネル間を移動できます。
アコーディオン ナビゲーションは、W3C アクセシビリティ標準に準拠しており、使いやすいです。
キーの組み合わせ
- ↓ - フォーカスを下のパネルに移動します。
- ↑ - フォーカスを上のパネルに移動します。
- Alt + ↓ - アコーディオンでフォーカスされたパネルを開きます。
- Alt + ↑ - Accordion でフォーカスされたパネルを閉じます。
- Shift + Alt + ↓ - 有効なすべてのパネルを開きます。(singleExpand が true に設定されている場合、フォーカスされたパネルが開きます)。
- Shift + Alt + ↑ - 有効なすべてのパネルを閉じます。
- Home - Accordion の最初の有効なパネルに移動します。
- End - Accordion の最後の有効なパネルに移動します。