Blazor ComboBox Templates

    Ignite UI for Blazor 하면 항목, 그룹 헤더, 빈 목록, 아이콘 등 다양한 영역에 대한 사용자 정의 템플릿을 정의할 수 있습니다.

    ComboBox Templates Example

    Template Types

    Item Template

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

    Blazor 앱에서 항목을 템플릿화하려면 별도의 JavaScript 파일에 템플릿을 정의해야 합니다. wwwroot 디렉토리 아래에 templates.js 라는 새 파일을 만들어 보겠습니다.

    이 파일에서 다음과 같이 새 항목 템플릿을 선언할 수 있습니다.

    ​wwwroot 아래의 index.html에 templates.js 파일을 포함해야 합니다.

    그런 다음 애플리케이션에서 ItemTemplateScript 속성을 통해 선언한 템플릿을 참조할 수 있습니다.

    <IgbCombo ItemTemplateScript="ComboItemTemplate"></IgbCombo>

    Group Header Template

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

    그런 다음 애플리케이션에서 GroupHeaderTemplateScript 속성을 통해 선언한 템플릿을 참조할 수 있습니다.

    <IgbCombo GroupHeaderTemplateScript="ComboGroupHeaderTemplate"></IgbCombo>

    Slots

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

    Header Slot

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

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

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

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

    Empty List Slot

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

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

    Toggle Icon Slot

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

    <IgbCombo> 
    <IgbIcon name="down" slot="toggle-icon"></IgbIcon>
</IgbCombo>

    Clear Icon Slot

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

    <IgbCombo> 
    <IgbIcon name="clear" slot="clear-icon"></IgbIcon>
</IgbCombo>

    Additional Resources