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

    O é um modelo personalizado que, itemTemplate 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

    O é um modelo personalizado que, groupHeaderTemplate 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 o conteúdo para o header slot:

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

    Para renderizar um rodapé personalizado abaixo da lista de opções, passe o conteúdo para o footer 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 retornar nenhum resultado, use o empty slot:

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

    Toggle Icon Slot

    O ícone de alternância na entrada de combinação também pode ser modificado através do toggle-icon slot:

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

    Clear Icon Slot

    O ícone de limpeza pode ser alterado através do clear-icon slot:

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

    API Reference

    Additional Resources