Angular Icon Button (アイコン ボタン) の概要
Ignite UI for Angular Icon Button ディレクティブを任意のアイコン要素に適用して高機能なボタンを構成できます。igxIconButton には、flat、outlined、およびデフォルトの contained 3 つのタイプがあります。
Angular Icon Button の例
Ignite UI for Angular Icon Button を使用した作業の開始
Ignite UI for Angular Icon Button ディレクティブを初期化するには、Ignite UI for Angular をインストールする必要があります。既存の Angular アプリケーションで、以下のコマンドを入力します。
ng add igniteui-angular
Ignite UI for Angular については、「はじめに」トピックををご覧ください。
次の手順は、IgxIconButtonDirective をスタンドアロンの依存関係としてインポートすることです:
// home.component.ts
...
import { IgxIconButtonDirective } from 'igniteui-angular';
// import { IgxIconButtonDirective } from '@infragistics/igniteui-angular'; for licensed package
@Component({
selector: 'app-home',
template: `
<button igxIconButton="outlined">
<igx-icon>home</igx-icon>
</button>`,
styleUrls: ['home.component.scss'],
standalone: true,
imports: [IgxIconButtonDirective]
})
export class HomeComponent {}
Ignite UI for Angular Icon Button ディレクティブをインポートしたので、要素で igxIconButton ディレクティブの使用を開始できます。
Angular Icon Button のタイプ
Flat アイコン ボタン
igxIconButton ディレクティブを使用して、シンプルなフラット アイコン ボタンをコンポーネント テンプレートに追加します。
<button igxIconButton="flat">
<igx-icon>edit</igx-icon>
</button>
Contained アイコン ボタン
Contained アイコン ボタンを作成するには、igxIconButton プロパティの値を変更するだけです。タイプを選択しない場合、デフォルト値は contained です。
<button igxIconButton>
<igx-icon>favorite</igx-icon>
</button>
Outlined アイコン ボタン
同様に、アウトライン タイプに切り替えることができます。
<button igxIconButton="outlined">
<igx-icon>more_vert</igx-icon>
</button>
例
Disabled アイコン ボタン
アイコン ボタンを無効にしたい場合は、disabled プロパティを使用できます。このサンプルでは、igxIconButton ディレクティブを使用してさまざまなファミリのアイコンを使用する方法も示します。
<button igxIconButton="flat" disabled>
<igx-icon family="fa" name="fa-home"></igx-icon>
</button>
SVG アイコン
マテリアル アイコンに加えて、 igxIconButton ディレクティブは、アイコンとしての SVG 画像の使用もサポートしています。これを行うには、まず IgxIconService 依存関係を挿入し、次に addSvgIcon メソッドを使用して SVG ファイルをキャッシュにインポートする必要があります。詳細については、Icon トピックの SVG セクションを参照してください。
constructor(private _iconService: IgxIconService) { }
public ngOnInit() {
// register custom SVG icon
this._iconService.addSvgIcon('rain', 'assets/images/card/icons/rain.svg', 'weather-icons');
}
<button igxIconButton>
<igx-icon family="weather-icons" name="rain"></igx-icon>
</button>
Size (サイズ)
ユーザーは、--ig-size カスタム CSS プロパティを使用して、3 つの事前定義された igxIconButton サイズのいずれかを選択できます。デフォルトでは、コンポーネントのサイズは medium に設定されています。
上記のサンプルからわかるように、igxIconButton ディレクティブを使用して、span や div などの要素を Ignite UI for Angular スタイルのアイコン ボタンに変換することもできます。
Icon Button のスタイル設定
Icon Button テーマのプロパティ マップ
プライマリ プロパティを変更すると、関連するすべての依存プロパティが自動的に更新されます。
Flat アイコン ボタン
| プライマリ プロパティ | 依存プロパティ | 説明 |
|---|---|---|
$foreground | $hover-foreground | ホバー時のアイコンの色 |
| $focus-foreground | フォーカス時のアイコンの色 | |
| $focus-hover-foreground | フォーカス + ホバー アイコンの色 | |
| $active-foreground | アクティブ時のアイコンの色 | |
| $hover-background | ホバー時の背景 | |
| $focus-background | フォーカス時の背景 | |
| $focus-hover-background | フォーカス + ホバー時の背景 | |
| $active-background | アクティブ時の背景 |
Contained アイコン ボタン
| プライマリ プロパティ | 依存プロパティ | 説明 |
|---|---|---|
$background | $foreground | アイコンの色 |
| $hover-background | ホバー時の背景 | |
| $focus-background | フォーカス時の背景 | |
| $focus-foreground | フォーカス時のアイコンの色 | |
| $focus-hover-background | フォーカス + ホバー時の背景 | |
| $active-background | アクティブ時の背景 | |
| $hover-foreground | ホバー時のアイコンの色 | |
| $focus-hover-foreground | フォーカス + ホバー アイコンの色 | |
| $active-foreground | アクティブ時のアイコンの色 | |
| $shadow-color | フォーカス時のシャドウ | |
| $focus-border-color | フォーカス時の境界線の色 | |
| $disabled-background | 無効時の背景 | |
| $disabled-foreground | 無効なアイコンの色 |
Outlined アイコン ボタン
| プライマリ プロパティ | 依存プロパティ | 説明 |
|---|---|---|
$foreground | $hover-foreground | ホバー時のアイコンの色 |
| $focus-foreground | フォーカス時のアイコンの色 | |
| $focus-hover-foreground | フォーカス + ホバー アイコンの色 | |
| $active-foreground | アクティブ時のアイコンの色 | |
| $hover-background | ホバー時の背景 | |
| $focus-background | フォーカス時の背景 | |
| $focus-hover-background | フォーカス + ホバー時の背景 | |
| $active-background | アクティブ時の背景 | |
| $border-color | デフォルトの境界線の色 | |
| $focus-border-color | フォーカス時の境界線の色 |
Flat アイコン ボタン
| プライマリ プロパティ | 依存プロパティ | 説明 |
|---|---|---|
$foreground | $hover-foreground | ホバー時のアイコンの色 |
| $focus-foreground | フォーカス時のアイコンの色 | |
| $focus-hover-foreground | フォーカスかつホバー時のアイコン色 | |
| $active-foreground | アクティブ時のアイコンの色 | |
| $hover-background | ホバー時の背景の色 | |
| $focus-background | フォーカス時の背景の色 | |
| $focus-hover-background | フォーカス時とホバー時の背景の色 | |
| $active-background | アクティブ時の背景の色 |
Contained アイコン ボタン
| プライマリ プロパティ | 依存プロパティ | 説明 |
|---|---|---|
$background | $foreground | アイコンの色 |
| $hover-background | ホバー時の背景の色 | |
| $focus-background | フォーカス時の背景の色 | |
| $focus-foreground | フォーカス時のアイコンの色 | |
| $focus-hover-background | フォーカス時とホバー時の背景の色 | |
| $active-background | アクティブ時の背景の色 | |
| $hover-foreground | ホバー時のアイコンの色 | |
| $focus-hover-foreground | フォーカスかつホバー時のアイコン色 | |
| $active-foreground | アクティブ時のアイコンの色 | |
| $shadow-color | フォーカス時のシャドウの色 | |
| $focus-border-color | フォーカス時の境界線の色 | |
| $disabled-background | 無効な背景の色 | |
| $disabled-foreground | 無効なアイコンの色 |
Outlined アイコン ボタン
| プライマリ プロパティ | 依存プロパティ | 説明 |
|---|---|---|
$foreground | $hover-foreground | ホバー時のアイコンの色 |
| $focus-foreground | フォーカス時のアイコンの色 | |
| $focus-hover-foreground | フォーカスかつホバー時のアイコン色 | |
| $active-foreground | アクティブ時のアイコンの色 | |
| $hover-background | ホバー時の背景の色 | |
| $focus-background | フォーカス時の背景の色 | |
| $focus-hover-background | フォーカス時とホバー時の背景の色 | |
| $active-background | アクティブ時の背景の色 | |
| $border-color | 境界線の色 | |
| $focus-border-color | フォーカス時の境界線の色 |
Flat アイコン ボタン
| プライマリ プロパティ | 依存プロパティ | 説明 |
|---|---|---|
$foreground | $hover-foreground | ホバー時のアイコンの色 |
| $focus-foreground | フォーカス時のアイコンの色 | |
| $focus-hover-foreground | フォーカスかつホバー時のアイコン色 | |
| $active-foreground | アクティブ時のアイコンの色 | |
| $disabled-foreground | 無効なアイコンの色 | |
| $shadow-color | アイコン ボタンのシャドウの色 |
Contained アイコン ボタン
| プライマリ プロパティ | 依存プロパティ | 説明 |
|---|---|---|
$background | $foreground | アイコンの色 |
| $hover-background | ホバー時の背景の色 | |
| $focus-background | フォーカス時の背景の色 | |
| $focus-foreground | フォーカス時のアイコンの色 | |
| $focus-hover-background | フォーカス時とホバー時の背景の色 | |
| $active-background | アクティブ時の背景の色 | |
| $hover-foreground | ホバー時のアイコンの色 | |
| $focus-hover-foreground | フォーカスかつホバー時のアイコン色 | |
| $active-foreground | アクティブ時のアイコンの色 | |
| $shadow-color | シャドウの色 | |
| $focus-border-color | フォーカス時の境界線の色 | |
| $disabled-background | 無効な背景の色 | |
| $disabled-foreground | 無効なアイコンの色 |
Outlined アイコン ボタン
| プライマリ プロパティ | 依存プロパティ | 説明 |
|---|---|---|
$foreground | $hover-foreground | ホバー時のアイコンの色 |
| $focus-foreground | フォーカス時のアイコンの色 | |
| $focus-hover-foreground | フォーカスかつホバー時のアイコン色 | |
| $active-foreground | アクティブ時のアイコンの色 | |
| $hover-background | ホバー時の背景の色 | |
| $focus-background | フォーカス時の背景の色 | |
| $focus-hover-background | フォーカス時とホバー時の背景の色 | |
| $active-background | アクティブ時の背景の色 | |
| $border-color | 境界線の色 | |
| $focus-border-color | フォーカス時の境界線の色 | |
| $shadow-color | シャドウの色 | |
| $disabled-foreground | 無効なアイコンの色 | |
| $disabled-border-color | 無効なアイコン ボタンの境界線 |
Flat アイコン ボタン
| プライマリ プロパティ | 依存プロパティ | 説明 |
|---|---|---|
$foreground | $hover-foreground | ホバー時のアイコンの色 |
| $focus-foreground | フォーカス時のアイコンの色 | |
| $focus-hover-foreground | フォーカスかつホバー時のアイコン色 | |
| $active-foreground | アクティブ時のアイコンの色 | |
| $disabled-foreground | 無効なアイコンの色 | |
| $hover-background | ホバー時の背景の色 | |
| $focus-background | フォーカス時の背景の色 | |
| $focus-hover-background | フォーカス時とホバー時の背景の色 | |
| $active-background | アクティブ時の背景の色 | |
| $focus-border-color | フォーカス時の境界線の色 |
Contained アイコン ボタン
| プライマリ プロパティ | 依存プロパティ | 説明 |
|---|---|---|
$background | $foreground | アイコンの色 |
| $hover-background | ホバー時の背景の色 | |
| $focus-background | フォーカス時の背景の色 | |
| $focus-foreground | フォーカス時のアイコンの色 | |
| $focus-hover-background | フォーカス時とホバー時の背景の色 | |
| $active-background | アクティブ時の背景の色 | |
| $hover-foreground | ホバー時のアイコンの色 | |
| $focus-hover-foreground | フォーカスかつホバー時のアイコン色 | |
| $active-foreground | アクティブ時のアイコンの色 | |
| $shadow-color | シャドウの色 | |
| $focus-border-color | フォーカス時の境界線の色 | |
| $disabled-background | 無効な背景の色 | |
| $disabled-foreground | 無効なアイコンの色 |
Outlined アイコン ボタン
| プライマリ プロパティ | 依存プロパティ | 説明 |
|---|---|---|
$foreground | $hover-foreground | ホバー時のアイコンの色 |
| $focus-foreground | フォーカス時のアイコンの色 | |
| $focus-hover-foreground | フォーカスかつホバー時のアイコン色 | |
| $active-foreground | アクティブ時のアイコンの色 | |
| $hover-background | ホバー時の背景の色 | |
| $border-color | 境界線の色 | |
| $focus-border-color | フォーカス時の境界線の色 |
最も簡単な方法は、CSS 変数を使用してアイコン ボタンの外観をカスタマイズする方法です。
[igxIconButton="contained"] {
--background: #011627;
--foreground: #fefefe;
--hover-foreground: #011627dc;
--hover-background: #ecaa53;
--focus-foreground: #011627dc;
--focus-background: #ecaa53;
--focus-border-color: #0116276c;
--active-foreground: #011627dc;
--active-background: #ecaa53;
}
ボタンのスタイル設定に使用できるパラメーターの完全なリストについては、icon-button-theme セクションを参照してください。
特定のタイプのアイコン ボタン (flat、outlined、contained) のみをスタイリングすることもできます。
そのためには、次のタイプ別テーマ関数を使用します: flat-icon-button-theme、outlined-icon-button-theme、contained-icon-button-theme。
以下は、contained-icon-button-theme 関数を使用して SCSS でカスタム テーマを定義する例です。
@use "igniteui-angular/theming" as *;
$custom-contained: contained-icon-button-theme(
$background: #ECAA53,
);
これにより、ホバー、フォーカス、アクティブなどのさまざまな状態に適した前景の色と背景の色を含む、完全にテーマ設定された contained icon button が生成されます。
Tailwind によるスタイル設定
カスタム Tailwind ユーティリティ クラスを使用して icon button をスタイル設定できます。まず Tailwind を設定してください。
グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:
@import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';
ユーティリティ ファイルには、light テーマと dark テーマの両方のバリエーションが含まれています。
light-*クラスはライト テーマ用です。dark-*クラスはダーク テーマ用です。- プレフィックスの後にコンポーネント名を追加します (例:
light-icon-button、dark-icon-button)。
これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、任意のプロパティを使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。
プロパティの完全なリストは、icon-button-theme で確認できます。構文は次のとおりです:
<button igxIconButton class="!light-icon-button ![--icon-color:#FF4E00]">
<igx-icon>edit</igx-icon>
</button>
Note
ユーティリティ クラスが優先されるようにするには、感嘆符 (!) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。
最終的に、icon button は次のようになります:
API リファレンス
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。
GitHub