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';
次に、button-theme
を拡張し、それぞれのホバーとフォーカス パラメーターと共に $foreground
と $background
パラメーターを受け入れる新しいテーマを作成します。
次のマークアップを前提として:
<div class="my-raised-btn">
<button igxButton="raised">Raised button</button>
</div>
テーマを作成する必要があります:
$custom-button-theme: button-theme(
$foreground: #fdfdfd,
$hover-foreground: #fdfdfd,
$focus-foreground: #fdfdfd,
$background: #345779,
$hover-background: #2e4d6b,
$focus-background: #2e4d6b,
$disabled-foreground: #2e4d6b
);
ボタンのスタイル設定に使用できるパラメーターの完全なリストについては、button-theme
セクションを参照してください。
CSS 変数の使用
最後には、カスタム ボタン テーマをアプリケーションに渡します。
.my-raised-btn {
@include css-vars($custom-button-theme);
}
テーマ オーバーライドの使用
Internet Explorer 11 などの古いブラウザーのコンポーネントをスタイル設定するには、CSS 変数をサポートしていないため、別のアプローチを用いる必要があります。
コンポーネントが Emulated
ViewEncapsulation を使用している場合、::ng-deep
を使用してこのカプセル化を解除する必要があります。カスタム テーマが他のコンポーネントに影響しないようにするには、::ng-deep
の前に :host
セレクターを含めるようにしてください。
:host {
::ng-deep {
.my-raised-btn {
@include button($custom-button-theme);
}
}
}
デモ
API リファレンス
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。