React Expansion Panel (展開パネル) の概要
Ignite UI for React 展開パネルは、縮小または展開の 2 つの状態で描画できる軽量のアコーディオン コンポーネントです。展開パネルは、マウス クリックまたはキーボード操作によって切り替えることができます。
React 展開パネルの例
使用方法
まず、次のコマンドを実行して、対応する Ignite UI for React npm パッケージをインストールする必要があります:
npm install igniteui-react
次に、以下のように、IgrExpansionPanel とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります:
import { IgrExpansionPanel, IgrExpansionPanelModule } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrExpansionPanelModule.register();
IgrExpansionPanel の使用を開始する最も簡単な方法は次のとおりです:
<IgrExpansionPanel>
<h1 slot="title">Golden Retriever</h1>
<h3 slot="subtitle">Medium-large gun dog</h3>
<span>The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, such as ducks
and upland game birds, during hunting and shooting parties.[3] The name retriever refers to the breeds ability
to retrieve shot game undamaged due to their soft mouth. Golden retrievers have an instinctive love of water, and
are easy to train to basic or advanced obedience standards.</span>
</IgrExpansionPanel>
イベントにバインド
展開パネル コンポーネントは、次のイベントを発生させます:
- Closed - 展開パネルが縮小されたときに発生します。
- Opened - 展開パネルが展開されたときに発生します。
- Closing - 展開パネルが縮小を開始たときに発生します。
- Opening - 展開パネルが展開を開始したときに発生します。
次のサンプルは、コンポーネントにロジックを追加して、パネルの現在の状態に応じて subtitle を表示 / 非表示にする方法を示しています。
これを行うには、Opened および Closed イベントにバインドします:
コンポーネントのカスタマイズ
IgrExpansionPanel コントロールを使用すると、あらゆる種類のコンテンツを本体内に追加できます。Input、チャート、さらには他の展開パネルを描画できます!
IgrExpansionPanel を使用すると、公開された title、subTitle、および indicator スロット全体でヘッダーを簡単にカスタマイズできます。
展開インジケーターの位置の構成は、展開パネルの indicatorPosition プロパティを使用して行うことができます。可能なオプションは、start、end、または none です。
次のコードサンプルは、コンポーネントのボタンが右側に移動するように構成する方法を示しています。
キーボード ナビゲーション
Ignite UI for React 展開パネルのキーボード ナビゲーションは、W3C アクセシビリティ標準に準拠しており、使いやすくなっています。
キーの組み合わせ
- Alt + ↓ - フォーカスされたパネルを展開します。
- Alt + ↑ - フォーカスされたパネルを縮小します。
- Space / Enter - フォーカスされたパネルの展開状態を切り替えます。
スタイル設定
Ignite UI for React 展開パネル コンポーネントは、いくつかの CSS パーツ (header、indicator、title、subtitle および content) を公開して、スタイルを完全に制御できるようにします。