Blazor 드롭다운 목록 구성 요소 - 개요

풍부한 기능을 갖춘 Blazor 드롭다운 목록은 기본 필터링, 접근성, 사전 선택된 값, 유연한 데이터 바인딩, 그룹화, UI 사용자 지정 등을 제공합니다. 이 구성 요소가 실제로 하는 일은 HTML 선택 태그를 효과적이고 쉽게 대체하여 사용자가 미리 정의된 여러 옵션 세트에서 편집할 수 없는 값을 빠르게 선택할 수 있도록 하는 것입니다.

Ignite UI for Blazor는 미리 정의된 값의 토글 목록을 표시하고 사용자가 클릭 한 번으로 단일 옵션 항목을 쉽게 선택할 수 있도록 합니다. Blazor 드롭다운 메뉴로 작동하도록 빠르게 구성하거나 데이터를 그룹화하여 더 유용한 시각적 정보를 제공하는 데 사용할 수 있습니다. 또한 그룹화를 사용하면 플랫 및 계층적 데이터를 모두 사용할 수 있습니다.

당사의 컴포넌트를 사용하면 프로젝트에 필요한 모든 기능과 사용자 정의 옵션(스타일 사용자 정의, Blazor 드롭다운 배치 옵션, 템플릿, 헤더, 푸터, 본문, 목록 등에 표시되는 내용과 방법을 변경하는 기능 등)을 얻을 수 있습니다.

Blazor Dropdown Example

다음 Blazor 드롭다운 목록 예제는 선택할 수 있는 세 가지 기본 옵션과 함께 간단한 대화형 Blazor 드롭다운 메뉴의 작동 방식을 보여줍니다. 작동 방식을 확인하세요.

EXAMPLE

MODULES

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;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

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 Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbDropdownModule),
                typeof(IgbDropdownItemModule),
                typeof(IgbButtonModule)
        );
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container sample center">
    <IgbDropdown>
        <IgbButton slot="target">Option</IgbButton>
        <IgbDropdownItem>Option 1</IgbDropdownItem>
        <IgbDropdownItem>Option 2</IgbDropdownItem>
        <IgbDropdownItem>Option 3</IgbDropdownItem>
    </IgbDropdown>
</div>

@code {
    

}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 エクスペリエンスを構築します。

無料で試してみる

How to use the Dropdown List with Ignite UI for Blazor

​IgbDropdown을 사용하기 전에 다음과 같이 등록해야 합니다.

// in Program.cs file

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

Target

Blazor 드롭다운 목록은 대상에 상대적으로 배치됩니다. target 슬롯을 사용하면 클릭 시 open 속성을 토글하는 기본 제공 구성 요소를 제공할 수 있습니다.어떤 경우에는 외부 대상을 사용하거나 다른 이벤트를 사용하여 드롭다운 열기를 토글하고 싶을 것입니다.대상을 매개변수로 제공할 수 있는 Show, Hide 및 Toggle 메서드를 사용하여 이를 달성할 수 있습니다.기본적으로 드롭다운 목록은 absolute CSS 위치를 사용합니다.대상 요소가 고정 컨테이너 내부에 있지만 드롭다운이 그렇지 않은 경우 Blazor 드롭다운의 IgbPositionStrategy fixed로 설정해야 합니다.드롭다운 목록은 콘텐츠에 따라 자동으로 크기 fixed 됩니다.목록과 대상의 너비를 같게 하려면 SameWidth 속성을 true로 설정해야 합니다.

EXAMPLE

