Angular 버튼 그룹 구성 요소 개요

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

Angular Button Group Example

Getting Started with 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에 대한 전체 소개는 시작 항목을 참조하십시오.

The next step is to import the IgxButtonGroupModule in your app.module.ts file.

// app.module.ts

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

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

Alternatively, as of 16.0.0 you can import the IgxButtonGroupComponent as a standalone dependency, or use the IGX_BUTTON_GROUP_DIRECTIVES token to import the component and all of its supporting components and 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 {}

Now that you have the Ignite UI for Angular Button Group module or directives imported, you can start with a basic configuration of the igx-buttongroup and its buttons.

Using for Angular Button Group Component

Add Button Group

Use the igx-buttongroup selector to wrap your buttons and display them into a button group. If you want a button to be selected by default, use the selected property:

<!-- 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>

Examples

Alignment

Use the alignment input property to set the orientation of the buttons in the button group.

//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>New York</button>
  <button igxButton>Tokyo</button>
</igx-buttongroup>

선택

In order to configure the igx-buttongroup selection, you could use its selectionMode property. This property accepts the following three modes:

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

The sample below demonstrates the exposed igx-buttongroup selection modes:

크기

The --ig-size CSS custom property can be used to control the size of the button group.

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

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

Custom toggle buttons

Use the values input property to set an array of customized buttons in the button group.

// 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 [selectionMode]="'multi'" [values]="bordersButtons"></igx-buttongroup>

스타일링

Button Group Theme Property Map

When you set a value for the $item-background property, all related dependent properties listed in the table below are automatically updated to maintain visual consistency. The table shows which properties are affected when you customize the primary property.

기본 속성	종속 속성	설명
$item 배경	$item-호버-배경	아이템의 배경 색깔이 떠 있습니다.
	$item-선택-배경	선택한 항목 배경색.
	$item 중심 배경	집중된 아이템 배경색.
	$disabled-배경-색상	비활성화된 아이템 배경색.
	$item-테두리 색상	아이템의 테두리 색상.
	$item-텍스트-컬러	아이템의 텍스트 색상.
	$idle-그림자 색	아이템의 유휴 그림자 색상.
$item-호버-배경	$item-선택-호버-배경	선택한 아이템은 배경색을 떠 있습니다.
	$item-집중-호버-배경	집중된 호버 배경색.
	$item-호버-텍스트-컬러	떠 있는 아이템의 텍스트 색상.
	$item-호버-아이콘-컬러	호버링 아이템의 아이콘 색상.
$item-선택-배경	$item-선택-초점-배경	선택한 항목은 배경색에 초점을 맞춥니다.
	$disabled-선택 배경	비활성화된 경우 배경색이 선택되었습니다.
	$item-선택-텍스트-컬러	선택한 항목의 텍스트 색상.
	$item-선택-아이콘-컬러	선택한 항목의 아이콘 색상.
	$item-선택-마우스-텍스트-컬러	선택한 호버 아이템의 텍스트 색상.
	$item-선택-호버-아이콘-컬러	선택한 호버 아이템의 아이콘 색상.
$item-테두리 색상	$item-호버-테두리 색상	떠 있는 아이템의 테두리 색상.
	$item-초점-테두리 색깔	초점 아이템의 테두리 색상.
	$item-선택-테두리 색상	선택한 항목의 테두리 색상.
	$item-선택-호버-테두리 색상	선택한 호버 아이템의 테두리 색상.
	$item-장애인 국경	장애 아이템의 테두리 색상.
	$disabled-선택-테두리 색상	비활성화된 항목의 테두리 색상입니다.

To get started with styling the button group, we need to import the index file, where all the theme functions and component mixins live:

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

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

Following the simplest approach, we create a new theme that extends the button-group-theme and specifying just the $item-background. Based on this value, the theme will automatically compute appropriate state colors, contrast foregrounds, and borders for the button group. Of course, you're still free to override any of the theme parameters with custom values if needed.

$custom-button-group: button-group-theme(
  $item-background: #57a5cd,
);

As seen, the button-group-theme exposes some useful parameters for basic styling of its items. If you want to drill deeper and change some button specific parameters, you can create a new theme that extends the button-theme and scope it under the respective button group class.

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

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

Demo

Styling with Tailwind

저희 맞춤형 Tailwind 유틸리티 클래스를 사용해 스타일button-group 링할 수 있습니다. 먼저 Tailwind를 꼭 설정 하세요.

전역 스타일시트의 순풍 가져오기와 함께 다음과 같이 원하는 테마 유틸리티를 적용할 수 있습니다.

@import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';

유틸리티 파일에는 테마 변형 두 가지light가dark 모두 포함되어 있습니다.

라이트 테마에는 클래스를 사용light-* 하세요.
어두운 테마에는 클래스를 사용dark-* 하세요.
접두사 뒤에 컴포넌트 이름을 덧붙이세요,light-button-groupdark-button-group 예: .

이 클래스들이 적용되면 동적 테마 계산이 가능합니다. 그 다음에는 생성된 CSS 변수를 무arbitrary properties 시할 수 있습니다. 콜론 다음에는 유효한 CSS 색상 형식(HEX, CSS 변수, RGB 등)을 입력하세요.

전체 속성 목록은 button-group-theme에서 확인할 수 있습니다. 문법은 다음과 같습니다:

<igx-button-group
class="!light-button-group ![--item-background:#7B9E89]"
>
...
</igx-button-group>

Note

느낌표(!)는 유틸리티 클래스가 우선순위가 되도록 보장하기 위해 필요합니다. Tailwind는 레이어에 스타일을 적용하는데, 이 스타일을 중요하게 표시하지 않으면 컴포넌트의 기본 테마에 의해 덮어쓰여집니다.

마지막에 버튼 그룹은 다음과 같이 보여야 합니다:

API References

Theming Dependencies

Additional Resources

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