コンボ テンプレート

    Ignite UI for Angular Combo コンポーネントでは、ヘッダー、フッター、項目、空のリスト、追加ボタンなどのさまざまな領域にカスタム テンプレートを定義できます。

    Angular コンボ テンプレートの例

    使用方法

    Combo コンポーネントを初期化にするには、まず IgxComboModuleapp.module.ts ファイルにインポートします。

    import { IgxComboModule } from 'igniteui-angular';
    
    @NgModule({
        imports: [
            ...
            IgxComboModule,
            ...
        ]
    })
    export class AppModule {}
    

    テンプレート タイプ

    igx-combo のテンプレートを定義する場合、定義済みの参照名を使用して参照してください。

    項目テンプレート

    セレクター [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>
    

    ヘッダー テンプレート

    セレクター [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>
    

    クリア アイコン テンプレート

    セレクター [igxComboClearIcon] の使用:

    <igx-combo>
        <ng-template igxComboClearIcon>
            <igx-icon>cancel</igx-icon>
        </ng-template>
    </igx-combo>
    

    コンボ入力のテンプレート化

    テンプレートで使用した場合、igxComboClearIcon および igxComboToggleIcon セレクターがコンボ入力での各ボタンの表示方法を変更します。igx-combo 内のコンテンツを渡すと、igx-input-group をテンプレート化する方法 (igx-prefixigx-suffixigxLabel を使用) と同様に、コンボ入力のテンプレート化も可能になります。以下のコード スニペットは、適切なラベルやプレフィックスをコンボに追加する方法を示します。

        <igx-combo>
            <label igxLabel>Locations</label>
            <igx-prefix><igx-icon>pin_drop</igx-icon></igx-prefix>
        </igx-combo>
    

    API まとめ

    その他のリソース

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