MODULES

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;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

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 Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbDropdownModule),
                typeof(IgbDropdownItemModule),
                typeof(IgbButtonModule)
   );
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container sample center">
    <div class="options horizontal">
       <IgbButton style="margin-right: 20px;" @onclick=OnClick>Toggle Dropdown</IgbButton>

       <IgbDropdown @ref="DropDownRef" KeepOpenOnOutsideClick="true" PositionStrategy="DropdownPositionStrategy.Fixed">
           <IgbButton @ref="ButtonRef" slot="target" style="margin-right: 20px;">Dropdown</IgbButton>

           <IgbDropdownItem>Option 1</IgbDropdownItem>
           <IgbDropdownItem>Option 2</IgbDropdownItem>
           <IgbDropdownItem>Option 3</IgbDropdownItem>
       </IgbDropdown>
    </div>
</div>

@code {
    

    IgbDropdown DropDownRef { get; set; }
    IgbButton ButtonRef { get; set; }

    private void OnClick(MouseEventArgs e)
    {
        this.DropDownRef.Toggle();
    }
}razorコピー

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

Position

Blazor 드롭다운의 기본 배치는 Placement 속성을 사용하여 설정할 수 있습니다. 드롭다운의 기본 배치는 bottom-start 입니다. Flip 속성은 지정된 배치에 드롭다운을 표시할 공간이 충분하지 않은 경우 배치를 뒤집을지 여부를 결정합니다. Blazor 드롭다운 목록에서 대상까지의 거리는 Distance 속성을 사용하여 지정할 수 있습니다.

EXAMPLE

MODULES

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;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

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 Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbDropdownModule),
                typeof(IgbDropdownItemModule),
                typeof(IgbButtonModule)
  );
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<style>
igc-dropdown::part(list) {
height: 200px;
}

.center {
align-items: center;
justify-content: center;
}
</style>

<div class="container sample center">
    <IgbDropdown @ref="DropDownRef" Distance="5" Change=OnChange Placement=@placement>
        <IgbButton slot="target">Option</IgbButton>
            <IgbDropdownItem Value="Top">@DropdownPlacement.Top</IgbDropdownItem>
            <IgbDropdownItem Value="TopStart">@DropdownPlacement.TopStart</IgbDropdownItem>
            <IgbDropdownItem Value="TopEnd">@DropdownPlacement.TopEnd</IgbDropdownItem>
            <IgbDropdownItem Value="Bottom">@DropdownPlacement.Bottom</IgbDropdownItem>
            <IgbDropdownItem Value="BottomStart">@DropdownPlacement.BottomStart</IgbDropdownItem>
            <IgbDropdownItem Value="BottomEnd">@DropdownPlacement.BottomEnd</IgbDropdownItem>
            <IgbDropdownItem Value="Left">@DropdownPlacement.Left</IgbDropdownItem>
            <IgbDropdownItem Value="LeftStart">@DropdownPlacement.LeftStart</IgbDropdownItem>
            <IgbDropdownItem Value="LeftEnd">@DropdownPlacement.LeftEnd</IgbDropdownItem>
            <IgbDropdownItem Value="Right">@DropdownPlacement.Right</IgbDropdownItem>
            <IgbDropdownItem Value="RightStart">@DropdownPlacement.RightStart</IgbDropdownItem>
            <IgbDropdownItem Value="RightEnd">@DropdownPlacement.RightEnd</IgbDropdownItem>
    </IgbDropdown>
</div>

    @code {
    

    IgbDropdown DropDownRef { get; set; }
    DropdownPlacement placement { get; set; }

    private void OnChange(IgbDropdownItemComponentEventArgs e)
    {
        Console.WriteLine(e.Detail.Value);

        switch (e.Detail.Value)
        {
            case "Top":
                placement = DropdownPlacement.Top;
                break;
            case "TopStart":
                placement = DropdownPlacement.TopStart;
                break;
            case "TopEnd":
                placement = DropdownPlacement.TopEnd;
                break;
            case "Bottom":
                placement = DropdownPlacement.Bottom;
                break;
            case "BottomStart":
                placement = DropdownPlacement.BottomStart;
                break;
            case "BottomEnd":
                placement = DropdownPlacement.BottomEnd;
                break;
            case "Left":
                placement = DropdownPlacement.Left;
                break;
            case "LeftStart":
                placement = DropdownPlacement.LeftStart;
                break;
            case "LeftEnd":
                placement = DropdownPlacement.LeftEnd;
                break;
            case "Right":
                placement = DropdownPlacement.Right;
                break;
            case "RightStart":
                placement = DropdownPlacement.RightStart;
                break;
            case "RightEnd":
                placement = DropdownPlacement.RightEnd;
                break;
            default:
                Console.WriteLine("Unknown placement value");
                break;
        }
    }
}razorコピー

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

