Blazor ComboBox Templates

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

ComboBox Templates Example

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;

// required for registering IgniteUIBlazor
using IgniteUI.Blazor.Controls;

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");

            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

            // registering Infragistics Blazor
            builder.Services.AddIgniteUIBlazor(typeof(IgbComboModule));
            builder.Services.AddIgniteUIBlazor(typeof(IgbIconModule));

            await builder.Build().RunAsync();
        }
    }
}cs

using System;
using System.Collections;
using System.Collections.Generic;

namespace Infragistics.Samples
{
    public class City {
        public string Id { get; set; }
        public string Name { get; set; }
        public string Country { get; set; }
    }

    public class SampleData {
        public static List<City> Cities = GetCities();

        public static List<City> GetCities() {
            var data = new List<City> {
                new City {
                    Id = "UK01",
                    Name = "London",
                    Country = "United Kingdom",
                },
                new City {
                    Id = "UK02",
                    Name = "Manchester",
                    Country = "United Kingdom",
                },
                new City {
                    Id = "UK03",
                    Name = "Birmingham",
                    Country = "United Kingdom",
                },
                new City {
                    Id = "UK04",
                    Name = "Glasgow",
                    Country = "United Kingdom",
                },
                new City {
                    Id = "UK05",
                    Name = "Liverpool",
                    Country = "United Kingdom",
                },
                new City {
                    Id = "US01",
                    Name = "New York",
                    Country = "United States of America",
                },
                new City {
                    Id = "US02",
                    Name = "Miami",
                    Country = "United States of America",
                },
                new City {
                    Id = "US03",
                    Name = "Philadelphia",
                    Country = "United States of America",
                },
                new City {
                    Id = "US04",
                    Name = "Chicago",
                    Country = "United States of America",
                },
                new City {
                    Id = "US05",
                    Name = "Springfield",
                    Country = "United States of America",
                },
                new City {
                    Id = "US06",
                    Name = "Los Angeles",
                    Country = "United States of America",
                },
                new City {
                    Id = "US07",
                    Name = "Houston",
                    Country = "United States of America",
                },
                new City {
                    Id = "US08",
                    Name = "Phoenix",
                    Country = "United States of America",
                },
                new City {
                    Id = "US09",
                    Name = "San Diego",
                    Country = "United States of America",
                },
                new City {
                    Id = "US10",
                    Name = "Dallas",
                    Country = "United States of America",
                },
                new City {
                    Id = "BG01",
                    Name = "Sofia",
                    Country = "Bulgaria",
                },
                new City {
                    Id = "BG02",
                    Name = "Plovdiv",
                    Country = "Bulgaria",
                },
                new City {
                    Id = "BG03",
                    Name = "Varna",
                    Country = "Bulgaria",
                },
                new City {
                    Id = "BG04",
                    Name = "Burgas",
                    Country = "Bulgaria",
                },
                new City {
                    Id = "IT01",
                    Name = "Rome",
                    Country = "Italy",
                },
                new City {
                    Id = "IT02",
                    Name = "Milan",
                    Country = "Italy",
                },
                new City {
                    Id = "IT03",
                    Name = "Naples",
                    Country = "Italy",
                },
                new City {
                    Id = "IT04",
                    Name = "Turin",
                    Country = "Italy",
                },
                new City {
                    Id = "IT05",
                    Name = "Palermo",
                    Country = "Italy",
                },
                new City {
                    Id = "IT06",
                    Name = "Florence",
                    Country = "Italy",
                },
            };

            return data;
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<style>
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/

igc-combo::part(header),
igc-combo::part(footer) {
    padding: 12px 8px;
    text-align: center;
}

igc-combo::part(empty) {
    font-size: 16px;
}
</style>
<div class="container sample center">
    <IgbCombo
        T="string"
        Data="Data"
        ValueKey="Id"
        DisplayKey="Name"
        GroupKey="Country"
        ItemTemplateScript="ComboItemTemplate"
        GroupHeaderTemplateScript="ComboGroupHeaderTemplate">
        <header slot="header">
            Header content goes here
        </header>
        <IgbIcon @ref="@iconRef" name="clear" slot="clear-icon"></IgbIcon>
        <IgbIcon name="down" slot="toggle-icon"></IgbIcon>
        <footer slot="footer">
            Footer content goes here
        </footer>
    </IgbCombo>
</div>

@code {
    private List<City> Data;
    private IgbIcon iconRef { get; set; }
    private string toggleIcon = "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M7 10l5 5 5-5z'/></svg>";
    private string clearIcon = "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/></svg>";

    protected override void OnInitialized() {
        this.Data = SampleData.Cities;
    }

    protected override void OnAfterRender(bool firstRender) {
        if (firstRender) {
            this.iconRef.EnsureReady().ContinueWith(new Action<Task>((e) => {
                this.iconRef.RegisterIconFromTextAsync("down", toggleIcon, "default");
                this.iconRef.RegisterIconFromTextAsync("clear", clearIcon, "default");
            }));
        }
    }
}razor

const html = window.igTemplating.html;

const itemTemplate = ({ item }) => {
    return html`<span><b>${item.Name}</b> [${item.Id}]</span>`;
}

const groupHeaderTemplate = ({ item }) => {
    return html`<span>Country of ${item.Country}</span>`;
}

igRegisterScript("ComboItemTemplate", itemTemplate, false);
igRegisterScript('ComboGroupHeaderTemplate', groupHeaderTemplate, false)
js

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/

igc-combo::part(header),
igc-combo::part(footer) {
    padding: 12px 8px;
    text-align: center;
}

igc-combo::part(empty) {
    font-size: 16px;
}
css

Like this sample? Get access to our complete Ignite UI for Blazor toolkit and start building your own apps in minutes. Download it for free.

Template Types

Item Template

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

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

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

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

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

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

Group Header Template

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

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

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

Slots

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

Header Slot

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

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

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

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

Empty List Slot

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

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

Toggle Icon Slot

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

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

Clear Icon Slot

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

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