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

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

    コンボボックス機能の例

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    このサンプルが気に入りましたか? 完全な Ignite UI for Web Componentsツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

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

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

defineComponents(IgcComboComponent, IgcSwitchComponent);
ts
    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;
});
ts

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

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

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

    機能

    フィルタリング

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

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

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

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

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

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

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

combo.filteringOptions = options;
ts

    グループ化

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

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

    groupKey プロパティは、データ ソースが複雑なオブジェクトで構成されている場合にのみ有効です。

    ソートの方向

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

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

    ラベル

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

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

    プレースホルダー

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

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

    オートフォーカス

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

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

    検索入力のフォーカス

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

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

    必須

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

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

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

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

    <igc-combo disabled></igc-combo>
html
    Ignite UI for Web Components | CTA Banner

    API リファレンス

    その他のリソース