Blazor ComboBox 개요

Blazor ComboBox는 사용자가 제공된 목록에서 다양한 미리 정의된 옵션을 쉽게 선택, 필터링 및 그룹화할 수 있는 가벼운 편집기입니다. 이 구성 요소는 또한 Blazor ComboBox 키보드 탐색, 항목, 헤더 및 푸터가 표시되는 방식을 사용자 정의하는 템플릿에 대한 옵션을 지원합니다.

Ignite UI for Blazor ComboBox 구성 요소는 사용자가 선택할 수 있는 옵션 목록을 제공합니다. 모든 옵션을 가상화된 항목 목록에 표시하므로 ComboBox는 동시에 수천 개의 레코드를 표시할 수 있으며, 여기서 하나 이상의 옵션을 선택할 수 있습니다. 또한 이 구성 요소는 대소문자 구분 필터링, 그룹화, 복잡한 데이터 바인딩 등을 제공합니다.

Blazor ComboBox Example

EXAMPLE

MODULES

DATA

RAZOR

CSS

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

            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

<div class="container sample center">
    <IgbCombo T="string" Data="Data" ValueKey="Id" DisplayKey="Name"></IgbCombo>
</div>

@code {
    private List<City> Data;

    protected override void OnInitialized() {
        this.Data = SampleData.Cities;
    }
}razorコピー

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/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.

最速のデータ グリッド、高性能なチャート、すぐに使用できる機能のフルセットなどを含む 60 以上の再利用可能なコンポーネント を使用して、最新の Web エクスペリエンスを構築します。

無料で試してみる

Getting Started with Blazor ComboBox

​IgbCombo 구성 요소를 시작하려면 먼저 다음과 같이 해당 모듈을 등록해야 합니다.

// in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbComboModule));
razor

​IgbCombo 구성 요소에 스타일을 적용하려면 추가 CSS 파일을 연결해야 합니다. 다음은 Blazor Web Assembly 프로젝트의 wwwroot/index.html 파일이나 Blazor Server 프로젝트의 Pages/_Host.cshtml 파일에 배치해야 합니다.

<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
razor

The IgbCombo component doesn't work with the standard <form> element. Use Form instead.

그런 다음 옵션 목록을 작성하는 데 사용되는 콤보 데이터 소스에 개체 배열을 바인딩합니다.

<IgbCombo Id="basic-combo" DisplayKey="name" ValueKey="id" Data="Data" />

@code {
    private class City {
        public string Id { get; set; }
        public string Name { get; set; }
        public string Country { get; set; }
    }

    private List<City> Data = new List<City> {
        new City {
            Id = "UK01",
            Name = "London",
            Country = "United Kingdom",
        },
        new City {
            Id = "BG01",
            Name = "Sofia",
            Country = "Bulgaria",
        },
        new City {
            Id = "US01",
            Name = "New York",
            Country = "United States",
        },
    };
}
razor

Data value and display properties

콤보가 복잡한 데이터(예: 개체) 목록에 바인딩된 경우 컨트롤이 항목 선택을 처리하는 데 사용할 속성을 지정해야 합니다. 구성 요소는 다음 속성을 노출합니다.

• ValueKey-선택 과목, 필수의 복잡한 데이터 객체의 경우- 선택하는 데 사용할 데이터 소스의 필드를 결정합니다. 만약에 ValueKey 생략되면 선택 API는 개체 참조를 사용하여 항목을 선택합니다.
• DisplayKey-선택 과목, 추천 복잡한 데이터 객체의 경우- 표시 값으로 사용되는 데이터 소스의 필드를 결정합니다. 값이 지정되지 않은 경우 DisplayKey, 콤보는 지정된 ValueKey (만약에 어떠한). 우리의 경우 콤보가 다음을 표시하기를 원합니다. name 각 도시의 id 항목 선택을 위한 필드와 각 항목의 기본 값으로 사용됩니다. 따라서 우리는 이러한 속성을 콤보의 속성에 제공합니다. ValueKey 그리고 DisplayKey 각기.

When the data source consists of primitive types (e.g. strings, numbers, etc.), do not specify a ValueKey and/or DisplayKey.

Setting Value

ComboBox 구성 요소는 값이라고도 하는 속성 외에도 Value getter 및 setter를 노출합니다. value 속성을 사용하여 구성 요소 초기화 시 선택한 항목을 설정할 수 있습니다.

값(즉, 현재 선택된 항목의 목록)을 읽거나 값을 업데이트하려면 각각 value getter 및 setter를 사용하십시오. 값 getter는 ValueKey로 표시되는 선택된 모든 항목의 목록을 반환합니다. 마찬가지로, 값 설정기를 사용하여 선택한 항목 목록을 업데이트하려면 해당 ValueKey로 항목 목록을 제공해야 합니다.

본보기:

Selection API

콤보 구성 요소는 현재 선택한 항목을 변경할 수 있는 API를 노출합니다.