선택

사용자가 IgbDropdown 항목을 선택할 때 이벤트를 내보냅니다 Change. Select Dropdown의 방법을 사용하면 인덱스 또는 값으로 항목을 선택할 수 있습니다.

Item

​IgbDropdownItem은 드롭다운 목록에서 선택 가능한 항목을 나타냅니다. Selected 속성을 설정하여 선택한 항목을 미리 정의할 수 있습니다. Disabled 속성을 사용하여 항목을 선택할 수 없도록 항목을 비활성화할 수도 있습니다. IgbDropdownItem 에는 항목의 콘텐츠를 지정할 수 있는 기본 슬롯이 있습니다. prefix 및 suffix 슬롯을 사용하여 콘텐츠 앞이나 뒤에 렌더링할 사용자 지정 콘텐츠를 제공할 수도 있습니다. Value 속성을 사용하면 항목에 사용자 지정 값을 제공할 수 있습니다. Value 설정되지 않은 경우 항목의 텍스트 콘텐츠로 확인됩니다.

EXAMPLE

MODULES

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;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

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 Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbDropdownModule),
                typeof(IgbDropdownItemModule),
                typeof(IgbButtonModule)
    );
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container sample center">
    <IgbDropdown>
        <IgbButton slot="target">Category</IgbButton>
        <IgbDropdownItem>
            <IgbIcon @ref=HotelIcon slot="prefix" IconName="hotel-icon" Collection="material"></IgbIcon>
            Hotel
        </IgbDropdownItem>
        <IgbDropdownItem Disabled="true">
            <IgbIcon @ref=GroceryIcon slot="prefix" IconName="grocery-icon" Collection="material"></IgbIcon>
            Grocery
        </IgbDropdownItem>
        <IgbDropdownItem Selected="true">
            <IgbIcon @ref=RestaurantIcon slot="prefix" IconName="restaurant-icon" Collection="material"></IgbIcon>
            Restaurant
        </IgbDropdownItem>
    </IgbDropdown>
</div>

@code {
    

    IgbIcon HotelIcon { get; set; }
    IgbIcon GroceryIcon { get; set; }
    IgbIcon RestaurantIcon { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender && this.HotelIcon != null)
        {
            await this.HotelIcon.EnsureReady();
            //hotel-icon
            string hotelIcon = "<svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px'><path d='M0 0h24v24H0V0z' fill='none'/><path d='M7 14c1.66 0 3-1.34 3-3S8.66 8 7 8s-3 1.34-3 3 1.34 3 3 3zm0-4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm12-3h-8v8H3V5H1v15h2v-3h18v3h2v-9c0-2.21-1.79-4-4-4zm2 8h-8V9h6c1.1 0 2 .9 2 2v4z'/></svg>";
            await this.HotelIcon.RegisterIconFromTextAsync("hotel-icon", hotelIcon, "material");
        }

        if (firstRender && this.GroceryIcon != null)
        {
            await this.GroceryIcon.EnsureReady();
            //grocery-icon
            string groceryIcon = "<svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px'><path d='M0 0h24v24H0V0z' fill='none'/><path d='M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2zm-1.45-5c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.37-.66-.11-1.48-.87-1.48H5.21l-.94-2H1v2h2l3.6 7.59-1.35 2.44C4.52 15.37 5.48 17 7 17h12v-2H7l1.1-2h7.45zM6.16 6h12.15l-2.76 5H8.53L6.16 6z'/></svg>";
            await this.GroceryIcon.RegisterIconFromTextAsync("grocery-icon", groceryIcon, "material");
        }

        if (firstRender && this.RestaurantIcon != null)
        {
            await this.RestaurantIcon.EnsureReady();
            //restaurant-icon
            string restaurantIcon = "<svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px'><path d='M0 0h24v24H0V0z' fill='none'/><path d='M16 6v8h3v8h2V2c-2.76 0-5 2.24-5 4zm-5 3H9V2H7v7H5V2H3v7c0 2.21 1.79 4 4 4v9h2v-9c2.21 0 4-1.79 4-4V2h-2v7z'/></svg>";
            await this.RestaurantIcon.RegisterIconFromTextAsync("restaurant-icon", restaurantIcon, "material");
        }
    }
}razorコピー

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

