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/directives';
// 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 テーマのプロパティ マップ

プライマリ プロパティを変更すると、関連するすべての依存プロパティが自動的に更新されます。

最も簡単な方法は、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>

最終的に、icon button は次のようになります:

API リファレンス

• IgxIconButtonDirective
• IgxIconButton スタイル
• IgxRippleDirective

その他のリソース

コミュニティに参加して新しいアイデアをご提案ください。

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