React ComboBox Templates

    El componente Ignite UI for React ComboBox permite definir plantillas personalizadas para diferentes áreas, como elementos, encabezados de grupo, listas vacías e íconos.

    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.

    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

    EsgroupHeaderTemplate una plantilla personalizada que, si está definida, debería usarse al renderizar cabeceras de grupo en la lista de opciones.

    <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

    Además de las plantillas personalizadas, el componente Ignite UI for React ComboBox 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:

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

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

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

    Empty List Slot

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

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

    Toggle Icon Slot

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

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

    Clear Icon Slot

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

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

    Additional Resources