Button コンポーネント

Blazor Button コンポーネントを使用すると、Blazor アプリでアクションをトリガーするクリック可能な要素を有効にできます。ボタンのバリアント、スタイル、サイズを完全に制御できます。また、Button コンポーネントでは、クリックの処理、ボタンの切り替え、必要に応じたボタンの無効化も行えます。

ライブ デモ

構造

Blazor Button は、ラベルとオプションのプレフィックスおよびサフィックス コンテンツをコンポーネントのシャドウ DOM 内にレンダリングします。

Button は、そのコンテンツを base CSS パーツ内にレンダリングします。ラベルにはデフォルト スロットを使用し、ラベルの前後のオプションのコンテンツには prefix スロットと suffix スロットを使用します。

<igc-button>
├── ::part(base)
├── prefix slot
├── default slot content
└── suffix slot
</igc-button>

作業の開始

Blazor Button を使用するには、基本的なプロジェクトのセットアップについて Ignite UI for Blazor の作業の開始 トピックに従い、その後ターゲット プラットフォーム用にコンポーネントを登録します。

IgniteUI.Blazor パッケージを使用する Blazor の場合は、次のように Button モジュールを登録します:

// 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 />

使用方法

Blazor Button は、アクションのトリガー、フォーム データの送信、または別のページへの移動に使用します。アクションに適したボタンのタイプとバリアントを選択し、必要に応じてアイコンなどのオプションのコンテンツを追加します。

Button のコンテンツは、そのデフォルト スロットに配置されます。アクションの目的がすべてのユーザーに明確になるように、アクションのラベルをボタンのコンテンツとして追加してください。

<IgbButton>Save changes</IgbButton>

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

prefix スロットと suffix スロットにシンプルなテキスト、記号、絵文字を追加する場合は <span> 要素を、アイコンを追加する場合は IgbIcon コンポーネントを使用することをお勧めします。

<IgbButton Variant="@ButtonVariant.Contained">
    <span slot="prefix">Download</span>
    <IgbIcon slot="suffix" IconName="download"></IgbIcon>
</IgbButton>

タイプ

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

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

バリアント

5 種類のボタンがサポートされています。目立たせたい主要なアクションには contained ボタン、二次的なアクションには outlined ボタン、控えめなアクションには flat ボタン、目立たせたいメインのアクションには floating action ボタン (Fab)、アイコンで表されるアクションには icon ボタンを使用します。Icon Button では、他の 4 つのバリアントのいずれも使用できます。

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" />

状態

すべてのボタンは有効と無効の両方のバリアントをサポートしているため、各 Button を無効状態で挿入することもできます。Figma では、プロパティ パネルのブール型プロパティを使用して 2 つの状態を切り替えることができます。コードでは、アクションが現在利用できない場合に disabled プロパティまたは属性を使用します。

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

インタラクション状態

Figma では、有効なボタンは Idle、Hover、Focused、Focused & Hover の状態をサポートしており、State プロパティを変更することで切り替えることができます。コードでは、これらのインタラクション状態はプラットフォームの Button コンポーネントによって提供され、キーボード ユーザーのために可視のフォーカス インジケーターを維持する必要があります。

<igc-button variant="contained">Ripple and focus states</igc-button>

レイアウト テンプレート

Contained、Outlined、Flat、および Floating Action ボタンは、柔軟なアイコンとラベルのテンプレートをサポートします。Figma では、アイコンの表示 / 非表示を Left Icon および Right Icon のブール型プロパティで切り替えることができます。Icon Button にする場合は、Content プロパティを Icon に設定します。

<IgbButton Variant="@ButtonVariant.Outlined">
    <span slot="prefix">★</span>
    Save changes
    <span slot="suffix">→</span>
</IgbButton>

サイズ

ユーザーは、CSS 変数 --ig-size を使用して IgbButton のサイズを変更できます。

<IgbButton Class="button-size-small" Variant="ButtonVariant.Contained">
    Small
</IgbButton>

.button-size-small {
    --ig-size: var(--ig-size-small);
}

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

ダウンロード

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

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

使用すべき場合と使用すべきでない場合

使用すべき場合: 状態を変更する、データを送信する、またはアプリケーションのコマンドをトリガーするアクションには Button を使用します。

使用すべきでない場合: アクションがアイコンのみで表され、テキスト ラベルを必要としない場合は、Icon Button を使用します。

Do	Don’t

プロパティ

Blazor Button は、そのコンテンツ、外観、動作を制御するためのプラットフォーム固有のプロパティを公開します。

Blazor Button は、次のプロパティを公開します。

スタイル設定

テーマ設定、CSS 変数、または CSS パーツを使用して、アプリケーションのビジュアル言語に合わせて Button をカスタマイズします。

Sass テーマ

標準の Ignite UI for Blazor テーマ ワークフローを使用して、アプリケーションの他の部分と一貫性のあるスタイルで Button をカスタマイズします。

