Button

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

    Angular Button の例

    使用方法

    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> タグを使用します。

    例

    ボタンの無効化

    ボタンを無効にするには、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" (selected)="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;
}

    以下は結果です。

    スタイル設定

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

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

// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';

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

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

    ボタンのスタイル設定に使用できるパラメーターの完全なリストについては、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);
    }
}

    デモ

    API リファレンス

    その他のリソース

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