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