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 の例を作成して、さまざまなボタン タイプが境界線でスタイル設定されている場合、または透明な背景が適用されている場合にどのように表示されるかを示します。
Ignite UI for Angular Button を使用した作業の開始
Ignite UI for Angular Button ディレクティブを使用した作業を開始するには、Ignite UI for Angular をインストールする必要があります。既存の Angular アプリケーションで、以下のコマンドを入力します。
ng add igniteui-angular
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 {}
あるいは、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 {}
Ignite UI for Angular Button モジュールまたはディレクティブをインポートしたので、要素で igxButton ディレクティブの使用を開始できます。
Angular ボタン タイプ
Flat ボタン
igxButton ディレクティブを使用して、シンプルなフラット ボタンをコンポーネント テンプレートに追加します。タイプを選択しない場合、デフォルト値は flat です。
<button igxButton="flat">Flat</button>
Contained ボタン
Contained ボタンを作成するには、igxButton プロパティの値を変更するだけです。
<button igxButton="contained">Contained</button>
Outlined ボタン
同様に、アウトライン タイプに切り替えることができます。
<button igxButton="outlined">Outlined</button>
Icon ボタン
バージョン 17.1.0 以降、IgniteUI for Angular は、アイコンを完全に機能するボタンに変えることを目的とした新しい igxIconButton ディレクティブを公開します。Icon Button の詳細についてはこちらを参照してください。
<button igxIconButton="flat">
<igx-icon fontSet="material">favorite</igx-icon>
</button>
FAB (フローティング アクション ボタン)
アイコンを使用して、フローティング アクション ボタンを作成します。
<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> タグを使用します。
例
Angular ボタンの無効化
ボタンを無効にするには、disabled プロパティを使用します。
<button igxButton="contained" [disabled]="'true'">Disabled</button>
Ripple
igxRipple ディレクティブは、ボタンまたはその他の指定した要素にリップル効果を追加します。`以下のプロパティを使用して、デフォルトのリップル色、位置、および期間を簡単に変更できます。
<button igxButton="contained" igxRipple="white" [igxRippleCentered]="true" [igxRippleDuration]="2000">
Ripple
</button>
Span
span や div などの要素を Ignite UI for Angular スタイルのボタンに変更するために igxButton ディレクティブを使用できます。デフォルトの色は igxButtonColor と igxButtonBackground プロパティでカスタマイズできます。
<span igxButton="contained" igxButtonColor="white" igxButtonBackground="#72da67" igxRipple="white">
Span
</span>
サイズ
--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
...
]
})
<!--buttons-density.component.html-->
<igx-buttongroup [values]="sizes" (selected)="selectSize($event)"></igx-buttongroup>
...
<button igxButton="flat">Flat</button>
// 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})`;
}
以下は結果です。
スタイル設定
Button テーマのプロパティ マップ
プライマリ プロパティを変更すると、関連するすべての依存プロパティが自動的に更新されます。
Material テーマ
Flat ボタン
| プライマリ プロパティ | 依存プロパティ | 説明 |
|---|---|---|
$foreground |
$hover-background | ホバー時のボタンの背景の色 |
| $focus-background | フォーカス時のボタンの背景の色 | |
| $focus-hover-background | フォーカス + ホバー時のボタンの背景の色 | |
| $active-background | アクティブ時のボタンの背景の色 | |
| $hover-foreground | ホバー時のボタンの前景の色 | |
| $icon-color-hover | ホバー時のボタンのアイコンの色 | |
| $focus-foreground | フォーカス時のボタンの前景の色 | |
| $focus-hover-foreground | フォーカス + ホバー時のボタンの前景の色 | |
| $active-foreground | アクティブなボタンの前景の色 | |
| $focus-visible-background | フォーカスが表示されている時の背景 | |
| $focus-visible-foreground | フォーカスが表示されている時の前景 |
Contained ボタン
| プライマリ プロパティ | 依存プロパティ | 説明 |
|---|---|---|
$background |
$foreground | 背景に基づいた前景 |
| $icon-color | 背景に基づいたアイコンの色 | |
| $hover-background | ホバー時の背景の色 | |
| $hover-foreground | ホバー時の前景 | |
| $icon-color-hover | ホバー時のアイコンの色 | |
| $focus-background | フォーカス時の背景の色 | |
| $focus-foreground | フォーカス時の前景 | |
| $focus-hover-background | フォーカス + ホバー背景 | |
| $focus-hover-foreground | フォーカス + ホバー時の前景 | |
| $active-background | アクティブ時の背景の色 | |
| $active-foreground | アクティブ時の前景の色 | |
| $focus-visible-background | フォーカスが表示されている時の背景 | |
| $focus-visible-foreground | フォーカスが表示されている時の前景 |
Outlined ボタン
| プライマリ プロパティ | 依存プロパティ | 説明 |
|---|---|---|
$foreground |
$hover-background | ホバー時のボタンの背景の色 |
| $focus-background | フォーカス時のボタンの背景の色 | |
| $focus-hover-background | フォーカス + ホバー時のボタンの背景の色 | |
| $active-background | アクティブ時のボタンの背景の色 | |
| $hover-foreground | ホバー時のボタンの前景の色 | |
| $icon-color-hover | ホバー時のボタンのアイコンの色 | |
| $focus-foreground | フォーカス時のボタンの前景の色 | |
| $focus-hover-foreground | フォーカス + ホバー時のボタンの前景の色 | |
| $active-foreground | アクティブなボタンの前景の色 | |
| $focus-visible-background | フォーカスが表示されている時の背景 | |
| $focus-visible-foreground | フォーカスが表示されている時の前景 | |
| $border-color | アウトライン ボタンの境界線の色 | |
| $hover-border-color | ホバー時のアウトライン ボタンの境界線の色 | |
| $focus-border-color | フォーカス時のアウトライン ボタンの境界線の色 | |
| $focus-visible-border-color | フォーカスが表示されている時のアウトライン ボタンの境界線の色 | |
| $active-border-color | アクティブ時のアウトライン ボタンの境界線の色 |
FAB ボタン
| プライマリ プロパティ | 依存プロパティ | 説明 |
|---|---|---|
$background |
$foreground | 背景に基づいた前景 |
| $icon-color | 背景に基づいたアイコンの色 | |
| $hover-background | ホバー時の背景の色 | |
| $hover-foreground | ホバー時の前景 | |
| $icon-color-hover | ホバー時のアイコンの色 | |
| $focus-background | フォーカス時の背景の色 | |
| $focus-foreground | フォーカス時の前景 | |
| $active-background | アクティブ時の背景の色 | |
| $active-foreground | アクティブ時の前景の色 | |
| $focus-hover-background | フォーカス + ホバー背景 | |
| $focus-hover-foreground | フォーカス + ホバー時の前景 | |
| $focus-visible-background | フォーカスが表示されている時の背景 | |
| $focus-visible-foreground | フォーカスが表示されている時の前景 |
Fluent テーマ
Flat ボタン
| プライマリ プロパティ | 依存プロパティ | 説明 |
|---|---|---|
$foreground |
$hover-background | ホバー時のボタンの背景の色 |
| $focus-background | フォーカス時のボタンの背景の色 | |
| $focus-hover-background | フォーカス + ホバー時のボタンの背景の色 | |
| $active-background | アクティブ時のボタンの背景の色 | |
| $hover-foreground | ホバー時のボタンの前景の色 | |
| $icon-color-hover | ホバー時のボタンのアイコンの色 | |
| $focus-foreground | フォーカス時のボタンの前景の色 | |
| $focus-hover-foreground | フォーカス + ホバー時のボタンの前景の色 | |
| $active-foreground | アクティブなボタンの前景の色 | |
| $focus-visible-foreground | フォーカスが表示されている時の前景 | |
| $focus-visible-border-color | フォーカスが表示されている時の境界線の色 |
Contained ボタン
| プライマリ プロパティ | 依存プロパティ | 説明 |
|---|---|---|
$background | $foreground | 背景に基づいた前景 |
| $icon-color | 背景に基づいたアイコンの色 | |
| $hover-background | ホバー時の背景の色 | |
| $focus-background | フォーカス時の背景の色 | |
| $active-background | アクティブ時の背景の色 | |
| $hover-foreground | ホバー時の前景 | |
| $icon-color-hover | ホバー時のアイコンの色 | |
| $focus-foreground | フォーカス時の前景 | |
| $active-foreground | アクティブ時の前景の色 | |
| $focus-hover-background | フォーカス + ホバー背景 | |
| $focus-hover-foreground | フォーカス + ホバー時の前景 | |
| $focus-visible-background | フォーカスが表示されている時の背景 | |
| $focus-visible-foreground | フォーカスが表示されている時の前景 | |
| $focus-visible-border-color | フォーカスが表示されている時の境界線の色 |
Outlined ボタン
| プライマリ プロパティ | 依存プロパティ | 説明 |
|---|---|---|
$foreground | $hover-background | ホバー時のアウトライン ボタンの背景の色 |
| $focus-background | フォーカス時のアウトライン ボタンの背景の色 | |
| $focus-hover-background | フォーカス + ホバー時のアウトライン ボタンの背景の色 | |
| $active-background | アクティブ時のアウトライン ボタンの背景の色 | |
| $hover-foreground | ホバー時のアウトライン ボタンの前景の色 | |
| $icon-color-hover | ホバー時のアウトライン ボタンのアイコンの色 | |
| $focus-foreground | フォーカス時のアウトライン ボタンの前景の色 | |
| $focus-hover-foreground | フォーカス + ホバー時のアウトライン ボタンの前景の色 | |
| $active-foreground | アクティブなアウトライン ボタンの前景の色 | |
| $focus-visible-foreground | フォーカスが表示されている時のアウトライン ボタンの前景の色 | |
| $focus-visible-border-color | フォーカスが表示されている時のアウトライン ボタンの境界線の色 | |
| $border-color | アウトライン ボタンの境界線の色 | |
| $hover-border-color | ホバー時のアウトライン ボタンの境界線の色 | |
| $focus-border-color | フォーカス時のアウトライン ボタンの境界線の色 | |
| $active-border-color | アクティブなアウトライン ボタンの境界線の色 |
FAB ボタン
| プライマリ プロパティ | 依存プロパティ | 説明 |
|---|---|---|
$background | $foreground | 背景に基づいた前景 |
| $icon-color | 背景に基づいたアイコンの色 | |
| $hover-background | ホバー時の背景の色 | |
| $hover-foreground | ホバー時の前景 | |
| $icon-color-hover | ホバー時のアイコンの色 | |
| $active-background | アクティブ時の背景の色 | |
| $active-foreground | アクティブ時の前景の色 | |
| $focus-background | フォーカス時の背景の色 | |
| $focus-foreground | フォーカス時の前景 | |
| $focus-hover-background | フォーカス + ホバー背景 | |
| $focus-hover-foreground | フォーカス + ホバー時の前景 | |
| $focus-visible-background | フォーカスが表示されている時の背景 | |
| $focus-visible-foreground | フォーカスが表示されている時の前景 | |
| $focus-visible-border-color | フォーカスが表示されている時の境界線の色 |
Bootstrap テーマ
Flat ボタン
| プライマリ プロパティ | 依存プロパティ | 説明 |
|---|---|---|
$foreground |
$hover-foreground | ホバー時のボタンの前景の色 |
| $icon-color-hover | ホバー時のボタンのアイコンの色 | |
| $focus-foreground | フォーカス時のボタンの前景の色 | |
| $focus-hover-foreground | フォーカス + ホバー時のボタンの前景の色 | |
| $active-foreground | アクティブなボタンの前景の色 | |
| $focus-visible-foreground | フォーカスが表示されている時の前景 | |
| $focus-visible-border-color | フォーカスが表示されている時の境界線の色 | |
| $disabled-foreground | 無効なボタンの前景の色 | |
| $disabled-icon-color | 無効なボタンのアイコンの色 | |
| $shadow-color | シャドウの色 |
Contained ボタン
| プライマリ プロパティ | 依存プロパティ | 説明 |
|---|---|---|
$background |
$foreground | 背景に基づいた前景 |
| $icon-color | 背景に基づいたアイコンの色 | |
| $hover-background | ホバー時の背景の色 | |
| $focus-background | フォーカス時の背景の色 | |
| $active-background | アクティブ時の背景の色 | |
| $hover-foreground | ホバー時の前景 | |
| $icon-color-hover | ホバー時のアイコンの色 | |
| $focus-foreground | フォーカス時の前景 | |
| $focus-hover-background | フォーカス + ホバー背景 | |
| $focus-hover-foreground | フォーカス + ホバー時の前景 | |
| $focus-visible-background | フォーカスが表示されている時の背景 | |
| $focus-visible-foreground | フォーカスが表示されている時の前景 | |
| $active-foreground | アクティブ時の前景の色 | |
| $shadow-color | シャドウの色 | |
| $disabled-background | 無効な背景の色 | |
| $disabled-foreground | 無効な前景の色 | |
| $disabled-icon-color | 無効なアイコンの色 |
Outlined ボタン
| プライマリ プロパティ | 依存プロパティ | 説明 |
|---|---|---|
$foreground |
$hover-background | ホバー時のボタンの背景の色 |
| $focus-background | フォーカス時のボタンの背景の色 | |
| $focus-hover-background | フォーカス + ホバー時のボタンの背景の色 | |
| $active-background | アクティブ時のボタンの背景の色 | |
| $hover-foreground | ホバー時のボタンの前景の色 | |
| $icon-color-hover | ホバー時のボタンのアイコンの色 | |
| $focus-foreground | フォーカス時のボタンの前景の色 | |
| $focus-hover-foreground | フォーカス + ホバー時のボタンの前景の色 | |
| $active-foreground | アクティブなボタンの前景の色 | |
| $focus-visible-background | フォーカスが表示されている時の背景 | |
| $focus-visible-foreground | フォーカスが表示されている時の前景 | |
| $focus-visible-border-color | フォーカスが表示されている時の境界線の色 | |
| $disabled-foreground | 無効なボタンの前景の色 | |
| $disabled-icon-color | 無効なボタンのアイコンの色 | |
| $disabled-border-color | 無効なボタンの境界線の色 | |
| $hover-border-color | ホバー時の境界線の色 | |
| $focus-border-color | フォーカス時の境界線の色 | |
| $focus-visible-border-color | フォーカス表示の境界線の色 | |
| $active-border-color | アクティブ時の境界線の色 | |
| $shadow-color | シャドウの色 |
FAB ボタン
| プライマリ プロパティ | 依存プロパティ | 説明 |
|---|---|---|
$background |
$foreground | 背景に基づいた前景 |
| $icon-color | 背景に基づいたアイコンの色 | |
| $hover-background | ホバー時の背景の色 | |
| $focus-background | フォーカス時の背景の色 | |
| $active-background | アクティブ時の背景の色 | |
| $disabled-background | 無効な背景の色 | |
| $hover-foreground | ホバー時の前景 | |
| $icon-color-hover | ホバー時のアイコンの色 | |
| $focus-foreground | フォーカス時の前景 | |
| $focus-hover-background | フォーカス + ホバー背景 | |
| $focus-hover-foreground | フォーカス + ホバー時の前景 | |
| $focus-visible-background | フォーカスが表示されている時の背景 | |
| $focus-visible-foreground | フォーカスが表示されている時の前景 | |
| $active-foreground | アクティブ時の前景の色 | |
| $shadow-color | シャドウの色 | |
| $disabled-foreground | 無効な前景の色 | |
| $disabled-icon-color | 無効なアイコンの色 |
ボタンにスタイルを設定する別の方法は、Sass とタイプ別テーマ関数を使用することです。flat-button-theme、outlined-button-theme、contained-button-theme、および fab-button-theme。
それぞれは、特定のタイプのボタンのみをターゲットにします。
Indigo テーマ
Flat ボタン
| プライマリ プロパティ | 依存プロパティ | 説明 |
|---|---|---|
$foreground | $hover-background | ホバー時のボタンの背景の色 |
| $focus-background | フォーカス時のボタンの背景の色 | |
| $focus-hover-background | フォーカス + ホバー時のボタンの背景の色 | |
| $active-background | アクティブ時のボタンの背景の色 | |
| $hover-foreground | ホバー時のボタンの前景の色 | |
| $icon-color-hover | ホバー時のボタンのアイコンの色 | |
| $focus-foreground | フォーカス時のボタンの前景の色 | |
| $focus-hover-foreground | フォーカス + ホバー時のボタンの前景の色 | |
| $active-foreground | アクティブなボタンの前景の色 | |
| $focus-visible-foreground | フォーカスが表示されている時の前景 | |
| $disabled-foreground | 無効な前景の色 | |
| $disabled-icon-color | 無効なアイコンの色 | |
| $shadow-color | シャドウの色 |
Contained ボタン
| プライマリ プロパティ | 依存プロパティ | 説明 |
|---|---|---|
$background |
$foreground | 背景に基づいた前景 |
| $icon-color | 背景に基づいたアイコンの色 | |
| $hover-background | ホバー時の背景の色 | |
| $focus-background | フォーカス時の背景の色 | |
| $active-background | アクティブ時の背景の色 | |
| $hover-foreground | ホバー時の前景 | |
| $icon-color-hover | ホバー時のアイコンの色 | |
| $focus-foreground | フォーカス時の前景 | |
| $focus-hover-background | フォーカス + ホバー背景 | |
| $focus-hover-foreground | フォーカス + ホバー時の前景 | |
| $focus-visible-background | フォーカスが表示されている時の背景 | |
| $focus-visible-foreground | フォーカスが表示されている時の前景 | |
| $active-foreground | アクティブ時の前景の色 | |
| $shadow-color | シャドウの色 | |
| $disabled-background | 無効な背景の色 | |
| $disabled-foreground | 無効な前景の色 | |
| $disabled-icon-color | 無効なアイコンの色 |
Outlined ボタン
| プライマリ プロパティ | 依存プロパティ | 説明 |
|---|---|---|
$foreground |
$hover-background | ホバー時のボタンの背景の色 |
| $focus-background | フォーカス時のボタンの背景の色 | |
| $focus-hover-background | フォーカス + ホバー時のボタンの背景の色 | |
| $active-background | アクティブ時のボタンの背景の色 | |
| $hover-foreground | ホバー時のボタンの前景の色 | |
| $icon-color-hover | ホバー時のボタンのアイコンの色 | |
| $focus-foreground | フォーカス時のボタンの前景の色 | |
| $focus-hover-foreground | フォーカス + ホバー時のボタンの前景の色 | |
| $active-foreground | アクティブなボタンの前景の色 | |
| $focus-visible-background | フォーカスが表示されている時の背景 | |
| $focus-visible-foreground | フォーカスが表示されている時の前景 | |
| $focus-visible-border-color | フォーカスが表示されている時の境界線の色 | |
| $border-color | 境界線の色 | |
| $hover-border-color | ホバー時の境界線の色 | |
| $focus-border-color | フォーカス時の境界線の色 | |
| $focus-visible-border-color | フォーカス表示の境界線の色 | |
| $active-border-color | アクティブ時の境界線の色 | |
| $shadow-color | シャドウの色 |
FAB ボタン
| プライマリ プロパティ | 依存プロパティ | 説明 |
|---|---|---|
$background |
$foreground | 背景に基づいた前景 |
| $icon-color | 背景に基づいたアイコンの色 | |
| $hover-background | ホバー時の背景の色 | |
| $focus-background | フォーカス時の背景の色 | |
| $active-background | アクティブ時の背景の色 | |
| $disabled-background | 無効な背景の色 | |
| $hover-foreground | ホバー時の前景 | |
| $icon-color-hover | ホバー時のアイコンの色 | |
| $focus-foreground | フォーカス時の前景 | |
| $focus-hover-background | フォーカス + ホバー背景 | |
| $focus-hover-foreground | フォーカス + ホバー時の前景 | |
| $focus-visible-background | フォーカスが表示されている時の背景 | |
| $focus-visible-foreground | フォーカスが表示されている時の前景 | |
| $active-foreground | アクティブ時の前景の色 | |
| $shadow-color | シャドウの色 | |
| $disabled-foreground | 無効な前景の色 | |
| $disabled-icon-color | 無効なアイコンの色 |
注: 結果の依存プロパティは、選択したテーマ (Material、Fluent、Bootstrap、Indigo) によって若干異なる場合があります。
ボタンのスタイルを設定するには、タイプ固有のテーマ関数を使用できます: flat-button-theme、outlined-button-theme、contained-button-theme、および fab-button-theme。
各関数は、特定のタイプのボタンのみをターゲットにします。
Sass を使用してボタンのスタイル設定を開始するには、まずすべてのテーマ関数とコンポーネント ミックスインを含む index ファイルをインポートします。
@use "igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
次に、スタイル設定するボタンのタイプ固有のテーマ機能を拡張する新しいテーマを作成します。この例では、contained-button-theme 関数を使用し、$foreground および $background パラメーターに、それぞれの hover および active パラメーターとともに値を渡します。
次のマークアップを前提として:
<div class="my-contained-btn">
<button igxButton="contained">Contained button</button>
</div>
次のテーマを作成する必要があります:
$custom-contained-theme: contained-button-theme(
$background: #f9f0ff,
$foreground: #722ed1,
$hover-background: #efdbff,
$hover-foreground: #9254de,
$active-foreground: #531dab,
$active-background: #dfc2fa,
);
contained タイプのボタンのスタイル設定に使用できるパラメーターの完全なリストについては、contained-button-theme セクションを参照してください。
最後に、カスタム テーマをアプリケーションに含めます。
.my-contained-btn {
@include css-vars($custom-contained-theme);
}
タイプ別テーマ関数により、ボタンのスタイリングがより簡単になりました。
contained-button-theme 関数と fab-button-theme 関数の場合、$background パラメーターに色の値を指定するだけで済みます。他のすべてのボタンの状態とテキストの色 (指定されていない場合) は、その値に基づいて自動的に生成され、適用されます。
テキストの色は、新しく追加された adaptive-contrast 関数によって、指定された背景に対して黒か白のどちらがより良いコントラストを持つかを計算して決定されます。
flat-button-theme および outlined-button-theme では、状態用の色も自動的に生成されますが、これらは $background ではなく $foreground パラメーターに基づいて計算されます。
以下のサンプルでは、カスタマイズした CSS 変数を使用したボタン コンポーネントが、Ant デザイン システムのボタンに視覚的に似たデザインを実現している様子を確認できます。
Note
サンプルでは、Bootstrap Light スキーマを使用します。
Tailwind によるスタイル設定
カスタム Tailwind ユーティリティ クラスを使用して button をスタイル設定できます。まず Tailwind を設定してください。
グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:
@import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';
ユーティリティ ファイルには、light テーマと dark テーマの両方のバリエーションが含まれています。
light-*クラスはライト テーマ用です。dark-*クラスはダーク テーマ用です。- プレフィックスの後にコンポーネント名を追加します。 ボタンにはタイプがあるため、クラスは次のように使用されます:
light-contained-button、light-flat-button、dark-outlined-button、dark-fab-button。
これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、任意のプロパティを使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。
プロパティの完全なリストは button-theme で確認できます。これはさまざまなバリエーションで異なって反映されます。flat ボタンと outlined ボタンの主なプロパティは $foreground で、contained ボタンと fab ボタンの主なプロパティは $background です。構文は次のとおりです:
<div class="buttons-sample">
<div class="button-sample">
<button
igxButton="flat"
class="!light-flat-button ![--foreground:#7B9E89]">
Flat Button
</button>
</div>
<div class="button-sample">
<button
igxButton="contained"
class="!light-contained-button ![--background:#7B9E89]">
Contained Button
</button>
</div>
<div class="button-sample">
<button
igxButton="outlined"
class="!light-outlined-button ![--foreground:#7B9E89]">
Outlined Button
</button>
</div>
<div class="button-sample">
<button
igxButton="fab"
class="!light-fab-button ![--background:#7B9E89]">
Fab Button
</button>
</div>
</div>
Note
ユーティリティ クラスが優先されるようにするには、感嘆符 (!) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。
最終的に、button は次のようになります:
カスタム サイズ変更
ボタンの高さは、--size 変数を使用して、button を直接ターゲットにして変更できます。
button {
--size: 50px;
}
または、ユニバーサル変数 --igx-button-size を使用して、すべてのインスタンスをターゲットにすることもできます。
<div class="my-app">
<button igxButton="raised"></button>
</div>
.my-app {
--igx-button-size: 50px;
}
事前定義されたサイズの 1 つを使用して、それを --ig-size 変数に割り当てることもできます。--ig-size に使用可能な値は、--ig-size-small、--ig-size-medium、--ig-size-large です。
button {
--ig-size: var(--ig-size-large);
}
詳細については、サイズの記事をご覧ください。
API リファレンス
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。
GitHub