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

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

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

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

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

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

    Toggle Icon Slot

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

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

    Clear Icon Slot

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

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

    Additional Resources