Header

​IgbDropdownHeader 사용하여 항목 그룹에 대한 헤더를 제공할 수 있습니다.

EXAMPLE

MODULES

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;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

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 Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbDropdownModule),
                typeof(IgbDropdownItemModule),
                typeof(IgbDropdownHeaderModule),
                typeof(IgbButtonModule)
   );
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container sample center">
    <IgbDropdown>
        <IgbButton slot="target">Phone Settings</IgbButton>
        @*<IgbDropDownHeader>
            <span slot="label">Ringer</span>
        </IgbDropDownHeader>*@
        <IgbDropdownItem Selected="true">Ring
            <IgbIcon @ref=RingIcon slot="prefix" IconName="ring-icon" Collection="material"></IgbIcon>
        </IgbDropdownItem>
        <IgbDropdownItem>Vibrate
            <IgbIcon @ref=VibrateIcon slot="prefix" IconName="vibrate-icon" Collection="material"></IgbIcon>
        </IgbDropdownItem>
        <IgbDropdownItem>Silent
            <IgbIcon @ref=SilentIcon slot="prefix" IconName="silent-icon" Collection="material"></IgbIcon>
        </IgbDropdownItem>
    </IgbDropdown>
</div>

@code {
    

    IgbIcon RingIcon { get; set; }
    IgbIcon VibrateIcon { get; set; }
    IgbIcon SilentIcon { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender && this.RingIcon != null)
        {
            await this.RingIcon.EnsureReady();
            //ring-icon
            string ringIcon = "<svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px'><path d='M0 0h24v24H0V0z' fill='none'/><path d='M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2zm-2 1H8v-6c0-2.48 1.51-4.5 4-4.5s4 2.02 4 4.5v6zM7.58 4.08L6.15 2.65C3.75 4.48 2.17 7.3 2.03 10.5h2c.15-2.65 1.51-4.97 3.55-6.42zm12.39 6.42h2c-.15-3.2-1.73-6.02-4.12-7.85l-1.42 1.43c2.02 1.45 3.39 3.77 3.54 6.42z'/></svg>";
            await this.RingIcon.RegisterIconFromTextAsync("ring-icon", ringIcon, "material");
        }

        if (firstRender && this.VibrateIcon != null)
        {
            await this.VibrateIcon.EnsureReady();
            //vibrate-icon
            string vibrateIcon = "<svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px'><path d='M0 0h24v24H0V0z' fill='none'/><path d='M0 15h2V9H0v6zm3 2h2V7H3v10zm19-8v6h2V9h-2zm-3 8h2V7h-2v10zM16.5 3h-9C6.67 3 6 3.67 6 4.5v15c0 .83.67 1.5 1.5 1.5h9c.83 0 1.5-.67 1.5-1.5v-15c0-.83-.67-1.5-1.5-1.5zM16 19H8V5h8v14z'/></svg>";
            await this.VibrateIcon.RegisterIconFromTextAsync("vibrate-icon", vibrateIcon, "material");
        }

        if (firstRender && this.SilentIcon != null)
        {
            await this.SilentIcon.EnsureReady();
            //silent-icon
            string silentIcon = "<svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px'><path d='M0 0h24v24H0V0z' fill='none'/><path d='M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm0-15.5c2.49 0 4 2.02 4 4.5v.1l2 2V11c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68c-.24.06-.47.15-.69.23l1.64 1.64c.18-.02.36-.05.55-.05zM5.41 3.35L4 4.76l2.81 2.81C6.29 8.57 6 9.74 6 11v5l-2 2v1h14.24l1.74 1.74 1.41-1.41L5.41 3.35zM16 17H8v-6c0-.68.12-1.32.34-1.9L16 16.76V17z'/></svg>";
            await this.SilentIcon.RegisterIconFromTextAsync("silent-icon", silentIcon, "material");
        }
    }
}razorコピー

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

