Web Components ComboBox Templates

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

    ComboBox Templates Example

    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;

    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;

    Slots

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

    Header Slot

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

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

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

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

    Empty List Slot

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

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

    Toggle Icon Slot

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

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

    Clear Icon Slot

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

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

    API Reference

    Additional Resources