Blazor ComboBox Templates

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

ComboBox 템플릿 예

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

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

템플릿 유형

아이템 템플릿

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

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

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

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

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

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

그룹 헤더 템플릿

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

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

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

슬롯

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

헤더 슬롯

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

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

토글 아이콘 슬롯

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

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

아이콘 슬롯 지우기

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

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