Group

Blazor Dropdown의 항목은 IgbDropdownGroup 사용하여 그룹화할 수도 있어 사용자가 별도의 범주를 구분하기 쉽습니다. 이 Blazor Dropdown List 예제에서 실제로 작동하는 모습을 확인하세요.

EXAMPLE

MODULES

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;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

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 Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbDropdownModule),
                typeof(IgbDropdownGroupModule),
                typeof(IgbDropdownItemModule),
                typeof(IgbButtonModule),
                typeof(IgbIconModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container sample center">
    <IgbDropdown>
        <IgbButton slot="target">Countries</IgbButton>
        <IgbDropdownGroup>
            <span slot="label">Europe</span>
            <IgbDropdownItem>
                <IgbIcon @ref=LocationIcon slot="prefix" IconName="drop-icon" Collection="material"></IgbIcon>
              Germany
              <span slot="suffix">DE</span>
            </IgbDropdownItem>
            <IgbDropdownItem>
                <IgbIcon @ref=LocationIcon slot="prefix" IconName="drop-icon" Collection="material"></IgbIcon>
              France
              <span slot="suffix">FR</span>
            </IgbDropdownItem>
            <IgbDropdownItem>
                <IgbIcon @ref=LocationIcon slot="prefix" IconName="drop-icon" Collection="material"></IgbIcon>
              Spain
              <span slot="suffix">DE</span>
              </IgbDropdownItem>
        </IgbDropdownGroup>

        <IgbDropdownGroup>
            <span slot="label">North America</span>
            <IgbDropdownItem>
                <IgbIcon @ref=LocationIcon slot="prefix" IconName="drop-icon" Collection="material"></IgbIcon>
              USA
              <span slot="suffix">US</span>
            </IgbDropdownItem>
            <IgbDropdownItem>
                <IgbIcon @ref=LocationIcon slot="prefix" IconName="drop-icon" Collection="material"></IgbIcon>
              Canada
              <span slot="suffix">CA</span>
            </IgbDropdownItem>
            <IgbDropdownItem>
                <IgbIcon @ref=LocationIcon slot="prefix" IconName="drop-icon" Collection="material"></IgbIcon>
              Mexico
              <span slot="suffix">MX</span>
              </IgbDropdownItem>
        </IgbDropdownGroup>

    </IgbDropdown>
</div>

@code {
    

    private IgbIcon LocationIcon { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender && this.LocationIcon != null)
        {
            await this.LocationIcon.EnsureReady();
            //drop-icon
            string dropIcon = "<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>";
            await this.LocationIcon.RegisterIconFromTextAsync("drop-icon", dropIcon, "material");
        }
    }
}razorコピー

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

Scroll Strategy

​ScrollStrategy 속성은 대상 요소의 컨테이너를 스크롤하는 동안 구성 요소의 동작을 결정합니다. 기본값은 scroll 입니다. 이는 드롭다운이 대상과 함께 스크롤됨을 의미합니다. 속성을 block으로 설정하면 드롭다운이 열리면 스크롤이 차단됩니다. 또한 스크롤할 때 드롭다운이 자동으로 close 도록 속성을 설정할 수도 있습니다.

