Angular 버튼 그룹 구성 요소 개요

Angular Button Group 구성 요소는 수평/수직 정렬, 단일/다중 선택 및 토글을 사용하여 스타일이 지정된 버튼 그룹으로 버튼을 구성하는 데 사용됩니다.

Angular 버튼 그룹 예

EXAMPLE

TS

HTML

SCSS

import { Component } from '@angular/core';
import { IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective, IgxIconComponent } from 'igniteui-angular';

@Component({
    selector: 'app-button-group-sample-1',
    styleUrls: ['./button-group-sample-1.component.scss'],
    templateUrl: './button-group-sample-1.component.html',
    imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective, IgxIconComponent]
})

export class ButtonGroupSample1Component {
    public rippleColor = 'grey';
}
tsコピー

<article class="sample-column">
    <igx-buttongroup>
        <button igxButton [igxRipple]="rippleColor">
            <igx-icon>format_align_left</igx-icon>
        </button>
        <button igxButton [igxRipple]="rippleColor">
            <igx-icon>format_align_center</igx-icon>
        </button>
        <button igxButton [igxRipple]="rippleColor">
            <igx-icon>format_align_right</igx-icon>
        </button>
        <button igxButton [igxRipple]="rippleColor" selected>
            <igx-icon>format_align_justify</igx-icon>
        </button>
    </igx-buttongroup>
</article>
htmlコピー

igx-buttongroup{
    display: inline-block;
    max-width: 400px;
}
scssコピー

Edit in: CodesandboxStackBlitz

이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.

60 以上のコンポーネント、柔軟な API、強力なテーマ設定およびブランディング機能、必要な速度と機能を備えた Angular アプリケーションを構築するための豊富な機能セット。

無料で試してみる

Ignite UI for Angular 버튼 그룹 시작하기

Ignite UI for Angular Button Group 구성 요소를 시작하려면 먼저 Ignite UI for Angular 설치해야 합니다. 기존 Angular 애플리케이션에서 다음 명령을 입력합니다.

ng add igniteui-angular
cmd

Ignite UI for Angular에 대한 전체 소개는 시작 항목을 참조하십시오.

다음 단계는 IgxButtonGroupModule 당신의 app.module.ts 파일.

// app.module.ts

...
import { IgxButtonGroupModule } from 'igniteui-angular';
// import { IgxButtonGroupModule } from '@infragistics/igniteui-angular'; for licensed package

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

또는 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>
            <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 {}
typescript

이제 Ignite UI for Angular Button Group 모듈 또는 지시문을 가져왔으므로 및 해당 버튼의 igx-buttongroup 기본 구성부터 시작할 수 있습니다.

Angular 버튼 그룹 구성 요소 사용

버튼 그룹 추가

​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>
    <igx-icon>format_align_justify</igx-icon>
  </button>
</igx-buttongroup>
html

예

조정

​alignment 입력 속성을 사용하여 버튼 그룹의 버튼 방향을 설정합니다.

//sample.component.ts
import { ButtonGroupAlignment } from 'igniteui-angular';
// import { ButtonGroupAlignment } from '@infragistics/igniteui-angular'; for licensed package

...
public alignment = ButtonGroupAlignment.vertical;
...
typescript

<!-- sample.component.html -->
<igx-buttongroup [alignment]="alignment">
  <button igxButton>Sofia</button>
  <button igxButton>London</button>
  <button igxButton selected>New York</button>
  <button igxButton>Tokyo</button>
</igx-buttongroup>
html

EXAMPLE

TS

HTML

SCSS

import { Component } from '@angular/core';
import { ButtonGroupAlignment, IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular';

@Component({
    selector: 'app-button-group-sample-2',
    styleUrls: ['./button-group-sample-2.component.scss'],
    templateUrl: './button-group-sample-2.component.html',
    imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective]
})
export class ButtonGroupSample2Component {
    public alignment = ButtonGroupAlignment.vertical;
    public rippleColor = 'grey';
}
tsコピー

