콤보박스 템플릿

    Ignite UI for Angular 헤더, 푸터, 항목, 빈 목록 및 추가 버튼과 같은 다양한 영역에 대한 사용자 정의 템플릿을 정의할 수 있습니다.

    Angular ComboBox 템플릿 예제

    EXAMPLE
    TS
    HTML
    SCSS

    이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.

    용법

    ComboBox 구성 요소를 시작하려면 먼저 IgxComboModule 당신의 app.module.ts 파일:

    import { IgxComboModule } from 'igniteui-angular';
    // import { IgxComboModule } from '@infragistics/igniteui-angular'; for licensed package
    
    @NgModule({
        imports: [
            ...
            IgxComboModule,
            ...
        ]
    })
    export class AppModule {}
    typescript

    템플릿 유형

    콤보박스 템플릿을 정의할 때 다음과 같은 미리 정의된 참조 이름을 사용하여 참조해야 합니다.

    아이템 템플릿

    선택기 [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>
    html

    헤더 항목 템플릿

    선택기 [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>
    html

    헤더 템플릿

    선택기 [igxComboHeader] 사용:

    <igx-combo>
        <ng-template igxComboHeader>
            <div class="header-class">State - Region</div>
        </ng-template>
    </igx-combo>
    html

    선택기 [igxComboFooter] 사용:

    <igx-combo>
        <ng-template igxComboFooter>
            <div class="footer-class">Infragistics 2018</div>
        </ng-template>
    </igx-combo>
    html

    빈 템플릿

    선택기 [igxComboEmpty] 사용:

    <igx-combo>
        <ng-template igxComboEmpty>
            <span class="empty-class">No available states</span>
        </ng-template>
    </igx-combo>
    html

    템플릿 추가

    선택기 [igxComboAddItem] 사용:

    <igx-combo>
        <ng-template igxComboAddItem>
            <button igxButton="flat">
                Add Location
            </button>
        </ng-template>
    </igx-combo>
    html

    토글 아이콘 템플릿

    선택기 [igxComboToggleIcon] 사용:

    <igx-combo>
        <ng-template igxComboToggleIcon let-collapsed>
            <igx-icon>{{ collapsed ? 'expand_more' : 'expand_less'}}</igx-icon>
        </ng-template>
    </igx-combo>
    html

    아이콘 템플릿 지우기

    선택기 [igxComboClearIcon] 사용:

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

    ComboBox 입력 템플릿 지정

    igxComboClearIconigxComboToggleIcon 선택기와 같은 템플릿과 함께 사용하면 콤보 상자 입력에 해당 버튼이 표시되는 방식이 변경됩니다. igx-combo 내부에 콘텐츠를 전달하면 igx-input-group 템플릿화할 수 있는 방식과 유사한 콤보박스 입력 템플릿화를 허용합니다(igx-prefix, igx-suffixigxLabel 사용). 아래 코드 조각은 콤보 상자 입력에 적절한 레이블과 접두사를 추가하는 방법을 보여줍니다.

    <igx-combo>
        <label igxLabel>Locations</label>
        <igx-prefix><igx-icon>pin_drop</igx-icon></igx-prefix>
    </igx-combo>
    html
    App Builder | CTA 배너

    API 요약

    추가 리소스

    우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.