Button コンポーネント

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

ライブ デモ

構造

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

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

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

作業の開始

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

igniteui-webcomponents パッケージを使用する Web Components の場合は、パッケージをインストールします:

npm install igniteui-webcomponents

次に、以下のように、Button とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります:

import { defineComponents, IgcButtonComponent } from "igniteui-webcomponents";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcButtonComponent);

Button の使用を開始する最も簡単な方法は次のとおりです:

<igc-button></igc-button>

使用方法

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

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

<igc-button>Save changes</igc-button>

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

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

<igc-button type="button" variant="contained">
    <span slot="prefix">Download</span>
    <igc-icon slot="suffix" name="download"></igc-icon>
</igc-button>

タイプ

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 に設定されることに注意してください。

<igc-button variant="contained">Contained</igc-button>

Outlined ボタン

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

<igc-button variant="outlined">Outlined</igc-button>

Flat ボタン

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

<igc-button variant="flat">Flat</igc-button>

Floating Action ボタン

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

<igc-button variant="fab">Fab</igc-button>

状態

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

<igc-button variant="contained" disabled>Disabled</igc-button>

インタラクション状態

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 に設定します。

<igc-button variant="outlined">
    <span slot="prefix">★</span>
    Save changes
    <span slot="suffix">→</span>
</igc-button>

サイズ

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

<igc-button class="button-size-small" variant="contained">
    Small
</igc-button>

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

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

ダウンロード

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

<igc-button
    href=""
    variant="contained"
    download="url_to_content"
    target="_blank">
    Download
</igc-button>

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

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

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

Do	Don’t

プロパティ

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

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

スタイル設定

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

Sass テーマ

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

CSS 変数

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

スタイル パーツ

Button は、スタイル設定に使用できる 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";

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

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

アクセシビリティ

Web Components 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 リファレンス

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

依存関係

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

その他のリソース

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

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

関連コンポーネント

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

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

FAQ