Blazor Dropdown List (ドロップダウン リスト) コンポーネントの概要

機能豊富な Blazor ドロップダウン リストは、すぐに使用できるフィルタリング、アクセシビリティ、事前選択された値、柔軟なデータ バインディング、グループ化、UI カスタマイズなどを提供します。このコンポーネントが実際に行うことは、HTML 選択タグを効果的かつ簡単に置き換えることであり、ユーザーは事前定義されたいくつかのオプションのセットから編集不可能な値をすばやく選択できます。

Ignite UI for Blazor ドロップダウン コンポーネントは、事前定義された値のトグル リストを表示し、ユーザーが 1 つのオプション項目をクリックして簡単に選択できるようにします。Blazor ドロップダウン メニューとして機能するようにすばやく構成することも、データをグループ化してより有用な視覚情報を提供するために使用することもできます。また、グループ化を使用すると、フラット データと階層データの両方を使用できます。

当社のコンポーネントを使用すると、プロジェクトに必要なすべての機能とカスタマイズ オプション (スタイルのカスタマイズ、Blazor ドロップダウン配置オプション、テンプレート、およびヘッダー、フッター、本文、リストなどに表示されるものと方法を変更する機能) を取得できます。

Blazor Dropdown の例

次の Blazor ドロップダウン リストの例は、3 つの基本的なオプションから選択できる単純なインタラクティブな 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コピー

このサンプルが気に入りましたか? 完全な Ignite UI for Blazorツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

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

無料で試してみる

Ignite UI for Blazor で Dropdown List を使用する方法

IgbDropdown を使用する前に、次のように登録する必要があります:

// in Program.cs file

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

Target (ターゲット)

Blazor ドロップダウン リストは、ターゲットに対して相対的に配置されます。target スロットを使用すると、クリック時に open プロパティを切り替える組み込みコンポーネントを提供できます。場合によっては、外部ターゲットを使用するか、別のイベントを使用してドロップダウンの開始を切り替えることができます。これは、ターゲットをパラメーターとして提供できる Show、Hide、および Toggle メソッドを使用して実現できます。デフォルトでは、ドロップダウン リストは CSS の absolute 位置を使用します。ターゲット要素が固定コンテナー内にあるが、ドロップダウンがそうではない場合、Blazor ドロップダウンの IgbPositionStrategy を 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コピー

位置

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 メソッドを使用すると、インデックスまたは値で項目を選択できます。

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 ドロップダウンの項目は、IgbDropdownGroup を使用してグループ化することもできるため、ユーザーは個別のカテゴリを簡単に区別できます。この 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(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 プロパティを使用して、この動作を防ぐことができます。

スタイル設定

公開された 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 リファレンス

• IgbDropdown
• IgbDropdownItem
• IgbDropdownHeader
• IgbDropdownGroup
• スタイル設定 & テーマ

その他のリソース

• Ignite UI for Blazor フォーラム (英語)
• Ignite UI for Blazor GitHub (英語)