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 の使用を開始する最も簡単な方法は次のとおりです:

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

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

API リファレンス

その他のリソース

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