Web Components コンボボックスの機能

Ignite UI for Web Components コンボボックス コンポーネントは、フィルタリングやグループ化などのいくつかの機能を公開しています。

コンボボックス機能の例

以下のデモは、ランタイムで有効または無効にできるいくつかの Combo 機能を示しています。

このサンプルでは、Switch コンポーネントを使用するため、コンボと一緒にインポートする必要があります。

import { defineComponents, IgcComboComponent, IgcSwitchComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcComboComponent, IgcSwitchComponent);

次に、React の useState フックを使用して、スイッチの状態変化に応じて更新される変数を定義します。これにより、状態が追跡され、コンボボックスの入力に反映されます。

let combo = document.getElementById('combo') as IgcComboComponent<City>;

let switchIcon = document.getElementById('caseSensitive') as IgcSwitchComponent;
let switchFilter = document.getElementById('filtering') as IgcSwitchComponent;
let switchDisable = document.getElementById('disabled') as IgcSwitchComponent;

switchIcon.addEventListener("igcChange", () => {
    combo.caseSensitiveIcon = switchIcon.checked;
});

switchFilter.addEventListener("igcChange", () => {
    combo.disableFiltering = switchIcon.disabled = switchFilter.checked;
});

switchDisable.addEventListener("igcChange", () => {
    combo.disabled = switchDisable.checked;
});

グループ化は、GroupKey プロパティを対応するデータ ソース フィールドに設定することで有効/無効になることに注意してください。

let switchGroup = document.getElementById('grouping') as IgcSwitchComponent;

switchGroup.addEventListener("igcChange", () => {
    this.combo.groupKey = switchGroup.checked ? "country" : undefined;
});

機能

フィルタリング

コンボボックスのフィルタリングがデフォルトで有効になります。無効にするには、DisableFiltering プロパティを設定します。

フィルタリング オプションは、検索の大文字と小文字の区別を有効にすることでさらに拡張できます。CaseSensitiveIcon プロパティを使用して大文字と小文字を区別するアイコンをオンにすると、エンド ユーザーは大文字と小文字の区別を制御できます。

<igc-combo disable-filtering case-sensitive-icon></igc-combo>

フィルタリング オプション

Ignite UI for Web Components Combo は、FilterKey オプションと CaseSensitive オプションの両方の構成を渡すことができるフィルター プロパティをもう 1 つ公開しています。FilterKey は、オプションのリストをフィルタリングするためにどのデータ ソース フィールドを使用する必要があるかを示します。CaseSensitive オプションは、フィルタリングで大文字と小文字を区別するかどうかを示します。

次のコード スニペットは、名前ではなく国でデータ ソースから都市をフィルター処理する方法を示しています。また、デフォルトで大文字と小文字を区別するフィルタリングを行います。

const options = {
    filterKey: 'country',
    caseSensitive: true
};

combo.filteringOptions = options;

グループ化

GroupKey オプションを定義すると、キーに基づいて項目をグループ化します。

<igc-combo group-key="region"></igc-combo>

ソートの方向

コンボボックス コンポーネントは、グループを昇順または降順でソートするかどうかを設定するオプションも公開します。デフォルトでは、ソート順序は、昇順に設定されています。

<igc-combo group-sorting="desc"></igc-combo>

ラベル

Combo ラベルは、Label プロパティを使用して簡単に設定できます。

<igc-combo label="Cities"></igc-combo>

プレースホルダー

コンボボックス コンポーネント入力とドロップダウン メニュー内に配置された検索入力の両方に、プレースホルダー テキストを指定できます。

<igc-combo placeholder="Pick a city" placeholder-search="Search for a city"></igc-combo>

オートフォーカス

コンボボックスをページの読み込みに自動的にフォーカスさせたい場合は、次のコードを使用できます。

<igc-combo autofocus></igc-combo>

検索入力のフォーカス

コンボボックスの検索入力はデフォルトでフォーカスされています。この機能を無効にしてフォーカスをオプションのリストに移動するには、以下に示すように AutofocusList プロパティを使用します。

<igc-combo autofocus-list></igc-combo>

必須

required プロパティを設定することで、コンボボックスを必須としてマークできます。

<igc-combo required></igc-combo>

コンボボックスを無効にする

Disabled プロパティを使用してコンボボックスを無効にできます。

<igc-combo disabled></igc-combo>

API リファレンス

その他のリソース

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