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

    다음 단계는 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 {}

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

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

    Using for Angular Button Group Component

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

    Examples

    Alignment

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

    선택

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

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

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

    크기

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

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

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

    Custom toggle buttons

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

    스타일링

    Button Group Theme Property Map

    속성의 $item-background 값을 설정하면, 아래 표에 나열된 모든 관련 종속 속성이 시각적 일관성을 유지하도록 자동으로 업데이트됩니다. 표는 기본 속성 커스터마이즈 시 어떤 속성이 영향을 받는지 보여줍니다.

    기본 속성 종속 속성 설명
    $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-선택-테두리 색상 비활성화된 항목의 테두리 색상입니다.

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

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

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

    가장 간단한 접근 방식에 따라, 우리는 확장하고 button-group-theme 지정하는 $item-background 새로운 테마를 만듭니다. 이 값을 기반으로 테마는 단추 그룹에 대한 적절한 상태 색, 대비 전경 및 테두리를 자동으로 계산합니다. 물론 필요한 경우 테마 매개변수를 사용자 지정 값으로 재정의할 수 있습니다.

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

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

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

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

    Demo

    Styling with Tailwind

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

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

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

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

    • 밝은 테마에 클래스를 사용합니다 light-*.
    • 어두운 테마에 대한 클래스를 사용합니다 dark-*.
    • 접두사 뒤에 컴포넌트 이름을 덧붙이세요, light-button-group​ ​dark-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

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