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

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

Blazor 展開パネルの例

使用方法

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

イベントにバインド

展開パネル コンポーネントは、次のイベントを発生させます:

次のサンプルは、コンポーネントにロジックを追加して、パネルの現在の状態に応じて subtitle を表示 / 非表示にする方法を示しています。

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

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

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

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

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

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

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

キーの組み合わせ

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

スタイル設定

IgbExpansionPanel コンポーネントはいくつかの 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 Blazor フォーラム (英語)
• Ignite UI for Blazor GitHub (英語)