<article class="sample-column">
    <igx-buttongroup [alignment]="alignment">
        <button igxButton [igxRipple]="rippleColor">Sofia</button>
        <button igxButton [igxRipple]="rippleColor">London</button>
        <button igxButton selected [igxRipple]="rippleColor">New York</button>
        <button igxButton [igxRipple]="rippleColor">Tokyo</button>
    </igx-buttongroup>
</article>htmlコピー

igx-buttongroup{
    display: inline-block;
    width: 200px;
}
scssコピー

Edit in: CodesandboxStackBlitz

선택

​igx-buttongroup 선택을 구성하려면 해당 SelectionMode 속성을 사용할 수 있습니다. 이 속성은 다음 세 가지 모드를 허용합니다.

• 단일- 버튼 그룹의 기본 선택 모드입니다. 사용자는 하나의 버튼을 선택/선택 취소할 수 있습니다.
• SingleRequired- 라디오 그룹 동작을 모방합니다. 버튼은 하나만 선택할 수 있으며, 한번 선택하면 사용자 상호작용을 통해 선택 취소가 불가능합니다.
• multi- 그룹의 여러 버튼을 선택하거나 선택 취소할 수 있습니다.

아래 샘플은 노출된 igx-buttongroup 선택 모드를 보여줍니다.

EXAMPLE

TS

HTML

SCSS

import { Component } from '@angular/core';
import { IgxRadioComponent, IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective, IgxIconComponent } from 'igniteui-angular';
import { FormsModule } from '@angular/forms';

@Component({
    selector: 'app-button-group-sample',
    styleUrls: ['./button-group-sample.component.scss'],
    templateUrl: './button-group-sample.component.html',
    imports: [IgxRadioComponent, FormsModule, IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective, IgxIconComponent]
})
export class ButtonGroupSampleComponent {
    public rippleColor = 'grey';
    public selectionMode: 'single' | 'singleRequired' | 'multi' = 'single';
}
tsコピー

<article class="sample-column">
    <h6>Selection Mode</h6>
    <div class="radio-buttons">
        <igx-radio [(ngModel)]="selectionMode" value="single">Single</igx-radio>
        <igx-radio [(ngModel)]="selectionMode" value="singleRequired">Single-Required</igx-radio>
        <igx-radio [(ngModel)]="selectionMode" value="multi">Multi</igx-radio>
    </div>
    <igx-buttongroup [selectionMode]="selectionMode">
        <button igxButton [igxRipple]="rippleColor">
            <igx-icon>format_bold</igx-icon>
        </button>
        <button igxButton [igxRipple]="rippleColor">
            <igx-icon>format_italic</igx-icon>
        </button>
        <button igxButton [igxRipple]="rippleColor">
            <igx-icon>format_underlined</igx-icon>
        </button>
    </igx-buttongroup>
</article>htmlコピー

.sample-column,
.radio-buttons {
    display: flex;
    gap: 16px;
}

.sample-column {
    flex-direction: column;
    align-items: flex-start;
}
scssコピー

Edit in: CodesandboxStackBlitz

크기

​--ig-size CSS 사용자 정의 속성을 사용하여 버튼 그룹의 크기를 제어할 수 있습니다.

/* sample.component.scss */
igx-buttongroup {
  --ig-size: var(--ig-size-small);
}
scss

<!-- sample.component.html -->
<igx-buttongroup></igx-buttongroup>
html

EXAMPLE

TS

HTML

SCSS

import { Component, HostBinding, OnInit } from '@angular/core';
import { IgxButtonGroupComponent } from 'igniteui-angular';

type Button = {
    label: string,
    selected: boolean,
    togglable: boolean
}

