Web Components ComboBox Templates

Ignite UI for Web Components ComboBox 구성 요소를 사용하면 항목, 그룹 헤더, 빈 목록 및 아이콘과 같은 다양한 영역에 대한 사용자 지정 템플릿을 정의할 수 있습니다.

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은 정의된 경우 옵션 목록의 항목을 렌더링할 때 사용해야 하는 사용자 정의 템플릿입니다.

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은 정의된 경우 옵션 목록에서 그룹 헤더를 렌더링할 때 사용해야 하는 사용자 정의 템플릿입니다.

import { ComboItemTemplate } from 'igniteui-webcomponents';

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

combo.groupHeaderTemplate = groupHeaderTemplate;
ts

Slots

사용자 지정 템플릿 외에도 Ignite UI for Web Components ComboBox 구성 요소는 사용자가 사용자 지정 콘텐츠를 다른 콤보 부분에 전달할 수 있는 여러 슬롯을 노출합니다.

Header Slot

옵션 목록 위에 사용자 정의 헤더를 렌더링하려면 컨텐츠를 header 슬롯에 전달하십시오.

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

옵션 목록 아래에 사용자 정의 바닥글을 렌더링하려면 콘텐츠를 footer 슬롯에 전달합니다.

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

Empty List Slot

필터링 작업에서 결과가 반환되지 않을 때 사용자 지정 콘텐츠를 렌더링하려면 empty 슬롯을 사용하세요.

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

Toggle Icon Slot

콤보 입력의 토글 아이콘은 toggle-icon 슬롯을 통해 수정할 수도 있습니다.

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

Clear Icon Slot

클리어 아이콘은 clear-icon 슬롯을 통해 변경할 수 있습니다.

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

API Reference

IgcComboComponent