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>

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

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 デフォルトのボタン タイプ。透明な背景およびプライマリ テーマ色のテキスト。
raised このボタン タイプは box-shadow を使用します。プライマリ テーマ色の背景および白いテキスト。
gradient raised ボタン タイプと同じです。背景色にグラデーションを指定できます。
fab フローティング アクションのボタン タイプ。丸形で、プライマリ テーマ色の背景色と白い前景色。
icon 最もシンプルなボタン タイプ。アイコンをボタンとして使用する場合に使用します。
navbar icon ボタン タイプと同じですが、igx-navbar コンポーネントで使用するために最適化されています。

API リファレンス

その他のリソース

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