Angular Button (ボタン) の概要

Angular Button ディレクティブは、アクション可能なボタンを作成して Web ページ/アプリケーションに追加するために使用されます。簡単にカスタマイズでき、いくつかの組み込み機能を含むさまざまな Angular Button タイプがあります。デフォルトでは、AngularMaterial はネイティブの <button> および <a> 要素を使用して、アクセス可能なエクスペリエンスを提供します。

Ignite UI for Angular Button ディレクティブを任意の button、span、div、または anchor 要素に適用して高機能なボタンを構成できます。Flat ボタン、Contained ボタン、Outlined ボタン、FAB (フローティング アクション ボタン) の Angular ボタン タイプを使用できます。カスタマイズ可能な色、テーマを作成して Angular ボタン スタイルを変更するオプション、ユーザーがボタンのサイズを選択できるようにするオプションなどを提供します。

Angular Button の例

以下の Angular Button の例を作成して、さまざまなボタン タイプが境界線でスタイル設定されている場合、または透明な背景が適用されている場合にどのように表示されるかを示します。

Ignite UI for Angular Button を使用した作業の開始

Ignite UI for Angular Button ディレクティブを使用した作業を開始するには、Ignite UI for Angular をインストールする必要があります。既存の Angular アプリケーションで、以下のコマンドを入力します。

ng add igniteui-angular

Ignite UI for Angular については、「はじめに」トピックをご覧ください。

次に、app.module.ts ファイルに IgxButtonModule をインポートします。

// app.module.ts
import { IgxButtonModule } from 'igniteui-angular/directives';
// import { IgxButtonModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
    imports: [
        ...
        IgxButtonModule,
        ...
    ]
})
export class AppModule {}

あるいは、16.0.0 以降、IgxButtonDirective をスタンドアロンの依存関係としてインポートできます。

// home.component.ts

...
import { IgxButtonDirective } from 'igniteui-angular/directives';
// import { IgxButtonDirective } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: '<button igxButton="flat">Flat</button>',
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IgxButtonDirective]
})
export class HomeComponent {}

Ignite UI for Angular Button モジュールまたはディレクティブをインポートしたので、要素で igxButton ディレクティブの使用を開始できます。

Angular ボタン タイプ

Flat ボタン

igxButton ディレクティブを使用して、シンプルなフラット ボタンをコンポーネント テンプレートに追加します。タイプを選択しない場合、デフォルト値は flat です。

<button igxButton="flat">Flat</button>

Contained ボタン

Contained ボタンを作成するには、igxButton プロパティの値を変更するだけです。

<button igxButton="contained">Contained</button>

Outlined ボタン

同様に、アウトライン タイプに切り替えることができます。

<button igxButton="outlined">Outlined</button>

Icon ボタン

バージョン 17.1.0 以降、IgniteUI for Angular は、アイコンを完全に機能するボタンに変えることを目的とした新しい igxIconButton ディレクティブを公開します。Icon Button の詳細についてはこちらを参照してください。

<button igxIconButton="flat">
  <igx-icon fontSet="material">favorite</igx-icon>
</button>

FAB (フローティング アクション ボタン)

アイコンを使用して、フローティング アクション ボタンを作成します。

<button igxButton="fab">
  <igx-icon fontSet="material">edit</igx-icon>
</button>

拡張 FAB を作成するには、igx-icon の前に任意の要素を追加できます。

<button class="btn" igxButton="fab">
  <span>like</span>
  <igx-icon fontSet="material">favorite</igx-icon>
</button>

例

Angular ボタンの無効化

ボタンを無効にするには、disabled プロパティを使用します。

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

Ripple

