콤보박스 템플릿
Ignite UI for Angular 머리글, 바닥글, 항목, 빈 목록 및 추가 버튼과 같은 다양한 영역에 대한 사용자 정의 템플릿을 정의할 수 있습니다.
Angular ComboBox Templates Example
Usage
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 {}
Template Types
콤보박스 템플릿을 정의할 때 다음과 같은 미리 정의된 참조 이름을 사용하여 참조해야 합니다.
Item template
선택기 [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>
Header Item template
선택기 [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>
Header template
선택기 [igxComboHeader]
사용:
<igx-combo>
<ng-template igxComboHeader>
<div class="header-class">State - Region</div>
</ng-template>
</igx-combo>
Footer template
선택기 [igxComboFooter]
사용:
<igx-combo>
<ng-template igxComboFooter>
<div class="footer-class">Infragistics 2018</div>
</ng-template>
</igx-combo>
Empty template
선택기 [igxComboEmpty]
사용:
<igx-combo>
<ng-template igxComboEmpty>
<span class="empty-class">No available states</span>
</ng-template>
</igx-combo>
Add template
선택기 [igxComboAddItem]
사용:
<igx-combo>
<ng-template igxComboAddItem>
<button igxButton="flat">
Add Location
</button>
</ng-template>
</igx-combo>
Toggle Icon Template
선택기 [igxComboToggleIcon]
사용:
<igx-combo>
<ng-template igxComboToggleIcon let-collapsed>
<igx-icon>{{ collapsed ? 'expand_more' : 'expand_less'}}</igx-icon>
</ng-template>
</igx-combo>
Clear Icon Template
선택기 [igxComboClearIcon]
사용:
<igx-combo>
<ng-template igxComboClearIcon>
<igx-icon>cancel</igx-icon>
</ng-template>
</igx-combo>
Templating ComboBox Input
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 Summary
Additional Resources
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.
에서 페이지 보기
GitHub