Blazor Select (選択)

選択コンポーネントは、ドロップダウンに配置された項目のリストからの単一選択できます。このフォーム コントロールは、1 つまたは複数の文字の一致に基づく選択を含む、項目リストの迅速なナビゲーションを提供します。

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;

// 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(IgbSelectModule));

            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container sample center">
    <IgbSelect>
        <IgbSelectItem Value="orange">Orange</IgbSelectItem>
        <IgbSelectItem Value="appple">Apple</IgbSelectItem>
        <IgbSelectItem Value="banana">Banana</IgbSelectItem>
        <IgbSelectItem Value="mango">Mango</IgbSelectItem>
    </IgbSelect>
</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 エクスペリエンスを構築します。

無料で試してみる

使用方法

IgbSelect コンポーネントを使用する前に、追加のコンポーネントとともに登録する必要があります:

// in Program.cs file

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

スタイルを IgbSelect コンポーネントに適用するには、追加の CSS ファイルをリンクする必要もあります。以下は、Blazor WebAssembly プロジェクトの wwwroot/index.html ファイルまたは Blazor Server プロジェクトの Pages/_Host.cshtml ファイルに配置する必要があります:

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

ヘッダーとグループの選択コンポーネントは、使用しない限り必須ではないことに注意してください。

コンポーネントの使用を開始するには、選択する IgbSelectItem のリストとともに IgbSelect を追加します。

<IgbSelect>
    <IgbSelectItem Value="orange">Orange</IgbSelectItem>
    <IgbSelectItem Value="apple">Apple</IgbSelectItem>
    <IgbSelectItem Value="banana">Banana</IgbSelectItem>
    <IgbSelectItem Value="mango">Mango</IgbSelectItem>
</IgbSelect>
razor

Select (選択)

IgbSelect コンポーネントは Form コンポーネント内で使用できるため、登録する Name プロパティを公開します。また、Label および Placeholder プロパティもあります。Outlined プロパティは、Material テーマに関してのみ、スタイリング目的で使用されます。デフォルトのスロットを除いて、コンポーネントは、header、footer、helper-text、prefix、suffix、および toggle-icon を含む他のいくつかのスロットを提供します。コンポーネントのサイズは、--ig-size CSS 変数を使用して変更できます。

Item (項目)

IgbSelectItem コンポーネントを使用すると、ユーザーは IgbSelect コントロールで使用されるオプションのリストを宣言的に指定できます。各項目は、選択時に保持されるデータを表す Value プロパティを提供します。IgbSelectItem には、項目のテキスト コンテンツを指定できるデフォルトのスロットがあります。このテキスト コンテンツは、Value プロパティが IgbSelectItem に存在しない場合に値として使用されます。prefix スロットと suffix スロットを使用して、IgbSelectItem コンテンツの前後に描画されるカスタム コンテンツを提供することもできます。Selected プロパティを設定することにより、選択した項目を事前定義できます。Disabled プロパティを使用して、一部またはすべての項目を無効にすることもできます。

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;

// 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(IgbSelectModule));
            builder.Services.AddIgniteUIBlazor(typeof(IgbIconModule));

            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container sample center">
    <IgbSelect>
        <IgbSelectItem>
            <IgbIcon @ref="IconRef" slot="prefix" name="hotel" collection="material"></IgbIcon>
            Hotel
        </IgbSelectItem>
        <IgbSelectItem disabled>
            <IgbIcon slot="prefix" name="grocery" collection="material"></IgbIcon>
            Grocery
        </IgbSelectItem>
        <IgbSelectItem selected>
            <IgbIcon slot="prefix" name="restaurant" collection="material"></IgbIcon>
            Restaurant
        </IgbSelectItem>
    </IgbSelect>
</div>

@code {
    
    private IgbIcon IconRef { get; set; }
    private string hotelSvg = "<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>";
    private string grocerySvg = "<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>";
    private string restaurantSvg = "<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>";

    protected override async Task OnAfterRenderAsync(bool firstRender) {
        if(firstRender) {
            await this.IconRef.EnsureReady();
            await this.IconRef.RegisterIconFromTextAsync("hotel", hotelSvg, "material");
            await this.IconRef.RegisterIconFromTextAsync("grocery", grocerySvg, "material");
            await this.IconRef.RegisterIconFromTextAsync("restaurant", restaurantSvg, "material");
        }
    }
}razorコピー

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

Header (ヘッダー)

IgbSelectHeader を使用して、項目のグループのヘッダーを提供できます。

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;

// 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(IgbSelectModule));

            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container sample center">
    <IgbSelect>
        <IgbSelectHeader>Tasks</IgbSelectHeader>
        <IgbSelectItem Value="spec" Selected>Specification</IgbSelectItem>
        <IgbSelectItem Value="implement">Implementation</IgbSelectItem>
        <IgbSelectItem Value="test" Disabled>Testing</IgbSelectItem>
        <IgbSelectItem Value="docs">Documentation</IgbSelectItem>
    </IgbSelect>
</div>

@code { }razorコピー

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

<IgbSelect>
    <IgbSelectHeader>Tasks</IgbSelectHeader>
</IgbSelect>
razor

Group (グループ)

複数の IgbSelectItem を IgbSelectGroup コンポーネントの開く括弧と閉じる括弧の間に配置して、ユーザーがそれらを視覚的にグループ化できるようにすることができます。IgbSelectGroup は、その label スロットを介してラベルを付け、その Disabled プロパティを介して無効にすることができます。