igxRipple ディレクティブは、ボタンまたはその他の指定した要素にリップル効果を追加します。`以下のプロパティを使用して、デフォルトのリップル色、位置、および期間を簡単に変更できます。

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

Span

span や div などの要素を Ignite UI for Angular スタイルのボタンに変更するために igxButton ディレクティブを使用できます。デフォルトの色は igxButtonColor と igxButtonBackground プロパティでカスタマイズできます。

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

サイズ

--ig-size カスタム CSS プロパティを使用して、ユーザーが igxButton のサイズを選択できるようにすることができます。これを行うには、まず IgxButtonGroupModule をインポートし、igxButtonGroup コンポーネントによってサイズ値を表示する必要があります。このようにして、選択されるたびに —ig-size CSS プロパティを更新します。

// app.module.ts
...
import { IgxButtonGroupModule } from 'igniteui-angular/button-group';
// import { IgxButtonGroupModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
    imports: [
        ...
        IgxButtonGroupModule
        ...
    ]
})

<!--buttons-density.component.html-->
<igx-buttongroup [values]="sizes" (selected)="selectSize($event)"></igx-buttongroup>
...
<button igxButton="flat">Flat</button>

// buttons-density.component.ts
public size = "large";
public sizes;
public ngOnInit() {
    this.sizes = [
        { label: 'large', selected: this.size === 'large', togglable: true },
        { label: 'medium', selected: this.size === 'medium', togglable: true },
        { label: 'small', selected: this.size === 'small', togglable: true }
    ];
}

public selectSize(event: any) {
    this.size = this.sizes[event.index].label;
}

@HostBinding('style.--ig-size')
protected get sizeStyle() {
    return `var(--ig-size-${this.size})`;
}

以下は結果です。

スタイル設定

Button テーマのプロパティ マップ

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

注: 結果の依存プロパティは、選択したテーマ (Material、Fluent、Bootstrap、Indigo) によって若干異なる場合があります。

ボタンのスタイルを設定するには、タイプ固有のテーマ関数を使用できます: flat-button-theme、outlined-button-theme、contained-button-theme、および fab-button-theme。

各関数は、特定のタイプのボタンのみをターゲットにします。

まず、すべてのテーマ関数とコンポーネント ミックスインを含む themes モジュールをインポートします。

@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

次に、スタイル設定するボタンのタイプ固有のテーマ機能を拡張する新しいテーマを作成します。この例では、contained-button-theme 関数を使用し、$foreground および $background パラメーターに、それぞれの hover および active パラメーターとともに値を渡します。

次のマークアップを前提として:

<div class="my-contained-btn">
  <button igxButton="contained">Contained button</button>
</div>

次のテーマを作成する必要があります:

$custom-contained-theme: contained-button-theme(
    $background: #f9f0ff,
    $foreground: #722ed1,
    $hover-background: #efdbff,
    $hover-foreground: #9254de,
    $active-foreground: #531dab,
    $active-background: #dfc2fa,
);

contained タイプのボタンのスタイル設定に使用できるパラメーターの完全なリストについては、contained-button-theme セクションを参照してください。

最後に、カスタム テーマをアプリケーションに含めます。

.my-contained-btn {
  @include tokens($custom-contained-theme);
}

タイプ別テーマ関数により、ボタンのスタイリングがより簡単になりました。

contained-button-theme 関数と fab-button-theme 関数の場合、$background パラメーターに色の値を指定するだけで済みます。他のすべてのボタンの状態とテキストの色 (指定されていない場合) は、その値に基づいて自動的に生成され、適用されます。

テキストの色は、新しく追加された adaptive-contrast 関数によって、指定された背景に対して黒か白のどちらがより良いコントラストを持つかを計算して決定されます。

flat-button-theme および outlined-button-theme では、状態用の色も自動的に生成されますが、これらは $background ではなく $foreground パラメーターに基づいて計算されます。

以下のサンプルでは、カスタマイズした CSS 変数を使用したボタン コンポーネントが、Ant デザイン システムのボタンに視覚的に似たデザインを実現している様子を確認できます。

Tailwind によるスタイル設定

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

グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:

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

ユーティリティ ファイルには、light テーマと dark テーマの両方のバリエーションが含まれています。

• light-* クラスはライト テーマ用です。
• dark-* クラスはダーク テーマ用です。
• プレフィックスの後にコンポーネント名を追加します。 ボタンにはタイプがあるため、クラスは次のように使用されます: light-contained-button、light-flat-button、dark-outlined-button、dark-fab-button。

これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、任意のプロパティを使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。

プロパティの完全なリストは button-theme で確認できます。これはさまざまなバリエーションで異なって反映されます。flat ボタンと outlined ボタンの主なプロパティは $foreground で、contained ボタンと fab ボタンの主なプロパティは $background です。構文は次のとおりです:

<div class="buttons-sample">
  <div class="button-sample">
    <button
    igxButton="flat"
    class="!light-flat-button ![--foreground:#7B9E89]">
      Flat Button
    </button>
  </div>
  <div class="button-sample">
    <button
    igxButton="contained"
    class="!light-contained-button ![--background:#7B9E89]">
      Contained Button
    </button>
  </div>
  <div class="button-sample">
    <button
    igxButton="outlined"
    class="!light-outlined-button ![--foreground:#7B9E89]">
      Outlined Button
    </button>
  </div>
  <div class="button-sample">
    <button
    igxButton="fab"
    class="!light-fab-button ![--background:#7B9E89]">
      Fab Button
    </button>
  </div>
</div>

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

カスタム サイズ変更

ボタンの高さは、--size 変数を使用して、button を直接ターゲットにして変更できます。

button {
  --size: 50px;
}

または、ユニバーサル変数 --ig-button-size を使用して、すべてのインスタンスをターゲットにすることもできます。

<div class="my-app">
  <button igxButton="contained"></button>
</div>

.my-app {
  --ig-button-size: 50px;
}

事前定義されたサイズの 1 つを使用して、それを --ig-size 変数に割り当てることもできます。--ig-size に使用可能な値は、--ig-size-small、--ig-size-medium、--ig-size-large です。

button {
  --ig-size: var(--ig-size-large);
}

詳細については、サイズの記事をご覧ください。

API リファレンス

• IgxButtonDirective
• IgxButton スタイル
• IgxRippleDirective
• IgxIconButtonDirective
• ButtonGroup

その他のリソース

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

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