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 スタイルのアイコンボタンに変換することもできます。

Angular 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 セクションを参照してください。

API リファレンス

その他のリソース

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

Angular Icon Button (アイコン ボタン) の概要