Combo

igx-combo コンポーネントは、基本的な HTML input、選択機能、Ignite UI for Angular igx-drop-down を組み合わせたコンポーネントです。
Combo コンポーネントは、フィルタリング、項目の複数選択グループ化、ドロップダウン リストにカスタム値 の追加などの機能をサポートします。
カスタム テンプレート は、項目、ヘッダー、フッターなどコンポーネントの異なる領域をカスタマイズするために提供されます。
igx-combo コンポーネントは、テンプレート駆動フォームReactive フォーム を統合したコンポーネントです。
igx-combo は、直感的な キーボード ナビゲーションを公開し、アクセシビリティ規格に準拠しています。
ドロップダウン項目を仮想化することにより、igx-combo を大量の項目を持つデータ ソースにバインドした場合もスムーズにスクロールを行うことができます。

デモ

Warning

Ignite UI for Angular コンポーネントをプロジェクトに追加する前に、必要なすべての依存関係を構成し、プロジェクトのセットアップが正しく完了したことを確認してください。詳細については、インストール トピックをご確認ください。

使用方法

IgxComboComponent は、リストから項目の検索および選択が可能です。コンボは、項目コンテナーとして IgxDropDownComponent を内部使用します。Ignite UI for Angular Combo で作業を開始する前に IgxComboModuleapp.module.ts ファイルにインポートします。

// app.module.ts

...
import { IgxComboModule } from 'igniteui-angular';

@NgModule({
    ...
    imports: [..., IgxComboModule],
    ...
})
export class AppModule {}

次にテンプレートで igx-combo をデータにバインドし、localData データソースのエントリに対応する valueKeydisplayKey を定義します。

<igx-combo [data]="lData" [valueKey]="'ProductID'" [displayKey]="'ProductName'"></igx-combo>
import { localData } from "./local-data";

export class ComboDemo implements OnInit {
    public lData: any[];

    public ngOnInit() {
        this.lData = localData;
    }
}

注: displayKey が省略された場合、代わりに valueKey エンティティが項目テキストとして使用されます。

機能

Combo コンポーネントは以下の機能を公開します。

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

igxCombo が閉じてフォーカスされる場合:

  • ArrowDown または Alt + ArrowDown コンボのドロップダウンを開いて、フォーカスを検索入力に移動します。

igxCombo が開いて検索入力がフォーカスされる場合:

  • ArrowUp または Alt + ArrowUp はコンボのドロップダウンを閉じて、フォーカスを閉じたコンボに移動します。

  • ArrowDown はフォーカスを検索入力から最初のリスト項目に移動します。リストが空でカスタム値が有効にされた場合、「新しい項目の追加」ボタンに移動します。

    注: その他のキーストロークは入力によって処理されます。

igxCombo が開いてリスト項目がフォーカスされる場合:

  • ArrowDown は次のリスト項目に移動します。アクティブ項目がリストの最後の項目で、カスタム値が有効にされた場合、フォーカスは「項目の追加」ボタンに移動します。

  • ArrowUp は以前のリスト項目に移動します。アクティブ項目がリストの最初の項目の場合、フォーカスは検索入力に移動します。

  • End は最後のリスト項目に移動します。

  • Home は最初のリスト項目に移動します。

  • Space はアクティブなリスト項目を選択/選択解除します。

  • Enter は選択した項目を保存してリストを閉じます。

  • Esc はリストを閉じます。

igxCombo が開いて、カスタム値が有効で、「項目の追加」ボタンがフォーカスされる場合:

  • Enter は新しい項目を追加し、valueKey および displayKey を検索入力のテキストに設定して、新しい項目を選択します。

  • ArrowUp はフォーカスを以前のリスト項目に移動します。リストが空の場合、フォーカスを検索入力に移動します。

API

入力

既知の問題

  • 選択した項目を表示するコンボ入力は編集可能ではありませんが、IE および Firefox でカーソルが表示される問題。
  • IE で無効なコンボで BackSpace キーが使用できる問題。
  • Combo は高さのサイズ変更のための入力はありません。 IgxInputGroup は、カスタムのサイズ変更オプションを公開し、IgxCombo は適切なスタイル設定と外観の統一に同じ機能を使用します。

その他のリソース

コミュニティに参加して新しいアイデアをご提案ください。