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

EXAMPLE

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { 
	IgxButtonModule,
	IgxIconModule,
	IgxRippleModule
 } from "igniteui-angular";
import { ButtonsSample1Component } from "./buttons-sample-1/buttons-sample-1.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	ButtonsSample1Component
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxButtonModule,
	IgxIconModule,
	IgxRippleModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-buttons-sample-1',
  styleUrls: ['./buttons-sample-1.component.scss'],
  templateUrl: './buttons-sample-1.component.html'

})
export class ButtonsSample1Component { }
tsコピー

<div class="wrapper">
    <div class="button-sample">
        <button igxButton="flat" igxRipple>Flat</button>
    </div>
    <div class="button-sample">
        <button igxButton="raised" igxRipple>Raised</button>
    </div>
    <div class="button-sample">
        <button igxButton="outlined" igxRipple>Outlined</button>
    </div>
</div>
htmlコピー

.wrapper {
    display: flex;
    flex-flow: row wrap;
}

.button-sample {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    flex: 1 0 30%;
    margin: 16px 0;
}
scssコピー

Edit in: CodesandboxStackBlitz

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

60 以上のコンポーネント、柔軟な API、強力なテーマ設定およびブランディング機能、必要な速度と機能を備えた Angular アプリケーションを構築するための豊富な機能セット。

無料で試してみる

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

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

ng add igniteui-angular
cmd

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

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

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

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

// home.component.ts

...
import { IgxButtonDirective } from 'igniteui-angular';
// 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 {}
typescript

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

Angular ボタン タイプ

Flat ボタン

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

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

Contained ボタン

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

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

Outlined ボタン

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

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

Icon ボタン

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

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

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

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

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

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

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

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

例

Angular ボタンの無効化

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

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

Ripple

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

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

Span

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

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

サイズ

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

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

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

// 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})`;
}
typescript

以下は結果です。

EXAMPLE

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { 
	IgxButtonModule,
	IgxIconModule,
	IgxRippleModule,
	IgxButtonGroupModule
 } from "igniteui-angular";
import { ButtonsDisplayDensityComponent } from "./buttons-display-density/buttons-display-density.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	ButtonsDisplayDensityComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxButtonModule,
	IgxIconModule,
	IgxRippleModule,
	IgxButtonGroupModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { Component, OnInit } from '@angular/core';
import { DisplayDensity } from 'igniteui-angular';

@Component({
    selector: 'app-buttons-display-density',
    styleUrls: ['./buttons-display-density.component.scss'],
    templateUrl: './buttons-display-density.component.html'
})
export class ButtonsDisplayDensityComponent implements OnInit {
    public density: DisplayDensity = 'comfortable';
    public displayDensities;

    public ngOnInit(): void {
        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;
    }
}
tsコピー

<article class="sample-column">
    <div class="density-chooser">
        <igx-buttongroup [values]="displayDensities" (selected)="selectDensity($event)"></igx-buttongroup>
    </div>
    <div class="button-sample">
        <div class="button-sample">
            <button igxButton="flat" igxRipple [displayDensity]="density">Flat</button>
        </div>
        <div class="button-sample">
            <button igxButton="raised" igxRipple [displayDensity]="density">Raised</button>
        </div>
        <div class="button-sample">
            <button igxButton="outlined" igxRipple [displayDensity]="density">Outlined</button>
        </div>
        <div class="button-sample">
            <button igxButton="fab" igxRipple [displayDensity]="density"><igx-icon family="material">edit</igx-icon></button>
        </div>
        <div class="button-sample">
            <button igxButton="fab" igxRipple [displayDensity]="density">
                <span>Like</span>
                <igx-icon family="material">favorite</igx-icon>
            </button>
        </div>
    </div>
</article>
htmlコピー

.buttons-sample {
    display: flex;
    flex-flow: row wrap;
}

.button-sample {
    display: flex;
    flex: 1 0 20%;
    align-items: center;
    justify-content: space-evenly;
}

.density-chooser {
    margin-bottom: 24px;
}
scssコピー

Edit in: CodesandboxStackBlitz

スタイル設定

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

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

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

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

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

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

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

$custom-button-theme: button-theme(
  $foreground: #fdfdfd,
  $hover-foreground: #fdfdfd,
  $focus-foreground: #fdfdfd,
  $background: #345779,
  $hover-background: #2e4d6b,
  $focus-background: #2e4d6b,
  $disabled-foreground: #2e4d6b,
);
scss

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

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

.button-sample {
  @include css-vars($custom-button-theme);
}
scss

特定のタイプのボタン (flat、outlined、contained、fab) のみをスタイリングすることもできます。 そのためには、次のようなタイプ別のテーマ関数を使用します: flat-button-theme、outlined-button-theme、contained-button-theme、fab-button-theme。

例として、以下のようなマークアップがあるとします。

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

contained ボタンのみをスタイリングしたい場合は、contained-button-theme 関数を使用します。

$custom-contained-theme: contained-button-theme(
  $background: #348ae0,
);
scss

新たに追加されたタイプ別テーマ関数により、ボタンのスタイリングがより簡単になりました。上記の例のように、contained-button-theme および fab-button-theme では、$background パラメーターに色を指定するだけで、他のすべての状態用の色やテキストの色が自動的に生成されます。テキストの色は、新しく追加された adaptive-contrast 関数によって、指定された背景に対して黒か白のどちらがより良いコントラストを持つかを計算して決定されます。

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

デモ

EXAMPLE

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { 
	IgxButtonModule,
	IgxIconModule,
	IgxRippleModule,
	IgxButtonGroupModule
 } from "igniteui-angular";
import { ButtonsStyleComponent } from "./buttons-style/buttons-style.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	ButtonsStyleComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxButtonModule,
	IgxIconModule,
	IgxRippleModule,
	IgxButtonGroupModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { Component } from '@angular/core';

@Component({
  selector: 'app-buttons-style',
  styleUrls: ['./buttons-style.component.scss'],
  templateUrl: './buttons-style.component.html'
})
export class ButtonsStyleComponent { }
tsコピー

<div class="buttons-sample">
    <div class="button-sample">
        <button igxButton="raised" igxRipple="#fdfdfd">Styled Button</button>
    </div>
    <div class="button-sample">
        <button igxButton="raised" [disabled]="'true'" igxRipple>Disabled</button>
    </div>
</div>
htmlコピー

@use '../../variables' as *;

.buttons-sample {
    display: flex;
    margin: 8px;
}

.button-sample {
    display: flex;
    margin-right: 16px;
}

$custom-button-theme: button-theme(
    $foreground: #fdfdfd,
    $hover-foreground: #fdfdfd,
    $background: #345779,
    $hover-background: #2e4d6b,
    $focus-foreground: #fdfdfd,
    $focus-background: #2e4d6b,
    $disabled-foreground: #bbb
);

:host ::ng-deep {
	@include css-vars($custom-button-theme);
}
scssコピー

Edit in: CodesandboxStackBlitz

カスタム サイズ変更

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

button {
  --size: 50px;
}
scss

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

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

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

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

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

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

API リファレンス

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

その他のリソース

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

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