Blazor Switch (スイッチ)

Ignite UI for Blazor Switch コンポーネントは、iOS のスイッチ コンポーネントと同様に動作するバイナリ選択の選択コンポーネントです。

Blazor Switch の例

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(IgbSwitchModule));
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <IgbSwitch>Switch</IgbSwitch>
</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 エクスペリエンスを構築します。

無料で試してみる

使用方法

IgbSwitch コンポーネントにより、オン/オフ状態を切り替えることができます。デフォルトのスタイル設定はマテリアル デザイン ガイドラインの選択コントロールの仕様に基づきます。

まず、次のコマンドを実行して Ignite UI for Blazor をインストールする必要があります:

// in Program.cs file

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

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

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

<IgbSwitch />
razor

IgbSwitch コンポーネントは標準の <form> 要素では機能しません。代わりに Form を使用してください。

例

ラベル

スイッチに意味のあるラベルを付けるには、開始タグと終了タグの間にテキストを配置するだけです。

<IgbSwitch>Label</IgbSwitch>
razor

スイッチの LabelPosition 属性を設定することにより、スイッチの切り替えの前または後にラベルを配置するかどうかを指定できます。許可される値は、before と after (デフォルト) です。

<IgbSwitch LabelPosition="@CheckboxBaseLabelPosition.Before">Label</IgbSwitch>
razor

スイッチには、スイッチの外部の要素でラベルを付けることもできます。この場合、ユーザーはニーズに応じてラベルの位置とスタイルを完全に制御できます。

<span id="switch-label>Label</span>
<IgbSwitch AriaLabelledBy="switch-label" />
razor

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(IgbSwitchModule));
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="wrapper" style="display: flex; align-items: center;">
        <span id="switch-label">Label</span>
        <IgbSwitch AriaLabelledby="switch-label" LabelPosition="CheckboxBaseLabelPosition.Before" />
    </div>
</div>

@code {
    

}razorコピー

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

チェック済み

スイッチをオンに切り替えるには、checked 属性を使用できます。

<IgbSwitch Checked="true" />
razor

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(IgbSwitchModule));
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <IgbSwitch Checked="true">Label</IgbSwitch>
</div>

@code {
    

}razorコピー

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

必須

required 属性を使用して、スイッチを必須としてマークできます。

<IgbSwitch Required="true" />
razor

無効

invalid 属性を使用して、スイッチを無効としてマークできます。

<IgbSwitch Invalid="true" />
razor

オフ

スイッチをオフにするには、disabled 属性を使用できます。

<IgbSwitch Disabled="true" />
razor

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(IgbSwitchModule));
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <IgbSwitch Disabled="true">Label</IgbSwitch>
</div>

@code {
    

}razorコピー

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

フォーム

Form でスイッチを使用する場合は、name と value の属性を使用できます。

<IgbSwitch Name="wifi" Value="enabled" />
razor

スタイル設定

IgbSwitch コンポーネントは、いくつかの CSS パーツを公開して、スタイルを完全に制御できるようにします。

名前	説明
base	スイッチの基本ラッパー。
control	スイッチの入力要素。
thumb	スイッチの位置インジケーター。
label	スイッチのラベル。

igc-switch::part(thumb) {
  background-color: var(--ig-success-500);
  box-shadow: none;
}

igc-switch::part(thumb checked) {
  background-color: var(--ig-gray-50);
}

igc-switch::part(control checked) {
  background-color: var(--ig-success-500);
}
css

EXAMPLE

API リファレンス

• LabelPosition
• IgbSwitch
• スタイル設定 & テーマ

その他のリソース

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