Button

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

Button デモ

依存関係

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

// app.module.ts

import { IgxButtonModule } from 'igniteui-angular';

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

使用方法

<target-element igxButton [..options]>クリック</target-element>

コード例

シンプルな igxButton を設定します。タイプを選択しない場合、デフォルト値は flat です。

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

結果:

リップル エフェクトを追加できます。色を設定します。 igxRipple="blue"

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

デフォルトのリップル色。カスタム リップル色。

アウトライン付きボタン スタイル:

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

結果:

igxButton を使用して span 要素を Ignite UI for Angular のスタイル設定済みボタンにします。

<span igxButton="raised" igxButtonColor="yellow" igxButtonBackground="#000" igxRipple="yellow">クリック</span>

span は以下のようになります。

raised ボタンを作成できます。 

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

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

<button igxButton="fab" igxButtonColor="#FBB13C" igxButtonBackground="#340068" igxRipple="#FBB13C">
  <igx-icon fontSet="material">edit</igx-icon>
</button>

また、アイコンをボタンとして使用できます。

<button igxButton="icon" igxRipple igxRippleCentered="true">
  <igx-icon fontSet="material">search</igx-icon>
</button>
<button igxButton="icon" igxRipple igxButtonColor="#E41C77" igxRippleCentered="true">
  <igx-icon fontSet="material">favorite</igx-icon>
</button>

アイコンの結果:

Button タイプ

名前 説明
flat デフォルトのボタン タイプ。透明な背景およびプライマリ テーマ色のテキスト。
outlined Flat ボタン タイプに似ていますがボタンの端が細いアウトラインで囲まれます。
raised このボタン タイプはわずかなシャドウを使用します。背景のパレットにセカンダリ テーマ色を使用。
fab フローティング アクションのボタン タイプ。背景用のセカンダリ テーマ色で円形。
icon 最もシンプルなボタン タイプ。アイコンをボタンとして使用する場合に使用。

密度の表示

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

And the final result:

API リファレンス

その他のリソース

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