選択グループが無効になっている場合、そのグループの個別の項目を有効にすることはできないことに注意してください。

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;

// 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(IgbSelectModule));
            builder.Services.AddIgniteUIBlazor(typeof(IgbIconModule));

            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container sample center">
    <IgbSelect>
        <IgbSelectGroup>
            <span slot="label">Europe</span>

            <IgbSelectItem>
              <IgbIcon @ref="IconRef" slot="prefix" name="place" collection="material"></IgbIcon>
              Germany
              <span slot="suffix">DE</span>
            </IgbSelectItem>

            <IgbSelectItem>
              <IgbIcon slot="prefix" name="place" collection="material"></IgbIcon>
              France
              <span slot="suffix">FR</span>
            </IgbSelectItem>

            <IgbSelectItem>
              <IgbIcon slot="prefix" name="place" collection="material"></IgbIcon>
              Spain
              <span slot="suffix">ES</span>
            </IgbSelectItem>
        </IgbSelectGroup>

        <IgbSelectGroup disabled>
            <span slot="label">Asia</span>

            <IgbSelectItem>
              <IgbIcon slot="prefix" name="place" collection="material"></IgbIcon>
              China
              <span slot="suffix">CN</span>
            </IgbSelectItem>

            <IgbSelectItem>
              <IgbIcon slot="prefix" name="place" collection="material"></IgbIcon>
              Japan
              <span slot="suffix">JP</span>
            </IgbSelectItem>

            <IgbSelectItem>
              <IgbIcon slot="prefix" name="place" collection="material"></IgbIcon>
              India
              <span slot="suffix">IN</span>
            </IgbSelectItem>

            <IgbSelectItem>
              <IgbIcon slot="prefix" name="place" collection="material"></IgbIcon>
              Thailand
              <span slot="suffix">TH</span>
            </IgbSelectItem>
        </IgbSelectGroup>

        <IgbSelectGroup>
            <span slot="label">North America</span>

            <IgbSelectItem>
              <IgbIcon slot="prefix" name="place" collection="material"></IgbIcon>
              USA
              <span slot="suffix">US</span>
            </IgbSelectItem>

            <IgbSelectItem>
              <IgbIcon slot="prefix" name="place" collection="material"></IgbIcon>
              Canada
              <span slot="suffix">CA</span>
            </IgbSelectItem>

            <IgbSelectItem>
              <IgbIcon slot="prefix" name="place" collection="material"></IgbIcon>
              Mexico
              <span slot="suffix">MX</span>
            </IgbSelectItem>
        </IgbSelectGroup>

    </IgbSelect>
</div>

@code {
    
    private IgbIcon IconRef { 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 async Task OnAfterRenderAsync(bool firstRender) {
        if(firstRender) {
            await this.IconRef.EnsureReady();
            await this.IconRef.RegisterIconFromTextAsync("place", placeSvg, "material");
        }
    }
}razorコピー

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

<IgbSelect>
    <IgbSelectGroup>
        <span slot="label">Europe</span>

        <IgbSelectItem>
          <IgbIcon @ref="IconRef" slot="prefix" name="place" collection="material"></IgbIcon>
          Germany
          <span slot="suffix">DE</span>
        </IgbSelectItem>

        <IgbSelectItem>
          <IgbIcon slot="prefix" name="place" collection="material"></IgbIcon>
          France
          <span slot="suffix">FR</span>
        </IgbSelectItem>

        <IgbSelectItem>
          <IgbIcon slot="prefix" name="place" collection="material"></IgbIcon>
          Spain
          <span slot="suffix">ES</span>
        </IgbSelectItem>
    </IgbSelectGroup>
</IgbSelect>
razor

検証

さらに、IgbSelect は、Required、Disabled、Autofocus など、ほとんどの IgbInput プロパティをサポートします。コンポーネントは、その検証にバインドされたメソッドも公開します。

• reportValidity - 有効性をチェックし、無効な場合はコンポーネントにフォーカスします。

キーボード ナビゲーション

選択がフォーカスされ、オプションのリストが表示されていない場合:

• ALT + ↑ ↓ の組み合わせを使用するか、Space または Enter キーをクリックして、Select を開きます。
• ALT + ↑ または ↓ の組み合わせ、または Enter、Space、Esc、IgbTab キーのいずれかを使用して、IgbSelect を閉じます。
• ← → キーを使用すると、リスト内の前の項目が選択されます。
• ↑ ↓ キーを使用すると、リスト内の次の項目が選択されます。
• Home キーまたは End キーを使用すると、リストの最初または最後の項目が選択されます。
• 文字を入力すると、項目のリストが照会され、現在のユーザー入力に最も近いものが選択されます。

選択がフォーカスされ、オプションのリストが表示されている場合:

• Enter キーまたは Space キーを使用すると、項目が選択され、リストが閉じます。
• ← → キーを使用すると、リスト内の前の項目がアクティブになります。
• ↑ ↓ キーを使用すると、リスト内の次の項目がアクティブになります。
• Home キーまたは End キーを使用すると、リストの最初または最後の項目がアクティブになります。

IgbSelect コンポーネントは、項目の単一選択のみをサポートします。

API リファレンス

• IgbSelect
• IgbSelectItem
• IgbSelectHeader
• IgbSelectGroup
• スタイル設定 & テーマ

その他のリソース

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