Web Components ComboBox Templates

    El componente Ignite UI for Web Components ComboBox permite definir plantillas personalizadas para diferentes áreas, como elementos, encabezados de grupo, listas vacías e iconos.

    ComboBox Templates Example

    Template Types

    Item Template

    ​itemTemplate es una plantilla personalizada que, si se define, debe usarse al representar elementos en la lista de opciones.

    import { ComboItemTemplate } from 'igniteui-webcomponents';

const itemTemplate: ComboItemTemplate<City> = ({ item }) => {
  return html`
      <span><b>${item.name}</b> [${item.id}]</span>
  `;
};

combo.itemTempate = itemTemplate;

    Group Header Template

    ​groupHeaderTemplate es una plantilla personalizada que, si se define, debe usarse al representar encabezados de grupo en la lista de opciones.

    import { ComboItemTemplate } from 'igniteui-webcomponents';

const groupHeaderTemplate: ComboItemTemplate<City> = ({ item }) => {
  return html`<div>Country of ${item.country}</div>`;
};

combo.groupHeaderTemplate = groupHeaderTemplate;

    Slots

    Además de las plantillas personalizadas, el componente ComboBox de Ignite UI for Web Components expone varias ranuras que permiten a los usuarios pasar contenido personalizado a diferentes partes del combo.

    Header Slot

    Para representar un encabezado personalizado encima de la lista de opciones, pase el contenido a la ranura del header:

    <igc-combo>
  <div slot="header">Custom header content</div>
</igc-combo>

    Para representar un pie de página personalizado debajo de la lista de opciones, pase el contenido a la ranura del pie footer:

    <igc-combo>
  <div slot="footer">Custom footer content</div>
</igc-combo>

    Empty List Slot

    Para representar un contenido personalizado cuando la operación de filtrado no devuelve ningún resultado, utilice el espacio empty:

    <igc-combo>
  <div slot="empty">¯\_(ツ)_/¯</div>
</igc-combo>

    Toggle Icon Slot

    El ícono de alternancia en la entrada combinada también se puede modificar a través de la ranura toggle-icon:

    <igc-combo>
  <igc-icon name="down" slot="toggle-icon"></igc-icon>
</igc-combo>

    Clear Icon Slot

    El ícono de borrar se puede cambiar a través de la ranura clear-icon:

    <igc-combo>
  <igc-icon name="clear" slot="clear-icon"></igc-icon>
</igc-combo>

    API Reference

    Additional Resources