Blazor Button (ボタン) の概要

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

Blazor Button の例

使用方法

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

// in Program.cs file

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

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

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

<IgbButton />

Prefix / Suffix

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

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

タイプ

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

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

Button のバリアント

Contained ボタン

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

<IgbButton Variant="@ButtonVariant.Contained" />

Outlined ボタン

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

<IgbButton Variant="@ButtonVariant.Outlined" />

Flat ボタン

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

<IgbButton Variant="@ButtonVariant.Flat" />

Floating Action ボタン

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

<IgbButton Variant="@ButtonVariant.Fab" />

ボタンのサイズ設定

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

<IgbRadioGroup id="radioGroup" Alignment="ContentOrientation.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;
    }
}

上記のコードを実装した結果は、次のようになります:

ダウンロード

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

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

スタイル設定

IgbButton は、スタイル設定に使用できる 3 つの CSS パーツを公開します。

名前	説明
`base`	igc-button コンポーネントのネイティブボタン要素。
`prefix`	igc-button コンポーネントのプレフィックスコンテナー。
`suffix`	igc-button コンポーネントのサフィックスコンテナー。

base CSS パーツを使用すると、ラップされた要素 (<button> または <a>) のスタイルを設定できます。

igc-button::part(base) {
  background-color: var(--ig-primary-500);
  color: var(--ig-primary-500-contrast);
  padding: 18px;
}