사용자 상호 작용을 통해 옵션 목록에서 항목을 선택하는 것 외에도 프로그래밍 방식으로 항목을 선택할 수 있습니다. 이는 select 및 deselect 메소드를 통해 수행됩니다. 항목 배열을 두 메서드 모두에 전달할 수 있습니다. 인수 없이 메서드를 호출하면 호출되는 메서드에 따라 모든 항목이 선택/선택 해제됩니다. 콤보 구성 요소에 대해 ValueKey 지정한 경우 선택/선택 취소하려는 항목의 값 키를 전달해야 합니다.

일부 항목 선택/선택 취소:

<IgbCombo
    @ref="Combo"
    Label="Cities"
    Placeholder="Pick a city"
    Data="Data"
    ValueKey="Id"
    DisplayKey="Name">
</IgbCombo>

@code {
    private List<City> Data;
    private IgbCombo Combo;
    private object[] Cities;

    protected override void OnInitialized() {
        this.Data = SampleData.Cities;
        this.Cities = new object[] { "UK01", "UK02", "UK03", "UK04", "UK05" };
    }

    public void SelectCities() {
        this.Combo.Select(Cities);
    }

    public void DeselectCities() {
        this.Combo.Deselect(Cities);
    }
}
razor

모든 항목 선택/선택 취소:

@code {
    public void SelectAll() {
        this.Combo.Select(new object[] {});
    }

    public void DeselectAll() {
        this.Combo.Deselect(new object[] {});
    }
}
razor

​ValueKey 속성이 생략된 경우 개체 참조로 선택/선택 취소하려는 항목을 나열해야 합니다.

EXAMPLE

MODULES

DATA

RAZOR

CSS

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(IgbButtonModule));

            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

<div class="container sample center">
    <style>
        .button-container {
            display: flex;
            margin-top: 16px;
            gap: 8px;
        }
    </style>

    <IgbCombo
        T="string"
        Label="Cities"
        Placeholder="Pick a city"
        Data="Data"
        ValueKey="Id"
        DisplayKey="Name"
        @ref="Combo">
    </IgbCombo>

    <div class="button-container">
        <IgbButton @onclick="SelectUKCities">Select UK Cities</IgbButton>
        <IgbButton @onclick="DeselectUKCities">Deselect UK Cities</IgbButton>
        <IgbButton @onclick="SelectAll">Select All</IgbButton>
        <IgbButton @onclick="DeselectAll">Deselect All</IgbButton>
    </div>
</div>

@code {
    private List<City> Data;
    private IgbCombo<string> Combo;
    private object[] UKCities;

    protected override void OnInitialized() {
        this.Data = SampleData.Cities;
        this.UKCities = new object[] { "UK01", "UK02", "UK03", "UK04", "UK05" };
    }

    public void SelectUKCities() {
        this.Combo.Select(UKCities);
    }

    public void DeselectUKCities() {
        this.Combo.Deselect(UKCities);
    }

    public void SelectAll() {
        this.Combo.Select(new object[] {});
    }

    public void DeselectAll() {
        this.Combo.Deselect(new object[] {});
    }
}razorコピー

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

Validation

Ignite UI for Blazor Required, Disabled, Autofocus, Invalid 등과 같은 대부분의 IgbInput 속성을 지원합니다. 이 구성 요소는 또한 유효성 검사에 바인딩된 두 가지 메서드를 노출합니다.

• reportValidity- 유효성을 확인하고 구성 요소가 유효성 검사 제약 조건을 충족하면 true를 반환합니다.
• checkValidity- 기본 입력 API를 준수하기 위한 reportValidity 주변의 래퍼입니다.

Keyboard Navigation

콤보 구성요소에 초점이 맞춰져 있고 옵션 목록이 표시되지 않는 경우:

• ​Down/Alt + Down 키를 사용하여 옵션 목록을 엽니다.

콤보 구성요소에 초점이 맞춰져 있고 옵션 목록이 표시되는 경우:

• ​아래쪽 키를 사용하면 목록의 다음 항목이 활성화됩니다.
• ​위쪽 키를 사용하면 목록의 이전 항목이 활성화됩니다. 첫 번째 항목이 이미 활성화되어 있으면 입력에 초점을 맞춥니다.
• ​Home 또는 End 키를 사용하면 목록의 첫 번째 또는 마지막 항목이 활성화됩니다.
• ​스페이스 키를 사용하면 활성 항목이 선택됩니다.
• ​Enter 키를 사용하면 활성 항목이 선택되고 옵션 목록이 닫힙니다.
• ​Esc 또는 Tab/Shift + Tab 키를 사용하면 옵션 목록이 닫힙니다.

Styling

아래 나열된 노출된 CSS 부분을 사용하여 구성 요소와 해당 항목의 모양을 IgbCombo 변경할 수 있습니다.