@Component({
    selector: 'app-button-group-sample-5',
    styleUrls: ['./button-group-sample-5.component.scss'],
    templateUrl: './button-group-sample-5.component.html',
    imports: [IgxButtonGroupComponent]
})
export class ButtonGroupSample5Component implements OnInit {
    public rippleColor = 'grey';
    public size = 'large';
    public sizes: Button[];

    public ngOnInit() {
        this.sizes = [
            { label: 'small', selected: this.size === 'small', togglable: true },
            { label: 'medium', selected: this.size === 'medium', togglable: true },
            { label: 'large', selected: this.size === 'large', 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})`;
    }
}
tsコピー

<article class="sample-column">
    <igx-buttongroup [values]="sizes" (selected)="selectSize($event)"></igx-buttongroup>
</article>
htmlコピー

igx-buttongroup{
    display: inline-block;
}scssコピー

Edit in: CodesandboxStackBlitz

맞춤 토글 버튼

​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
        })
    ];
}
...
typescript

<!-- sample.component.html -->
<igx-buttongroup [selectionMode]="'multi'" [values]="bordersButtons"></igx-buttongroup>
html

EXAMPLE

TS

HTML

SCSS

import { Component, OnInit } from '@angular/core';
import { IgxButtonGroupComponent } from 'igniteui-angular';

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

@Component({
    selector: 'app-button-group-sample-3',
    styleUrls: ['./button-group-sample-3.component.scss'],
    templateUrl: './button-group-sample-3.component.html',
    imports: [IgxButtonGroupComponent]
})
export class ButtonGroupSample3Component implements OnInit {
    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
            })
        ];
    }
}
tsコピー

<article class="sample-column">
    <igx-buttongroup [selectionMode]="'multi'" [values]="bordersButtons"></igx-buttongroup>
</article>htmlコピー

igx-buttongroup {
    display: inline-block;
    width: 300px;
}
scssコピー

Edit in: CodesandboxStackBlitz

스타일링

버튼 그룹 스타일링을 시작하려면 모든 테마 기능과 구성 요소 믹스인이 있는 index 파일을 가져와야 합니다.

@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
scss

가장 간단한 접근 방식에 따라 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,
);
scss

보시다시피, button-group-theme 항목의 기본 스타일을 지정하는 데 유용한 몇 가지 매개변수를 노출합니다. 더 자세히 살펴보고 일부 버튼별 매개변수를 변경하려면 button-theme 확장하는 새 테마를 만들고 해당 버튼 그룹 클래스 아래에서 범위를 지정할 수 있습니다.

마지막 단계는 구성 요소의 테마를 포함하는 것입니다.

@include css-vars($custom-button-group);
scss

데모

EXAMPLE

TS

HTML

SCSS

import { Component } from '@angular/core';
import { ButtonGroupAlignment, IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular';

@Component({
    selector: 'app-button-group-style',
    styleUrls: ['./button-group-style.component.scss'],
    templateUrl: './button-group-style.component.html',
    imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective]
})
export class ButtonGroupStyleComponent {
    public alignment = ButtonGroupAlignment.vertical;
}
tsコピー

<article class="sample-column">
    <igx-buttongroup [alignment]="alignment">
        <button igxButton igxRipple="white">Sofia</button>
        <button igxButton igxRipple="white">London</button>
        <button igxButton igxRipple="white">New York</button>
        <button igxButton igxRipple="white" disabled>Tokyo</button>
    </igx-buttongroup>
</article>
htmlコピー

@use "layout.scss" as *;
@use "igniteui-angular/theming" as *;

$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,
);

@include css-vars($custom-button-group);
 
scssコピー

Edit in: CodesandboxStackBlitz

API 참조

• IgxButtonGroupComponent
• IgxButton그룹 스타일
• IgxButton 지시어
• Igx버튼 스타일

테마 종속성

• IgxIcon 테마
• IgxButton 테마
• IgxRipple 테마

추가 리소스

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.

• Ignite UI for Angular 포럼
• ​GitHub Ignite UI for Angular