Web Components Expansion Panel (展開パネル) の概要

Ignite UI for Web Components 展開パネルは、縮小または展開の 2 つの状態で描画できる軽量のアコーディオン コンポーネントです。展開パネルは、マウス クリックまたはキーボード操作によって切り替えることができます。

Web Components 展開パネルの例

使用方法

まず、次のコマンドを実行して Ignite UI for Web Components をインストールする必要があります:

npm install igniteui-webcomponents

ExpansionPanel を使用する前に、次のように登録する必要があります:

import {defineComponents, IgcExpansionPanelComponent} from 'igniteui-webcomponents';

defineComponents(IgcExpansionPanelComponent);

Ignite UI for Web Components の完全な概要については、作業の開始トピックを参照してください。

ExpansionPanel の使用を開始する最も簡単な方法は次のとおりです:

<igc-expansion-panel indicator-position="end">
    <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 イベント エミッターにバインドします。

コンポーネントのカスタマイズ

ExpansionPanel コントロールを使用すると、あらゆる種類のコンテンツを本体内に追加できます。Input、チャート、さらには他の展開パネルを描画できます!

ExpansionPanel を使用すると、公開された title、subTitle、および indicator スロット全体でヘッダーを簡単にカスタマイズできます。

展開インジケーターの位置の構成は、展開パネルの IndicatorPosition プロパティを使用して行うことができます。可能なオプションは、start、end、または none です。

次のコードサンプルは、コンポーネントのボタンが右側に移動するように構成する方法を示しています。

キーボード ナビゲーション

Ignite UI for Web Components 展開パネルのキーボード ナビゲーションは、W3C アクセシビリティ標準に準拠しており、使いやすくなっています。

キーの組み合わせ

• ALT + ↓ - フォーカスされたパネルを展開します。
• ALT + ↑ - フォーカスされたパネルを縮小します。
• SPACE / ENTER - フォーカスされたパネルの展開状態を切り替えます。

スタイル設定

ExpansionPanel コンポーネントはいくつかの CSS パーツを公開し、スタイルを完全に制御できるようにします。

igc-expansion-panel {
  background-color: var(--ig-secondary-900);
  color: var(--ig-secondary-900-contrast);
}

igc-button::part(base) {
  color: var(--ig-secondary-900-contrast);
}

igc-button::part(base)::before {
  background-color: var(--ig-warn-500);
}

igc-expansion-panel::part(indicator) {
  color: var(--ig-warn-500);
}

igc-expansion-panel::part(header) {
  background-color: var(--ig-secondary-900);
}

igc-expansion-panel::part(title),
igc-expansion-panel::part(subtitle) {
  color: var(--ig-warn-500);
}

API リファレンス

その他のリソース

• Ignite UI for Web Components フォーラム (英語)
• Ignite UI for Web Components GitHub (英語)