Button コンポーネント

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

ライブ デモ

構造

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

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

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

作業の開始

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

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

npm install igniteui-angular

次に、IgxButtonDirective をインポートし、コンポーネントの imports コレクションに追加します。

import { Component } from '@angular/core';
import { IgxButtonDirective } from 'igniteui-angular/directives';

@Component({
    selector: 'app-button',
    imports: [IgxButtonDirective],
    template: '<button igxButton>Save changes</button>'
})
export class ButtonComponent {}

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

<button igxButton></button>

使用方法

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

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

<button igxButton>Save changes</button>

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

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

<button igxButton="contained">
    <span igxButtonIcon="prefix">download</span>
    Download
    <span igxButtonIcon="suffix">arrow_forward</span>
</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 に設定されることに注意してください。

Outlined ボタン

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

Flat ボタン

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

Floating Action ボタン

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

状態

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

<button igxButton="contained" [disabled]="true">Disabled</button>

インタラクション状態

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

<button igxButton="contained" igxRipple="white" [igxRippleCentered]="true" [igxRippleDuration]="2000">
    Ripple
</button>

レイアウト テンプレート

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

<span igxButton="outlined" igxButtonColor="white" igxButtonBackground="#72da67" igxRipple="white">
    Span button
</span>

サイズ

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

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

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

ダウンロード

Download Button 属性を設定すると、リンクされた URL に移動する代わりに、保存するように求められます。

<button
    igxButton="contained"
    href=""
    download="url"
    target="_blank">
    Download
</button>

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

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

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

Do	Don’t

プロパティ

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

Angular Button はディレクティブとして提供され、次のプロパティを公開します。完全な型定義については API リファレンスを参照してください。

スタイル設定

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

Sass テーマ

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

CSS 変数

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

スタイル パーツ

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

カスタム Tailwind ユーティリティ クラスを使用して Button をスタイル設定できます。最初に Tailwind を設定 してください。

グローバル スタイルシートの Tailwind インポートと併せて、ユーティリティ ファイルを含めます:

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

light-flat-button、light-contained-button、light-outlined-button、light-fab-button などのバリアント固有のクラスを使用します:

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

感嘆符 (!) は、ユーティリティ クラスが Button のデフォルト テーマより優先されるようにします。

アクセシビリティ

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

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

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

スクリーン リーダー / ARIA

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

• Button はネイティブの button または a 要素を使用するため、支援技術は対応するネイティブのロールとキーボード セマンティクスを受け取ります。
• アイコンのみの Button には、aria-label または他のアクセシブルな名前付けの仕組みを提供してください。
• 無効な 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 リファレンス

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

依存関係

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

その他のリソース

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

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

関連コンポーネント

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

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

FAQ