Angular Button Group (ボタン グループ) コンポーネントの概要
Angular Button Group コンポーネントは、ボタンを水平/垂直配置、単一/複数選択、オン/オフ切り替えが可能なスタイルのボタン グループに組織するために使用します。
Angular Button Group の例
Ignite UI for Angular Button Group を使用した作業の開始
Ignite UI for Angular Button Group コンポーネントを使用した作業を開始するには、Ignite UI for Angular をインストールする必要があります。既存の Angular アプリケーションで、以下のコマンドを入力します。
ng add igniteui-angular
Ignite UI for Angular については、「はじめに」トピックをご覧ください。
次に、app.module.ts ファイルに IgxButtonGroupModule をインポートします。
// app.module.ts
...
import { IgxButtonGroupModule } from 'igniteui-angular';
// import { IgxButtonGroupModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
...
imports: [..., IgxButtonGroupModule],
...
})
export class AppModule {}
あるいは、16.0.0 以降、IgxButtonGroupComponent をスタンドアロンの依存関係としてインポートすることも、IGX_BUTTON_GROUP_DIRECTIVES トークンを使用してコンポーネントとそのすべてのサポート コンポーネントおよびディレクティブをインポートすることもできます。
// home.component.ts
...
import { IGX_BUTTON_GROUP_DIRECTIVES, IgxIconComponent } from 'igniteui-angular';
// import { IGX_BUTTON_GROUP_DIRECTIVES, IgxIconComponent } from '@infragistics/igniteui-angular'; for licensed package
@Component({
selector: 'app-home',
template: `
<igx-buttongroup>
<button igxButton>
<igx-icon>format_align_left</igx-icon>
</button>
<button igxButton>
<igx-icon>format_align_center</igx-icon>
</button>
<button igxButton>
<igx-icon>format_align_right</igx-icon>
</button>
<button igxButton [selected]="true">
<igx-icon>format_align_justify</igx-icon>
</button>
</igx-buttongroup>
`,
styleUrls: ['home.component.scss'],
standalone: true,
imports: [IGX_BUTTON_GROUP_DIRECTIVES, IgxIconComponent]
/* or imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxIconComponent] */
})
export class HomeComponent {}
Ignite UI for Angular Button Group モジュールまたはディレクティブをインポートしたので、igx-buttongroup とそのボタンの基本構成を開始できます。
Angular Button Group コンポーネントの使用
ボタン グループの追加
igx-buttongroup セレクターを使用してボタンをラップし、ボタン グループに表示します。デフォルトでボタンを選択したい場合、selected プロパティを使用します。
<!-- sample.component.html -->
<igx-buttongroup>
<button igxButton>
<igx-icon>format_align_left</igx-icon>
</button>
<button igxButton>
<igx-icon>format_align_center</igx-icon>
</button>
<button igxButton>
<igx-icon>format_align_right</igx-icon>
</button>
<button igxButton [selected]="true">
<igx-icon>format_align_justify</igx-icon>
</button>
</igx-buttongroup>
例
配置
alignment プロパティを使用して、ボタン グループ内のボタンの方向を設定します。
//sample.component.ts
import { ButtonGroupAlignment } from 'igniteui-angular';
// import { ButtonGroupAlignment } from '@infragistics/igniteui-angular'; for licensed package
...
public alignment = ButtonGroupAlignment.vertical;
...
<!-- sample.component.html -->
<igx-buttongroup [alignment]="alignment">
<button igxButton>Sofia</button>
<button igxButton>London</button>
<button igxButton [selected]="true">New York</button>
<button igxButton>Tokyo</button>
</igx-buttongroup>
複数選択
multiSelection プロパティを使用して、ボタン グループ内のボタンの複数選択を有効/無効化します。
<!-- sample.component.html -->
<igx-buttongroup [multiSelection]="true">
<button igxButton>
<igx-icon>format_bold</igx-icon>
</button>
<button igxButton>
<igx-icon>format_italic</igx-icon>
</button>
<button igxButton>
<igx-icon>format_underlined</igx-icon>
</button>
</igx-buttongroup>
サイズ (表示密度)
--ig-size CSS カスタム プロパティを使用して、ボタン グループのサイズを制御できます。
/* sample.component.scss */
igx-buttongroup {
--ig-size: var(--ig-size-small);
}
<!-- sample.component.html -->
<igx-buttongroup></igx-buttongroup>
カスタム トグル ボタン
values プロパティを使用して、ボタン グループ内のカスタムボタンの配列を設定します。
// sample.component.ts
interface IButton {
ripple?: string;
label?: string;
disabled?: boolean;
togglable?: boolean;
selected?: boolean;
color?: string;
icon?: string;
}
class ToggleButton {
private ripple: string;
private label: string;
private disabled: boolean;
private togglable: boolean;
private selected: boolean;
private color: string;
private icon: string;
constructor(obj?: IButton) {
this.ripple = obj.ripple || 'gray';
this.label = obj.label;
this.selected = obj.selected || false;
this.togglable = obj.togglable || true;
this.disabled = obj.disabled || false;
this.color = obj.color;
this.icon = obj.icon;
}
}
...
public bordersButtons: ToggleButton[];
public ngOnInit() {
this.bordersButtons = [
new ToggleButton({
icon: 'border_top',
selected: true
}),
new ToggleButton({
icon: 'border_right',
selected: false
}),
new ToggleButton({
icon: 'border_bottom',
selected: false
}),
new ToggleButton({
icon: 'border_left',
selected: false
})
];
}
...
<!-- sample.component.html -->
<igx-buttongroup [multiSelection]="true" [values]="bordersButtons"></igx-buttongroup>
スタイル設定
ボタン グループ のスタイル設定は、すべてのテーマ関数とコンポーネント ミックスインが存在する index ファイルをインポートする必要があります。
@use "igniteui-angular/theming" as *;
// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';
最も簡単な方法は、button-group-theme を拡張し、さまざまな状態のボタン グループの項目をスタイルするパラメーターを受け取る新しいテーマを作成する方法です。
$custom-button-group: button-group-theme(
$item-text-color: #fdfdfd,
$item-background: #2f4d6a,
$item-hover-text-color: #fdfdfd,
$item-hover-background: #1f3347,
$item-selected-text-color: #fdfdfd,
$item-selected-background: #1f3347,
$item-selected-hover-background: #1f3347,
$disabled-text-color: gray,
$disabled-background-color: lightgray
);
ご覧のとおり、button-group-theme は、項目の基本的なスタイル設定に役立ついくつかのパラメーターを公開しています。ボタン固有のパラメーターを変更する場合は、button-theme を拡張する新しいテーマを作成し、それぞれのボタン グループのクラスの下でスコープできます。
CSS 変数の使用
最後にコンポーネントのテーマを含めます。
@include css-vars($custom-button-group);
テーマ オーバーライドの使用
Internet Explorer 11 などの古いブラウザーのコンポーネントをスタイル設定するには、CSS 変数をサポートしていないため、別のアプローチを用いる必要があります。
コンポーネントが Emulated ViewEncapsulation を使用している場合、::ng-deep を使用してこのカプセル化を解除する必要があります。カスタム テーマが他のコンポーネントに影響しないようにするには、::ng-deep の前に :host セレクターを含めるようにしてください。
:host {
::ng-deep {
@include button-group($custom-button-group);
}
}
デモ
API リファレンス
テーマの依存関係
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。
GitHub