Web Components ComboBox Templates

    O componente ComboBox Ignite UI for Web Components permite definir modelos personalizados para diferentes áreas, como itens, cabeçalhos de grupo, lista vazia e ícones.

    ComboBox Templates Example

    Template Types

    Item Template

    ÉitemTemplate um template personalizado que, se definido, deve ser usado ao renderizar itens na lista de opções.

    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 um template personalizado que, se definido, deve ser usado ao renderizar cabeçalhos de grupo na lista de opções.

    import { ComboItemTemplate } from 'igniteui-webcomponents';

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

combo.groupHeaderTemplate = groupHeaderTemplate;

    Slots

    Além de modelos personalizados, o componente ComboBox Ignite UI for Web Components expõe vários slots que permitem aos usuários passar conteúdo personalizado para diferentes partes de combinação.

    Header Slot

    Para renderizar um cabeçalho personalizado acima da lista de opções, passe conteúdo para oheader slot:

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

    Para renderizar um rodapé personalizado abaixo da lista de opções, passe conteúdo para ofooter slot:

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

    Empty List Slot

    Para renderizar um conteúdo personalizado quando a operação de filtragem não retorna resultado, use oempty slot:

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

    Toggle Icon Slot

    O ícone de alternância na entrada do combo também pode ser modificado pelotoggle-icon slot:

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

    Clear Icon Slot

    O ícone de clear pode ser alterado peloclear-icon slot:

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

    API Reference

    Additional Resources