CSS 変数

Button 要素で生成された CSS 変数を使用して、特定のインスタンスのテーマ値をオーバーライドします。バリアント固有のテーマ関数は、プライマリ テーマ パラメーターから関連するインタラクション状態の値を導出します。

スタイル パーツ

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;
}

Tailwind によるスタイル設定

igniteui-theming のカスタム Tailwind ユーティリティ クラスを使用して Button をスタイル設定できます。最初に Tailwind を設定 してから、グローバル スタイルシートに Ignite UI ユーティリティをインポートします:

@import "tailwindcss";
@import "igniteui-theming/tailwind/utilities/material.css";

<IgbButton Class="!light-contained-button ![--background:#7B9E89]">Contained Button</IgbButton>

感嘆符 (!) は、Tailwind ユーティリティを Button のデフォルト テーマ スタイルより優先させます。

アクセシビリティ

Blazor Button は、アクションのための、また href が設定されている場合はナビゲーションのためのインタラクティブなコントロールです。 コマンドにはネイティブのボタン動作を使用し、ナビゲーションにはリンクの動作を維持してください。

キーボード インタラクション

Button は、レンダリングされるネイティブ コントロールのキーボード動作を使用します。無効な Button はインタラクティブではなく、href を持つ Button はコマンド ボタンではなくリンクとしてレンダリングされます。

スクリーン リーダー / ARIA

Button は、コマンド アクションの場合はネイティブの button を、href が設定されている場合は a 要素をレンダリングします。 ネイティブ要素が適切なロールとキーボード セマンティクスを提供します。

• Button に意味のあるテキストが含まれている場合、その表示コンテンツがアクセシブル名として使用されます。
• アイコンのみの Button には、aria-label または他のアクセシブルな名前付けの仕組みを提供してください。
• 無効な Button は、レンダリングされたネイティブ コントロールを通じて無効状態を公開します。
• Button のクリック イベント ハンドラーはアプリケーションのアクションを実行するものであり、Button のアクセシブル名、ロール、状態を置き換えるものではありません。

アクセシビリティ準拠

このトピックは、製品レベルの WCAG、Section 508、または EN 301 549 への適合を主張するものではありません。レンダリングされた Button とその周囲のアプリケーションを、対象プロジェクトに適用されるアクセシビリティ要件に照らして検証してください。

ユーザー側の責任:

• すべての Button、特にアイコンのみの Button に、意味のあるアクセシブル名を付けてください。
• アクションにはコマンド Button を、ナビゲーションには href を使用してください。一方をもう一方で模倣しないでください。
• アクションや状態を伝える手段として、色、ホバー、フォーカスのスタイルのみに頼らないでください。
• Button のテーマをカスタマイズする際は、十分なコントラストと可視のフォーカス インジケーターを維持してください。

トラブルシューティング

Button をコマンド、ナビゲーション リンク、またはフォーム コントロールとして扱う前に、このセクションで制約と一般的な判断のポイントを確認してください。

Button がリンクのように動作するのはなぜですか?

href が設定されている場合、Button はコマンド アクションではなくナビゲーションに使用されます。コントロールが URL への移動ではなくアプリケーション ロジックをトリガーする必要がある場合は、href を削除してください。

Button がキーボードでフォーカスできないのはなぜですか?

Button が無効になっていないか、または周囲のアプリケーションがフォーカス動作を変更していないかを確認してください。キーボード ナビゲーションで利用できる必要があるアクションには、フォーカス可能な Button を使用してください。

既知の制限

Button には、プラットフォームに依存しない次の制限があります:

• すべてのアクションには、テキスト ラベルまたは他のアクセシブルな名前付けの仕組みを使用してください。ラベルのないアイコンのみの Button は、それ自体ではその目的を伝えません。
• href を設定すると、Button はアクション コントロールからナビゲーション コントロールに変わります。アイコンのみのアクションには Icon Button を使用し、そのアクセシブル名を別途検証してください。
• Button の視覚的な外観は、周囲のアプリケーションのアクションが利用可能または有効かどうかを決定するものではありません。その状態とフィードバックはアプリケーション ロジックが提供する必要があります。

API リファレンス

Blazor Button API リファレンスには、対象プラットフォーム向けの検証済みの完全な API サーフェスが記載されています。

依存関係

Blazor Button には、対応する Blazor パッケージとテーマ スタイルシートが必要です。サイズ設定の例では、IgbRadio および IgbRadioGroup コンポーネントも使用しています。

その他のリソース

次のリソースでは、Blazor Button に関する追加のガイダンスとプロジェクトのサポートを提供します。

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

関連コンポーネント

Blazor Button は、アクションに特別な表現が必要な場合に、関連コンポーネントと組み合わせて使用されることが一般的です。

• Icon Button は、アイコンのみのアクションを対象としています。

FAQ