React ComboBox Templates

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

ComboBox 템플릿 예

이 샘플이 마음에 드시나요? Ignite UI for React 전체에 액세스하고 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

템플릿 유형

아이템 템플릿

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

<IgrCombo
    valueKey="id"
    displayKey="name"
    groupKey="country"
    data={cities}
    itemTemplate={renderItemTemplate}
></IgrCombo>

function renderItemTemplate(props: { dataContext: any}): any {
    return (
      <span><b>{props.dataContext.name}</b> [{props.dataContext.id}]</span>
    );
}
tsx

그룹 헤더 템플릿

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

<IgrCombo
    valueKey="id"
    displayKey="name"
    groupKey="country"
    data={cities}
    groupHeaderTemplate={renderGroupHeaderTemplate}
></IgrCombo>

function renderGroupHeaderTemplate(props: { dataContext: any}): any {
    return (
    <span>Country of {props.dataContext.country}</span>
    );
}
tsx

슬롯

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

헤더 슬롯

옵션 목록 위에 사용자 정의 헤더를 렌더링하려면 컨텐츠를 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 슬롯을 사용하세요.

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

토글 아이콘 슬롯

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

<IgrCombo>
  <span slot="toggle-icon">
    <IgbIcon name="down"></IgbIcon>
  </span>
</IgrCombo>
tsx

아이콘 슬롯 지우기

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

<IgrCombo>
  <span slot="clear-icon">
    <IgbIcon name="clear"></IgbIcon>
  </span>
</IgrCombo>
tsx