Blazor Button (ボタン) の概要

Blazor Button コンポーネントを使用すると、Blazor アプリでアクションをトリガーするクリック可能な要素を有効にできます。ボタンのバリアントの設定方法、ラップされた要素のスタイルの構成方法、およびサイズの定義方法を完全に制御できます。Button コンポーネントは、Blazor Button OnClick イベント、Blazor ボタンの切り替え、Blazor ボタンの無効化などを通じて柔軟性を提供します。

Blazor Button の例

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

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <style>
        .buttonContainer {
            display: flex;
            justify-content: space-evenly;
            margin-top: 20px;
        }
    </style>

    <div class="buttonContainer">
        <IgbButton style="margin:5px" Variant="ButtonVariant.Flat">Flat</IgbButton>
        <IgbButton style="margin:5px" Variant="ButtonVariant.Contained">Contained</IgbButton>
        <IgbButton style="margin:5px" Variant="ButtonVariant.Outlined">Outlined</IgbButton>
    </div>
</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 エクスペリエンスを構築します。

無料で試してみる

使用方法

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

// in Program.cs file

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

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

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

<IgbButton />
razor

Prefix / Suffix

IgbButton コンポーネントの prefix スロットと suffix スロットを使用すると、ボタンのメイン コンテンツの前後に異なるコンテンツを追加できます。

<IgbButton Variant="@ButtonVariant.Contained">
    <span slot="prefix">+</span>Click me<span slot="suffix">-</span>
</IgbButton>
razor

タイプ

Href 属性が設定されている場合、ボタン コンポーネントはその内部構造を <button> から <a> タイプの要素に変更します。その場合、ボタンは通常のリンクと考えることができます。Href 属性を設定すると、Rel、Target および Download 属性も設定できます。 ボタン コンポーネントが実際の <button> 要素を内部で使用する場合、プロパティを次のいずれかの値に設定することで、その DisplayType を指定できます。

• Submit - フォーム データを送信する場合
• reset - フォーム データを初期値にリセットする場合
• button - ウェブページのどこかにカスタム機能を備えたボタンを追加する場合

Button のバリアント

Contained ボタン

variant を使用して、コンポーネント テンプレートにシンプルな contained ボタンを追加します。バリアントを設定しない場合、デフォルトでは contained に設定されることに注意してください。

<IgbButton Variant="@ButtonVariant.Contained" />
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(IgbButtonModule));
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <IgbButton Variant="ButtonVariant.Contained">Contained</IgbButton>
</div>

@code {
    

}razorコピー

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

Outlined ボタン

outlined ボタンを作成するために必要なのは、variant プロパティの値を変更することだけです。

<IgbButton Variant="@ButtonVariant.Outlined" />
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(IgbButtonModule));
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <IgbButton style="margin:5px" Variant="ButtonVariant.Outlined">Outlined</IgbButton>
</div>

@code {
    

}razorコピー

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

Flat ボタン

同様に、flat バリアントに切り替えることができます。

<IgbButton Variant="@ButtonVariant.Flat" />
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(IgbButtonModule));
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <IgbButton Variant="ButtonVariant.Flat">Flat</IgbButton>
</div>

@code {
    

}razorコピー

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

Floating Action ボタン

variant プロパティを fab に設定することで、フローティング アクション ボタンを作成できます。

<IgbButton Variant="@ButtonVariant.Fab" />
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(IgbButtonModule));
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <IgbButton Variant="ButtonVariant.Fab">
        <span slot="prefix">+</span>
        Add
    </IgbButton>
</div>

@code {
    

}razorコピー

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

ボタンのサイズ設定

ユーザーは、CSS 変数 --ig-size を使用して button コンポーネントのサイズを変更できます。次の例では、すべてのサイズ値を表示するためのラジオ ボタンをいくつか追加します。このようにして、選択されるたびにボタンの size プロパティを変更します。

<IgbRadioGroup id="radioGroup" Alignment="RadioGroupAlignment.Horizontal" >
    <IgbRadio Value="small" LabelPosition="RadioLabelPosition.After" @onclick="OnSmallClick">Small</IgbRadio>
    <IgbRadio Value="medium" LabelPosition="RadioLabelPosition.After" @onclick="OnMediumClick">Medium</IgbRadio>
    <IgbRadio Value="large" LabelPosition="RadioLabelPosition.After" Checked="true" @onclick="OnLargeClick">Large</IgbRadio>
