Angular Select の概要
Angular Material Select は、データ入力とデータ表示に使用されるフォーム コントロールであり、ユーザーはいくつかの事前定義された値を含むリストから特定の値を選択できます。Angular Select コンポーネントは、ドロップダウン リストに非常に似ています。Select コンポーネントは、ユーザーがオプションのリストから選択してデータを送信できるフォーム内で使用されますが、DropDown コンポーネント はページのコンテンツをフィルター処理またはソートします。
Ignite UI for Angular Material Select コンポーネントは、ドロップダウンに配置された項目のリストからの単一選択できます。このマテリアルベースのフォームコントロールは、単一または複数の文字の一致に基づいて、選択などの迅速な項目リスト ナビゲーションを提供します。IgxSelectComponent は IgxDropDownComponent を拡張するため、Select インスタンスですべての Drop Down イベントを処理できます。
Angular Select の例
以下は基本的な Angular Select の例です。クリックごとに開く、いくつかの選択肢のリストを表示するシンプルなコンテキスト メニューがあります。
Ignite UI で Angular Select を使用する方法
Ignite UI for Angular Select コンポーネントを初期化にするには、まず IgxSelectModule を app.module ファイルにインポートします。
// app.module.ts
...
import { IgxSelectModule } from 'igniteui-angular';
// import { IgxSelectModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
...
imports: [..., IgxSelectModule],
...
})
export class AppModule {}
次に選択する項目のリストと共に igx-select
を追加します。igx-select-item
を使用して、igx-select
に含まれる項目を表示します。
<igx-select>
<label igxLabel>Simple Select</label>
<igx-select-item value="Orange">Orange</igx-select-item>
<igx-select-item value="Apple">Apple</igx-select-item>
<igx-select-item value="Banana">Banana</igx-select-item>
<igx-select-item value="Mango">Mango</igx-select-item>
</igx-select>
その他 *ngFor 構造ディレクティブに表示したい項目のコレクションを使用する方法があります。
public items: string[] = ['Orange', 'Apple', 'Banana', 'Mango'];
<igx-select [(ngModel)]="selected">
<label igxLabel>Simple Select</label>
<igx-select-item *ngFor="let item of items" [value]="item">
{{item}}
</igx-select-item>
</igx-select>
デフォルトでは、Select コンポーネントは入力フィールドの item 要素の innerText
を使用します。複雑な項目テンプレートの場合、text
プロパティを明示的に設定して、項目が選択された場合入力フィールドに何を表示するかを指定できます。例:
<igx-select>
<igx-select-item *ngFor="let item of items" [value]="item.value" [text]="item.text">
{{item.text}} ( {{item.count}} )
</igx-select-item>
</igx-select>
より複雑な項目テンプレートで text
プロパティを確認するには、以下のグループ化サンプル グループ選択を参照してください。
入力プロパティ
Select コンポーネントは、入力グループに適用可能な次のディレクティブをサポートしています。
igxLabel
- Angular Select 入力とのリンクはaria-labelledby
を介して自動的に処理されるため、for
プロパティを設定する必要はありません。igx-prefix
/igxPrefix
igx-suffix
/igxSuffix
- 組み込みのトグル ボタンサフィックスが常に最後に表示されることに注意してください。igx-hint
/igxHint
<igx-select [(ngModel)]="selected">
<label igxLabel>Pick a fruit</label>
<igx-prefix>
<span class="bio-prefix">BIO</span>
</igx-prefix>
<igx-suffix *ngIf="selected">
<igx-icon (click)="clearSelection($event)">clear</igx-icon>
</igx-suffix>
<igx-hint>Choose a banana</igx-hint>
<igx-select-item *ngFor="let item of items" [value]="item">
{{item}}
</igx-select-item>
</igx-select>
Note
Select コンポーネントに placeholder
が指定されておらず、選択も行われていない場合、igxLabel
は遷移し、プレースホルダーが適切な場所に表示されます。
選択項目のグループ化
項目グループを視覚的に分離するために、Select コンポーネントは、項目を <igx-select-item-group>
にラップすることで項目のグループ化をサポートします。
これは、コンポーネントを宣言するために反復可能な階層データに適しています。以下の例では、各グループには label
と items
のコレクションがあります。
public greengrocery: Array<{ label: string, items: Array<{ type: string, origin: string }> }> = [
{ label: 'Fruits', items: [
{ type: 'Apple', origin: 'local' },
{ type: 'Orange', origin: 'import' },
{ type: 'Banana', origin: 'import'}
]
},
{ label: 'Vegetables', items: [
{ type: 'Cucumber', origin: 'local' },
{ type: 'Potato', origin: 'import' },
{ type: 'Pepper', origin: 'local' }
]
}
];
次にテンプレート ファイルでこれらのオブジェクトを反復して項目へ適切にアクセスします。
<igx-select #select>
<label igxLabel>Select With Groups</label>
<igx-select-item-group *ngFor="let group of greengrocery" [label]="group.label">
<igx-select-item *ngFor="let item of group.items" [value]="item.type" [text]="item.type">
{{item.type}}
<igx-icon
title="Local product"
*ngIf="item.origin === 'local'; else templateImport"
>local_shipping</igx-icon>
<ng-template #templateImport>
<igx-icon title="Import product">flight</igx-icon>
</ng-template>
</igx-select-item>
</igx-select-item-group>
</igx-select>
ヘッダーとフッター
現在 Select コンポーネントにデフォルトのヘッダーとフッターのテンプレートはありません。ただし、ヘッダーまたはフッター テンプレートを追加するには、igxSelectHeader
または igxSelectFooter
でそれぞれマークします。これらはカスタム テンプレートであるため、スタイル設定も定義する必要があります。
以下の例では、ヘッダーとフッターの両方の ng テンプレートが定義されています。ヘッダーには、igx-buttongroup
で実装された基本的なフィルタリングがあります。フッターには、配信方法に基づいて、すべての項目の静的な集計が含まれます。
<igx-select>
<label igxLabel>Pick your fruit</label>
<igx-select-item *ngFor="let fruit of fruits" [value]="fruit.type" [text]="fruit.type" [ngSwitch]="fruit.delivery">
{{fruit.type}}
<igx-icon *ngSwitchCase="'flight'">flight</igx-icon>
<igx-icon *ngSwitchCase="'train'">train</igx-icon>
<igx-icon *ngSwitchCase="'boat'">directions_boat</igx-icon>
</igx-select-item>
<ng-template igxSelectHeader>
<div class="custom-select-header">
<span class="sample-template-heading">DELIVERY METHOD</span>
<igx-buttongroup (click)="filter($event.target.title)">
<button igxButton title="flight"><igx-icon title="flight">flight</igx-icon></button>
<button igxButton title="train"><igx-icon title="train">train</igx-icon></button>
<button igxButton title="boat"><igx-icon title="boat">directions_boat</igx-icon></button>
</igx-buttongroup>
</div>
</ng-template>
<ng-template igxSelectFooter>
<div class="custom-select-footer">
<span class="sample-template-heading">TOTAL</span>
<div class="sample-template-icons">
<span class="sample-template-icons__item">
<igx-icon
title="flight"
[class.important-icon]="selected === 'flight'"
>flight</igx-icon>
{{flightCount}}
</span>
<span class="sample-template-icons__item">
<igx-icon
title="train"
[class.important-icon]="selected === 'train'"
>train</igx-icon>
{{trainCount}}
</span>
<span class="sample-template-icons__item">
<igx-icon
title="boat"
[class.important-icon]="selected === 'boat'"
>directions_boat
</igx-icon>
{{boatCount}}
</span>
</div>
</div>
</ng-template>
</igx-select>
Angular Select のカスタム切り替えボタン
igxSelectToggleIcon
ディレクティブを使用するか、あるいは toggleIconTemplate
プロパティに TemplateRef
を設定して、デフォルトの切り替えボタンをカスタマイズできます。
<igx-select #select>
...
<ng-template igxSelectToggleIcon let-collapsed>
<igx-icon>{{ collapsed ? 'add_circle' : 'add_circle_outline'}}</igx-icon>
</ng-template>
...
<igx-select>
キーボード ナビゲーション
- 選択がフォーカスされているときに
Space
、Enter
、またはALT + 上矢印/下矢印
キーをクリックして、igx-select
を開きます。 ALT + 上矢印/下矢印
の組み合わせ、またはEnter
、Space
、Esc
、Tab
キーのいずれかを使用して、igx-select
を閉じます。上矢印/下矢印
キーを使用して項目間を移動します。Home
またはEnd
キーを使用して、リストの最初と最後の項目へ移動します。- 特定の文字で始まるリスト項目を移動するには、対応するキーを押します。
- 必要な項目の最初の数文字を入力してすばやく特定の項目に移動できます。
Enter
キーまたはSpace
キーを使用して項目を選択します。
Note
igx-select
は項目の単一選択のみをサポートします。
カスタム オーバーレイ設定
カスタム OverlaySettings
を作成できます。テンプレートを以下のように定義します。
<igx-select [overlaySettings]="customOverlaySettings">
<igx-select-item *ngFor="let item of items">
{{item}}
</igx-select-item>
</igx-select>
overlaySettings
プロパティがカスタム設定にバインドされます。
クラスの内側に以下のようなコードがあります。
export class MyClass implements OnInit {
@ViewChild(IgxSelectComponent)
public select: IgxSelectComponent;
public items: string[] = ['Orange', 'Apple', 'Banana', 'Mango', 'Tomato'];
public customOverlaySettings: OverlaySettings;
public ngOnInit(): void {
const positionSettings: PositionSettings = {
closeAnimation: scaleOutBottom,
horizontalDirection: HorizontalAlignment.Right,
horizontalStartPoint: HorizontalAlignment.Left,
openAnimation: scaleInTop,
verticalDirection: VerticalAlignment.Bottom,
verticalStartPoint: VerticalAlignment.Bottom
};
this.customOverlaySettings = {
target: this.select.inputGroup.element.nativeElement,
positionStrategy: new ConnectedPositioningStrategy(
positionSettings
),
scrollStrategy: new AbsoluteScrollStrategy()
};
}
}
ConnectedPositioningStrategy に直接渡す PositionSettings オブジェクトを作成しましたが必須ではありません。ただし、カスタム ポジショニングを定義するためにストラテジのデフォルト設定をオーバーライドします。
- ngOnInit フックの内側にすべて設定できます。コンポーネントの生成時にテンプレートに自動的に反映します。
テンプレートを以下のようにカスタマイズされた OverlaySettings オブジェクトを IgxSelectComponent の open 関数に渡すこともできます。
<igx-select>
<igx-select-item *ngFor="let item of items">
{{item}}
</igx-select-item>
</igx-select>
<button (click)="onClick($event)"></button>
クラスには以下があります。
export class MyClass implements OnInit {
/* -- */
private otherCustomOverlaySettings: OverlaySettings = {
positionStrategy: new GlobalPositionStrategy(),
scrollStrategy: new AbsoluteScrollStrategy()
}
onClick(event: MouseEvent): void {
this.select.open(this.otherCustomOverlaySettings)
}
/* -- */
}
Note
テンプレートと同様に関数 open
の引数としてカスタム設定を渡す場合、igx-select
は関数 open
で提供されるものを使用します。ただし、opening
または opened
などのインターナル イベントにバインドした場合は、igx-select
はテンプレートの設定を使用します。
スタイル設定
各コンポーネントには独自のテーマがあります。
Select のスタイルを設定するには、それに含まれるコンポーネントのスタイルを設定します。この場合、input-group-theme と drop-down-theme の両方を使用する必要があります。
これら 2 つのコンポーネントのスタイル設定については、Input Group
および Drop Down
のスタイル設定セクションを参照してください。
Note
IgxSelectComponent は、IgxOverlay を使用して、igx-select-items
リスト コンテナーを保持および表示します。スタイルを適切にスコープするには、OverlaySetting.outlet を使用してください。詳細については、IgxOverlay スタイル ガイド
を確認してください。
API リファレンス
- IgxSelectComponent
- IgxSelectItemComponent
- IgxDropDownComponent
- IgxDropDownItemComponent
- OverlaySettings
- ConnectedPositioningStrategy
- GlobalPositionStrategy
- AbsoluteScrollStrategy
- PositionSettings
テーマの依存関係
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。