Plantillas de cuadros combinados
El componente ComboBox Ignite UI for Angular permite definir plantillas personalizadas para diferentes áreas, como encabezado, pie de página, elementos, lista vacía y botón de agregar.
Angular Ejemplo de plantillas de ComboBox
¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Angular completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Uso
Para comenzar con el componente ComboBox, primero debe importar IgxComboModule
en su archivo app.module.ts:
import { IgxComboModule } from 'igniteui-angular';
// import { IgxComboModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
imports: [
...
IgxComboModule,
...
]
})
export class AppModule {}
typescript
Tipos de plantillas
Al definir plantillas de cuadros combinados, debe hacer referencia a ellas utilizando los siguientes nombres de referencia predefinidos:
Plantilla de artículo
Utilice el selector [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
Plantilla de elemento de encabezado
Utilice el selector [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
Plantilla de encabezado
Utilice el selector [igxComboHeader]
:
<igx-combo>
<ng-template igxComboHeader>
<div class="header-class">State - Region</div>
</ng-template>
</igx-combo>
html
Plantilla de pie de página
Utilice el selector [igxComboFooter]
:
<igx-combo>
<ng-template igxComboFooter>
<div class="footer-class">Infragistics 2018</div>
</ng-template>
</igx-combo>
html
Plantilla vacía
Utilice el selector [igxComboEmpty]
:
<igx-combo>
<ng-template igxComboEmpty>
<span class="empty-class">No available states</span>
</ng-template>
</igx-combo>
html
Agregar plantilla
Utilice el selector [igxComboAddItem]
:
<igx-combo>
<ng-template igxComboAddItem>
<button igxButton="flat">
Add Location
</button>
</ng-template>
</igx-combo>
html
Alternar plantilla de icono
Utilice el selector [igxComboToggleIcon]
:
<igx-combo>
<ng-template igxComboToggleIcon let-collapsed>
<igx-icon>{{ collapsed ? 'expand_more' : 'expand_less'}}</igx-icon>
</ng-template>
</igx-combo>
html
Borrar plantilla de icono
Utilice el selector [igxComboClearIcon]
:
<igx-combo>
<ng-template igxComboClearIcon>
<igx-icon>cancel</igx-icon>
</ng-template>
</igx-combo>
html
Plantillas de entrada de cuadro combinado
Cuando se usan con plantillas, los selectores igxComboClearIcon
y igxComboToggleIcon
, cambian la forma en que aparecen los botones respectivos en la entrada del cuadro combinado. Pasar contenido dentro del igx-combo
también permite crear plantillas para la entrada del cuadro combinado de manera similar a la forma en que se puede crear una plantilla para un igx-input-group
(usando igx-prefix
, igx-suffix
e igxLabel
). El siguiente fragmento de código ilustra cómo agregar una etiqueta y un prefijo apropiados a la entrada del cuadro combinado:
<igx-combo>
<label igxLabel>Locations</label>
<igx-prefix><igx-icon>pin_drop</igx-icon></igx-prefix>
</igx-combo>
html
Resumen de API
Recursos adicionales
- Componente de cuadro combinado
- Funciones del cuadro combinado
- Enlace remoto de ComboBox
- Integración de formularios basados en plantillas
- Integración de formularios reactivos
- Cuadro combinado de selección única
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.