ComboBox (コンボボックス) テンプレート
Ignite UI for Angular ComboBox コンポーネントでは、ヘッダー、フッター、項目、空のリスト、追加ボタンなどのさまざまな領域にカスタム テンプレートを定義できます。
Angular コンボボックス テンプレートの例
使用方法
ComboBox コンポーネントを初期化にするには、まず IgxComboModule を app.module.ts ファイルにインポートします。
import { IgxComboModule } from 'igniteui-angular/combo';
// import { IgxComboModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
imports: [
...
IgxComboModule,
...
]
})
export class AppModule {}テンプレート タイプ
コンボボックスのテンプレートを定義する場合、定義済みの参照名を使用して参照してください。
項目テンプレート
セレクター [igxComboItem] の使用:
<igx-combo #templateCombo [data]="lData" [valueKey]="'field'" >
<ng-template igxComboItem let-display let-key="valueKey">
<div class="item">
<span class="state">{{ display[key] }}</span>
<span class="region">{{ display.region }}</span>
</div>
</ng-template>
</igx-combo>ヘッダー項目テンプレート
[igxComboHeaderItem] セレクターを使用します。
<igx-combo #templateCombo [data]="lData" [groupKey]="'region'">
<ng-template igxComboHeaderItem let-display let-key="groupKey">
<div class="header-item">Region: {{ display[key] }}</div>
</ng-template>
</igx-combo>ヘッダー テンプレート
セレクター [igxComboHeader] の使用:
<igx-combo>
<ng-template igxComboHeader>
<div class="header-class">State - Region</div>
</ng-template>
</igx-combo>フッター テンプレート
セレクター [igxComboFooter] の使用:
<igx-combo>
<ng-template igxComboFooter>
<div class="footer-class">Infragistics 2018</div>
</ng-template>
</igx-combo>空のテンプレート
セレクター [igxComboEmpty] の使用:
<igx-combo>
<ng-template igxComboEmpty>
<span class="empty-class">No available states</span>
</ng-template>
</igx-combo>テンプレートの追加
セレクター [igxComboAddItem] の使用:
<igx-combo>
<ng-template igxComboAddItem>
<button igxButton="flat">
Add Location
</button>
</ng-template>
</igx-combo>トグル アイコン テンプレート
セレクター [igxComboToggleIcon] の使用:
<igx-combo>
<ng-template igxComboToggleIcon let-collapsed>
<igx-icon>{{ collapsed ? 'expand_more' : 'expand_less'}}</igx-icon>
</ng-template>
</igx-combo>このコンポーネントはマテリアル アイコンを使用します。index.html に次のリンクを追加してください: <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
クリア アイコン テンプレート
セレクター [igxComboClearIcon] の使用:
<igx-combo>
<ng-template igxComboClearIcon>
<igx-icon>cancel</igx-icon>
</ng-template>
</igx-combo>コンボボックス入力のテンプレート化
テンプレートで使用した場合、igxComboClearIcon および igxComboToggleIcon セレクターがコンボボックス入力での各ボタンの表示方法を変更します。igx-combo 内のコンテンツを渡すと、igx-input-group をテンプレート化する方法 (igx-prefix、igx-suffix、igxLabel を使用) と同様に、コンボボックス入力のテンプレート化も可能になります。以下のコード スニペットは、適切なラベルやプレフィックスをコンボボックスに追加する方法を示します。
<igx-combo>
<label igxLabel>Locations</label>
<igx-prefix><igx-icon>pin_drop</igx-icon></igx-prefix>
</igx-combo>API リファレンス
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。