React ComboBox Templates

    O componente ComboBox Ignite UI for React 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.

    type City = {
  name: string;
  id: string;
  country: string;
};

const renderItemTemplate = (args: ComboTemplateProps<City>) => {
  const item = args.item;

  return (
    <span>
      <b>{item.name}</b> [{item.id}] - {item.country}
    </span>
  );
};

<IgrCombo
    valueKey="id"
    displayKey="name"
    groupKey="country"
    data={Cities}
    itemTemplate={renderItemTemplate}
></IgrCombo>

    Group Header Template

    ÉgroupHeaderTemplate um template personalizado que, se definido, deve ser usado ao renderizar cabeçalhos de grupo na lista de opções.

    <IgrCombo
    valueKey="id"
    displayKey="name"
    groupKey="country"
    data={cities}
    groupHeaderTemplate={renderGroupHeaderTemplate}
></IgrCombo>

const renderGroupHeaderTemplate = (args: ComboTemplateProps<City>) => {
  return (
  <span>Country of {args.item.country}</span>
  );
}

    Slots

    Além de modelos personalizados, o componente ComboBox Ignite UI for React 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:

    <IgrCombo>
  <header slot="header">
        Header content goes here
  </header>
</IgrCombo>

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

    <IgrCombo>
  <footer slot="footer">
        Footer content goes here
  </footer>
</IgrCombo>

    Empty List Slot

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

    <IgrCombo>
  <div slot="empty">¯\_(ツ)_/¯</div>
</IgrCombo>

    Toggle Icon Slot

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

    <IgrCombo>
  <span slot="toggle-icon">
    <IgrIcon name="down" collection="material"></IgrIcon>
  </span>
</IgrCombo>

    Clear Icon Slot

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

    <IgrCombo>
  <span slot="clear-icon">
    <IgrIcon name="clear" collection="material"></IgrIcon>
  </span>
</IgrCombo>

    Additional Resources