부품명	설명
label	캡슐화된 텍스트 레이블입니다.
input	기본 입력 필드입니다.
native-input	기본 입력 필드의 기본 입력입니다.
prefix	접두사 래퍼.
suffix	접미사 래퍼.
toggle-icon	토글 아이콘 래퍼.
clear-icon	명확한 아이콘 래퍼.
case-icon	필터 입력의 접미사 내부에 콘텐츠를 렌더링하는 케이스 아이콘 래퍼입니다.
helper-text	도우미 텍스트 래퍼입니다.
search-input	검색 입력 필드입니다.
list-wrapper	옵션 래퍼 목록입니다.
list	옵션 상자 목록입니다.
item	옵션 목록의 각 항목을 나타냅니다.
group-header	옵션 목록의 각 헤더를 나타냅니다.
active	항목이 활성화되면 항목 부품 목록에 추가됩니다.
selected	항목을 선택하면 항목 부품 목록에 추가됩니다.
checkbox	각 목록 항목의 각 확인란을 나타냅니다.
checkbox-indicator	각 목록 항목의 확인란 표시를 나타냅니다.
checked	확인란을 선택하면 확인란 부품 목록에 추가됩니다.
header	헤더 내용을 담고 있는 컨테이너입니다.
footer	바닥글 콘텐츠를 담는 컨테이너입니다.
empty	빈 콘텐츠를 담는 컨테이너입니다.

CSS 부분을 사용하여 콤보 스타일을 완전히 제어할 수 있습니다.

igc-combo::part(search-input) {
  background-color: var(--ig-gray-100);
  border-radius: 2px;
}

igc-combo::part(input) {
  background-color: var(--ig-gray-100);
}

igc-combo::part(prefix) {
  background-color: var(--ig-secondary-50);
  color: var(--ig-primary-500);
}

igc-combo::part(toggle-icon) {
  color: var(--ig-primary-500);
}
css

EXAMPLE

MODULES

DATA

RAZOR

CSS

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(label),
igc-combo::part(empty),
igc-combo::part(group-header) {
    color: #2b3a55;
}

igc-combo::part(native-input),
igc-combo::part(list-wrapper) {
    background-color: #f2e5e5;
}

igc-combo::part(item selected) {
    background: #e8c4c4;
}

igc-combo::part(item selected active),
igc-combo::part(item selected):hover {
    background: #ce7777;
}

igc-combo::part(prefix),
igc-combo::part(suffix),
igc-combo::part(case-icon) {
    color: #f2e5e5;
    background-color: #2b3a55;
}

igc-combo::part(checkbox checked)::after {
    background: #2b3a55;
    box-shadow: none;
}
</style>
<div class="container sample center">
    <IgbCombo
        T="string"
        Label="Destinations"
        Data="Data"
        ValueKey="Id"
        DisplayKey="Name"
        GroupKey="Country"
        CaseSensitiveIcon>
        <span slot="helper-text">Choose the desired place</span>
        <IgbIcon @ref="locationIconRef" slot="prefix" name="place" collection="material"></IgbIcon>
    </IgbCombo>
</div>

@code {
    private List<City> Data;
    private IgbIcon locationIconRef { get; set; }
    private string placeSvg = "<svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px'><path d='M0 0h24v24H0z' fill='none'/><path d='M12 12c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm6-1.8C18 6.57 15.35 4 12 4s-6 2.57-6 6.2c0 2.34 1.95 5.44 6 9.14 4.05-3.7 6-6.8 6-9.14zM12 2c4.2 0 8 3.22 8 8.2 0 3.32-2.67 7.25-8 11.8-5.33-4.55-8-8.48-8-11.8C4 5.22 7.8 2 12 2z'/></svg>";

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

    protected override void OnAfterRender(bool firstRender) {
        if (firstRender) {
            this.locationIconRef.EnsureReady().ContinueWith(new Action<Task>((e) => {
                this.locationIconRef.RegisterIconFromTextAsync("place", placeSvg, "material");
            }));
        }
    }
}razorコピー

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
igc-combo::part(label),
igc-combo::part(empty),
igc-combo::part(group-header) {
    color: #2b3a55;
}

igc-combo::part(native-input),
igc-combo::part(list-wrapper) {
    background-color: #f2e5e5;
}

igc-combo::part(item selected) {
    background: #e8c4c4;
}

igc-combo::part(item selected active),
igc-combo::part(item selected):hover {
    background: #ce7777;
}

igc-combo::part(prefix),
igc-combo::part(suffix),
igc-combo::part(case-icon) {
    color: #f2e5e5;
    background-color: #2b3a55;
}

igc-combo::part(checkbox checked)::after {
    background: #2b3a55;
    box-shadow: none;
}
cssコピー

API Reference

• IgbCombo
• Styling & Themes

Additional Resources

• Ignite UI for Blazor 포럼
• Ignite UI for Blazor 깃허브