Web Components Expansion Panel (展開パネル) の概要
Ignite UI for Web Components 展開パネルは、縮小または展開の 2 つの状態で描画できる軽量のアコーディオン コンポーネントです。展開パネルは、マウス クリックまたはキーボード操作によって切り替えることができます。
Web Components 展開パネルの例
使用方法
まず、次のコマンドを実行して Ignite UI for Web Components をインストールする必要があります:
npm install igniteui-webcomponents
IgcExpansionPanelComponent を使用する前に、次のように登録する必要があります:
import {defineComponents, IgcExpansionPanelComponent} from 'igniteui-webcomponents';
defineComponents(IgcExpansionPanelComponent);
Ignite UI for Web Components の完全な概要については、作業の開始トピックを参照してください。
IgcExpansionPanelComponent の使用を開始する最も簡単な方法は次のとおりです:
<igc-expansion-panel>
<div slot="title">Golden Retriever</div>
<div slot="subTitle">Medium-large gun dog</div>
<div>
<p>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 breed's 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.</p>
</div>
</igc-expansion-panel>
イベントにバインド
展開パネル コンポーネントは、次のイベントを発生させます:
- igcClosed - 展開パネルが縮小されたときに発生します。
- igcOpened - 展開パネルが展開されたときに発生します。
- igcClosing - 展開パネルが縮小を開始たときに発生します。
- igcOpening - 展開パネルが展開を開始したときに発生します。
次のサンプルは、コンポーネントにロジックを追加して、パネルの現在の状態に応じて subtitle を表示 / 非表示にする方法を示しています。
これを行うには、igcOpened および igcClosed イベント エミッターにバインドします。
コンポーネントのカスタマイズ
IgcExpansionPanelComponent コントロールを使用すると、あらゆる種類のコンテンツを本体内に追加できます。Input、チャート、さらには他の展開パネルを描画できます!
IgcExpansionPanelComponent を使用すると、公開された title、subTitle、および indicator スロット全体でヘッダーを簡単にカスタマイズできます。
展開インジケーターの位置の構成は、展開パネルの indicatorPosition プロパティを使用して行うことができます。可能なオプションは、start、end、または none です。
次のコードサンプルは、コンポーネントのボタンが右側に移動するように構成する方法を示しています。
キーボード ナビゲーション
Ignite UI for Web Components 展開パネルのキーボード ナビゲーションは、W3C アクセシビリティ標準に準拠しており、使いやすくなっています。
キーの組み合わせ
- Alt + ↓ - フォーカスされたパネルを展開します。
- Alt + ↑ - フォーカスされたパネルを縮小します。
- Space / Enter - フォーカスされたパネルの展開状態を切り替えます。
スタイル設定
Ignite UI for Web Components 展開パネル コンポーネントは、いくつかの CSS パーツ (header、indicator、title、subtitle および content) を公開して、スタイルを完全に制御できるようにします。