</IgbRadioGroup>

@code {
    private SizableComponentSize SizableComponentSize = SizableComponentSize.Large;

    protected override void OnInitialized()
    {
    }

    public void OnSmallClick(EventArgs e)
    {
        SizableComponentSize = SizableComponentSize.Small;
    }

    public void OnMediumClick(EventArgs e)
    {
        SizableComponentSize = SizableComponentSize.Medium;
    }

    public void OnLargeClick(EventArgs e)
    {
        SizableComponentSize = SizableComponentSize.Large;
    }
}
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(IgbButtonModule));
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<style>
.buttonContainer {
display: flex;
justify-content: space-evenly;
margin-top: 20px;
}

#radioGroup {
display: flex;
margin: 0 auto;
width: 15%;
}
</style>

<style>
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
.size-small {
    --ig-size: var(--ig-size-small);
}

.size-medium {
    --ig-size: var(--ig-size-medium);
}

.size-large {
    --ig-size: var(--ig-size-large);
}
</style>
<div class="container vertical">
    <IgbRadioGroup id="radioGroup" Alignment="RadioGroupAlignment.Horizontal" >
        <IgbRadio name="size" Value="small" LabelPosition="RadioLabelPosition.After" Change="OnRadioSizeClick">Small</IgbRadio>
        <IgbRadio name="size" Value="medium" LabelPosition="RadioLabelPosition.After" Checked="true" Change="OnRadioSizeClick">Medium</IgbRadio>
        <IgbRadio name="size" Value="large" LabelPosition="RadioLabelPosition.After" Change="OnRadioSizeClick">Large</IgbRadio>
    </IgbRadioGroup>

    <div class="buttonContainer">
        <IgbButton class="@ButtonsSize" Variant="ButtonVariant.Flat">Flat</IgbButton>
        <IgbButton class="@ButtonsSize" Variant="ButtonVariant.Contained">Contained</IgbButton>
        <IgbButton class="@ButtonsSize" Variant="ButtonVariant.Outlined">Outlined</IgbButton>
        <IgbButton class="@ButtonsSize" Variant="ButtonVariant.Fab">Like</IgbButton>
    </div>
</div>

@code {
    

    private string ButtonsSize = "size-medium";

    public void OnRadioSizeClick(IgbRadioChangeEventArgs e)
    {
        this.ButtonsSize = $"size-{e.Detail.Value.ToLower()}";
    }
}razorコピー

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
.size-small {
    --ig-size: var(--ig-size-small);
}

.size-medium {
    --ig-size: var(--ig-size-medium);
}

.size-large {
    --ig-size: var(--ig-size-large);
}cssコピー

ダウンロード

download プロパティを設定すると、リンクされた URL に移動する代わりに、保存するように求められます。

<IgbButton Variant="@ButtonVariant.Contained" Download="Url" Href="https://www.infragistics.com/" Target="@ButtonBaseTarget._blank">
    Download
</IgbButton>
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(IgbButtonModule));
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <IgbButton Variant="ButtonVariant.Contained" Download="Url" Href="https://www.infragistics.com/" Target="ButtonBaseTarget._blank">
        Download
    </IgbButton>
</div>

@code {
    

}razorコピー

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

スタイル設定

ボタン コンポーネントは、ラッピング要素 (<button> または <a>) のスタイルを設定できる base CSS パーツを公開します。

igc-button::part(base) {
    background-color: #e99221;
    color: #011627;
    padding: 18px;
}
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(IgbButtonModule));
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <style>
        igc-button::part(base) {
            background-color: #e99221;
            color: #011627;
            padding: 18px;
        }
    </style>
    <div>
        <IgbButton Variant="ButtonVariant.Contained">Contained</IgbButton>
    </div>

</div>

@code {
    

}razorコピー

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

API リファレンス

• IgbButtonBase
• IgbButton
• DisplayType
• Download
• Href
• IgbRadioGroup
• IgbRadio

その他のリソース

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