React ComboBox Templates

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

ComboBox Templates Example

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>

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

Slots

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

Header Slot

옵션 목록 위에 커스텀 헤더를 렌더링하려면, 콘텐츠를 슬롯에header 전달하세요:

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

옵션 목록 아래에 커스텀 푸터를 렌더링하려면 해당 슬롯에footer 콘텐츠를 전달하세요:

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

Empty List Slot

필터링 작업이 결과를 반환하지 않을 때 맞춤 콘텐츠를 렌더링하려면, 다음 슬롯을 사용하세요empty:

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

Toggle Icon Slot

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

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

Clear Icon Slot

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

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