Keep Open

기본적으로 드롭다운은 사용자가 드롭다운 외부를 클릭하거나 항목을 선택하면 자동으로 닫힙니다. KeepOpenOnOutsideClick 및 KeepOpenOnSelect 속성을 사용하면 이 동작을 방지할 수 있습니다.

Styling

노출된 CSS 부분을 사용하여 드롭다운 및 해당 항목의 모양을 변경할 수 있습니다. IgbDropdown​ ​base 및 list 부분을 노출하고, IgbDropdownItem​ ​prefix, content 및 suffix 부분을 노출하고, IgbDropdownGroup​ ​label 부분을 노출합니다.

igc-dropdown::part(list) {
  height: 220px;
}

igc-dropdown-item[selected] {
  background: var(--ig-success-300);
}

igc-dropdown-group::part(label) {
  display: flex;
  justify-content: center;
}
css

EXAMPLE

MODULES

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;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

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 Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbDropdownModule),
                typeof(IgbDropdownGroupModule),
                typeof(IgbDropdownItemModule),
                typeof(IgbButtonModule),
                typeof(IgbIconModule)
   );
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<style>
igc-dropdown::part(list) {
height: 220px;
}

igc-dropdown-item[selected] {
background: #28a745;
}

igc-dropdown-group::part(label) {
display: flex;
justify-content: center;
}
</style>

<div class="container sample center">
    <IgbDropdown>
        <IgbButton slot="target">Countries</IgbButton>
        <IgbDropdownGroup>
            <span slot="label">Europe</span>
            <IgbDropdownItem>
                <IgbIcon @ref=LocationIcon slot="prefix" IconName="drop-icon" Collection="material"></IgbIcon>
              Germany
              <span slot="suffix">DE</span>
            </IgbDropdownItem>
            <IgbDropdownItem>
                <IgbIcon @ref=LocationIcon slot="prefix" IconName="drop-icon" Collection="material"></IgbIcon>
              France
              <span slot="suffix">FR</span>
            </IgbDropdownItem>
            <IgbDropdownItem Selected="true">
                <IgbIcon @ref=LocationIcon slot="prefix" IconName="drop-icon" Collection="material"></IgbIcon>
              Spain
              <span slot="suffix">DE</span>
              </IgbDropdownItem>
        </IgbDropdownGroup>

        <IgbDropdownGroup>
            <span slot="label">North America</span>
            <IgbDropdownItem>
                <IgbIcon @ref=LocationIcon slot="prefix" IconName="drop-icon" Collection="material"></IgbIcon>
              USA
              <span slot="suffix">US</span>
            </IgbDropdownItem>
            <IgbDropdownItem>
                <IgbIcon @ref=LocationIcon slot="prefix" IconName="drop-icon" Collection="material"></IgbIcon>
              Canada
              <span slot="suffix">CA</span>
            </IgbDropdownItem>
            <IgbDropdownItem>
                <IgbIcon @ref=LocationIcon slot="prefix" IconName="drop-icon" Collection="material"></IgbIcon>
              Mexico
              <span slot="suffix">MX</span>
              </IgbDropdownItem>
        </IgbDropdownGroup>

    </IgbDropdown>
</div>

@code {
    

    private IgbIcon LocationIcon { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender && this.LocationIcon != null)
        {
            await this.LocationIcon.EnsureReady();
            //drop-icon
            string dropIcon = "<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>";
            await this.LocationIcon.RegisterIconFromTextAsync("drop-icon", dropIcon, "material");
        }
    }
}razorコピー

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

API Reference

• IgbDropdown
• IgbDropdownItem
• IgbDropdownHeader
• IgbDropdownGroup
• Styling & Themes

Additional Resources

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