Web Components ComboBox Templates

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

    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 ComboBox 구성 요소는 사용자가 사용자 지정 콘텐츠를 다른 콤보 부분에 전달할 수 있는 여러 슬롯을 노출합니다.

    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