React ComboBox Templates

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

    ComboBox Templates Example

    EXAMPLE
    DATA
    TSX
    CSS
    Edit in:

    Template Types

    Item Template

    정의된 itemTemplate 경우 옵션 목록에서 항목을 렌더링할 때 사용해야 하는 사용자 지정 템플릿입니다.

    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>
tsx

    Group Header Template

    정의된 groupHeaderTemplate 경우 옵션 목록에서 그룹 헤더를 렌더링할 때 사용해야 하는 사용자 지정 템플릿입니다.

    <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>
  );
}
tsx

    Slots

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

    Header Slot

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

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

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

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

    Empty List Slot

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

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

    Toggle Icon Slot

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

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

    Clear Icon Slot

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

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

    Additional Resources