Web Components ComboBox Templates

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

ComboBox Templates Example

import { defineComponents, registerIconFromText, IgcComboComponent, ComboItemTemplate } from "igniteui-webcomponents";
import { html } from "lit-html";
import "igniteui-webcomponents/themes/light/bootstrap.css";
import "./index.css";

interface City {
    id: string;
    name: string;
    country: string;
}

const cities: City[] = [
    { name: "London", id: "UK01", country: "UK" },
    { name: "Manchester", id: "UK02", country: "UK" },
    { name: "Birmingham", id: "UK03", country: "UK" },
    { name: "Glasgow", id: "UK04", country: "UK" },
    { name: "Liverpool", id: "UK05", country: "UK" },
    { name: "New York", id: "US01", country: "USA" },
    { name: "Miami", id: "US02", country: "USA" },
    { name: "Philadelphia", id: "US03", country: "USA" },
    { name: "Chicago", id: "US04", country: "USA" },
    { name: "Springfield", id: "US05", country: "USA" },
    { name: "Los Angeles", id: "US06", country: "USA" },
    { name: "Houston", id: "US07", country: "USA" },
    { name: "Phoenix", id: "US08", country: "USA" },
    { name: "San Diego", id: "US09", country: "USA" },
    { name: "Dallas", id: "US010", country: "USA" },
    { name: "Sofia", id: "BG01", country: "Bulgaria" },
    { name: "Plovdiv", id: "BG02", country: "Bulgaria" },
    { name: "Varna", id: "BG03", country: "Bulgaria" },
    { name: "Burgas", id: "BG04", country: "Bulgaria" },
    { name: "Rome", id: "IT01", country: "Italy" },
    { name: "Milan", id: "IT02", country: "Italy" },
    { name: "Naples", id: "IT03", country: "Italy" },
    { name: "Turin", id: "IT04", country: "Italy" },
    { name: "Palermo", id: "IT05", country: "Italy" },
    { name: "Florence", id: "IT06", country: "Italy" }
];

const toggleIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>';
const clearIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>';

defineComponents(IgcComboComponent);

export class ComboTemplates {
    private combo: IgcComboComponent<City>;
    protected itemTemplate: ComboItemTemplate<City> = ({ item }) => {
        return html` <span><b>${item.name}</b> [${item.id}]</span>`;
    };
    protected groupHeaderTemplate: ComboItemTemplate<City> = ({ item }) => {
        return html`<span>Country of ${item.country}</span>`;
    };

    constructor() {
        registerIconFromText("clear", clearIcon);
        registerIconFromText("down", toggleIcon);

        this.combo = document.getElementById("combo") as IgcComboComponent<City>;
        this.combo.data = cities;
        this.combo.itemTemplate = this.itemTemplate;
        this.combo.groupHeaderTemplate = this.groupHeaderTemplate;
    }
}

new ComboTemplates();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Combo Templates</title>
    <meta charset="UTF-8" />

    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
    <link href="https://static.infragistics.com/xplatform/css/samples/custom-legend.css" rel="stylesheet" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <igc-combo
          id="combo"
          value-key="id"
          display-key="name"
          group-key="country"
        >
          <header slot="header">
            Header content goes here
          </header>
          <igc-icon name="clear" slot="clear-icon"></igc-icon>
          <igc-icon name="down" slot="toggle-icon"></igc-icon>
          <span slot="empty">¯\_(ツ)_/¯</span>
          <footer slot="footer">
            Footer content goes here
          </footer>
        </igc-combo>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>
  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
igc-combo::part(header),
igc-combo::part(footer) {
    padding: 12px 8px;
    text-align: center;
}

igc-combo::part(empty) {
    font-size: 16px;
}css

Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

Template Types

Item Template

itemTemplate es una plantilla personalizada que, si se define, debe usarse al representar elementos en la lista de opciones.

import { ComboItemTemplate } from 'igniteui-webcomponents';

const itemTemplate: ComboItemTemplate<City> = ({ item }) => {
  return html`
      <span><b>${item.name}</b> [${item.id}]</span>
  `;
};

combo.itemTempate = itemTemplate;
ts

Group Header Template

groupHeaderTemplate es una plantilla personalizada que, si se define, debe usarse al representar encabezados de grupo en la lista de opciones.

import { ComboItemTemplate } from 'igniteui-webcomponents';

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

combo.groupHeaderTemplate = groupHeaderTemplate;
ts

Slots

Además de las plantillas personalizadas, el componente ComboBox de Ignite UI for Web Components expone varias ranuras que permiten a los usuarios pasar contenido personalizado a diferentes partes del combo.

Header Slot

Para representar un encabezado personalizado encima de la lista de opciones, pase el contenido a la ranura del header:

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

Para representar un pie de página personalizado debajo de la lista de opciones, pase el contenido a la ranura del pie footer:

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

Empty List Slot

Para representar un contenido personalizado cuando la operación de filtrado no devuelve ningún resultado, utilice el espacio empty:

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

Toggle Icon Slot

El ícono de alternancia en la entrada combinada también se puede modificar a través de la ranura toggle-icon:

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

Clear Icon Slot

El ícono de borrar se puede cambiar a través de la ranura clear-icon:

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

API Reference

IgcComboComponent