Button

Ignite UI for Angular Button ディレクティブを任意の button、span、div、または anchor 要素に適用して高機能なボタンを構成できます。

Angular Button の例

このサンプルが気に入りましたか? 完全な Angular ツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

StackBlitz で表示

使用方法

Button ディレクティブは NgModule としてエクスポートされるため、アプリケーションで AppModule に IgxButtonModule をインポートする必要があります。

// app.module.ts

import { IgxButtonModule } from 'igniteui-angular';

@NgModule({
    imports: [
        ...
        IgxButtonModule,
        ...
    ]
})
export class AppModule {}

ボタン タイプ

Flat ボタン

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

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

Raised ボタン

エンボス加工されたボタンを作成するには、igxButton プロパティの値を変更するだけです。

<button igxButton="raised">Raised</button>

Outlined ボタン

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

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

Icon ボタン

アイコンをボタンとして使用することもできます。

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

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

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

<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>

Note

拡張 FAB テキストを適切にスタイルするには、<span>、<div> または <p> タグを使用します。

例

ボタンの無効化

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

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

Ripple

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

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

Span

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

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

密度の表示

displayDensity 入力を使用して igxButton の表示密度を選択できます。これを行うには、まず IgxButtonGroupModule をインポートし、igxButtonGroup コンポーネントによってすべての密度値を表示する必要があります。これにより、選択されるたびにボタンの displayDensity にバインドされた独自の density プロパティが更新されます。

Note

icon タイプのボタンは、異なる表示密度値を設定しても視覚的に変化しません。

// app.module.ts
...
import { IgxButtonGroupModule } from 'igniteui-angular';

@NgModule({
    imports: [
        ...
        IgxButtonGroupModule
        ...
    ]
})

<!--buttons-density.component.html-->

<igx-buttongroup [values]="displayDensities" (onSelect)="selectDensity($event)"></igx-buttongroup>
...
<button igxButton="flat" [displayDensity]="density">Flat</button>

// buttons-density.component.ts
public density = "comfortable";
public displayDensities;

public ngOnInit() {
    this.displayDensities = [
        { label: 'comfortable', selected: this.density === 'comfortable', togglable: true },
        { label: 'cosy', selected: this.density === 'cosy', togglable: true },
        { label: 'compact', selected: this.density === 'compact', togglable: true }
    ];
}

public selectDensity(event) {
    this.density = this.displayDensities[event.index].label;
}

以下は結果です。

codesandbox で表示 StackBlitz で表示

スタイル設定

ボタンのスタイル設定を始めるには、すべてのテーマ関数とコンポーネント ミックスインが存在する index ファイルをインポートする必要があります。

@import '~igniteui-angular/lib/core/styles/themes/index';

次に、igx-button-theme を拡張し、それぞれのホバーとフォーカス パラメーターと共に $raised-text-color と $raised-background パラメーターを受け入れる新しいテーマを作成します。

$custom-button-theme: igx-button-theme(
    $raised-text-color: #fdfdfd,
    $raised-hover-text-color: #fdfdfd,
    $raised-background: #345779,
    $raised-hover-background: #2e4d6b,
    $raised-focus-text-color: #fdfdfd,
    $raised-focus-background: #2e4d6b,
    $disabled-color: #2e4d6b
);

カスタム テーマでは、raised ボタンにのみパラメーター値を提供しました。その他のタイプのボタンに実装するには、対応するパラメーターをターゲットにします。

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

CSS 変数の使用

最後には、カスタム ボタン テーマをアプリケーションに渡します。

 @include igx-css-vars($custom-button-theme);

テーマ オーバーライドの使用

Internet Explorer 11 などの古いブラウザーのコンポーネントをスタイル設定するには、CSS 変数をサポートしていないため、別のアプローチを用いる必要があります。

コンポーネントが Emulated ViewEncapsulation を使用している場合、::ng-deep を使用してこのカプセル化を解除する必要があります。カスタム テーマが他のコンポーネントに影響しないようにするには、::ng-deep の前に :host セレクターを含めるようにしてください。

:host {
     ::ng-deep {
        @include igx-button($custom-button-theme);
    }
}

デモ

codesandbox で表示 StackBlitz で表示

API リファレンス

• IgxButtonDirective
• IgxButton スタイル
• IgxRippleDirective
• IgxButtonGroupComponent

その他のリソース

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

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