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

    EsitemTemplate una plantilla personalizada que, si está definida, debería usarse al renderizar 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

    EsgroupHeaderTemplate una plantilla personalizada que, si está definida, debería usarse al renderizar cabeceras 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 renderizar un encabezado personalizado por encima de la lista de opciones, pasa contenido a laheader ranura:

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

    Para renderizar un pie de página personalizado debajo de la lista de opciones, pasa contenido a lafooter ranura:

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

    Empty List Slot

    Para renderizar un contenido personalizado cuando la operación de filtrado no devuelve ningún resultado, utiliza laempty ranura:

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

    Toggle Icon Slot

    El icono de alternancia en la entrada de combo también puede modificarse mediante latoggle-icon ranura:

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

    Clear Icon Slot

    El icono de despejar puede cambiarse mediante laclear-icon ranura:

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

    API Reference

    Additional Resources