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 ディレクティブを使用して、spandiv などの要素を 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 リファレンス

    その他のリソース

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