Angular 버튼 개요

Angular Button 지시어는 웹 페이지/애플리케이션에 실행 가능한 버튼을 생성하고 추가하는 데 사용됩니다. 쉽게 사용자 정의할 수 있고 여러 내장 기능을 포함하는 다양한 Angular 버튼 유형이 있습니다. 기본적으로 Angular Material은 기본 <button> 및 <a> 요소를 사용하여 접근 가능한 환경을 제공합니다.

Ignite UI for Angular Button 지시문은 모든 버튼, 스팬, div 또는 앵커 요소를 완전한 기능의 버튼으로 전환하기 위한 것입니다. Flat Button, Contained Button, Outline Button 및 Floating Action Button과 같은 Angular 버튼 유형을 사용할 수 있습니다. 사용자 정의 가능한 색상, 테마를 만들고 Angular 버튼 스타일을 변경하는 옵션, 사용자가 버튼 크기 등을 선택할 수 있습니다.

Angular Button Example

테두리가 있는 스타일을 지정하거나 투명 배경을 적용할 때 다양한 버튼 유형이 어떻게 나타나는지 보여주기 위해 아래 Angular 버튼 예제를 만들었습니다.

Getting Started with Ignite UI for Angular Button

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

ng add igniteui-angular

Ignite UI for Angular에 대한 전체 소개를 보려면 시작하기 항목을 읽어보세요.

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

// 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 가져왔으므로 요소에서 igxButton 지시문을 사용할 수 있습니다.

Angular Button Types

Flat Button

​igxButton 지시문을 사용하여 구성 요소 템플릿에 간단한 평면 버튼을 추가합니다. 유형을 선택하지 않으면 기본적으로 flat으로 설정됩니다.

<button igxButton="flat">Flat</button>

Contained Button

포함된 단추를 만들려면 속성 값을 igxButton 변경하기만 하면 됩니다.

<button igxButton="contained">Contained</button>

Outlined Button

유사하게 윤곽선 유형으로 전환할 수 있습니다.

<button igxButton="outlined">Outlined</button>

아이콘 버튼

현재 17.1.0 Angular 용 IgniteUI는 아이콘을 완전한 기능의 버튼으로 전환하기위한 새로운 igxIconButton 지시문을 노출합니다. 아이콘 버튼에 대한 자세한 내용은 여기에서 확인할 수 있습니다.

<button igxIconButton="flat">
  <igx-icon fontSet="material">favorite</igx-icon>
</button>

Floating Action Button

플로팅 작업 버튼을 만들고 아이콘을 사용하여 다음을 표시할 수 있습니다.

<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> 태그를 사용하세요.

Examples

Angular Disable Button

​disabled 속성을 사용하면 버튼을 클릭할 수 없게 만들 수 있습니다.

<button igxButton="contained" [disabled]="'true'">Disabled</button>

리플

​igxRipple 지시어는 버튼이나 기타 지정된 요소에 파급 효과를 추가합니다. 해당 속성을 사용하여 기본 잔물결 색상, 위치 및 지속 시간을 쉽게 변경할 수 있습니다.

<button igxButton="contained" igxRipple="white" [igxRippleCentered]="true" [igxRippleDuration]="2000">
    Ripple
</button>

Span

또한 igxButton 지시문을 사용하여 span 및 div와 같은 요소를 Ignite UI for Angular로 전환할 수 있습니다. 기본 색상은 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})`;
}

모든 것이 순조롭게 진행되면 브라우저에 다음과 같은 내용이 표시됩니다.

Angular Button Styling

버튼 스타일링을 시작하려면 모든 테마 기능과 구성 요소 믹스인이 있는 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-theme 확장하고 각각의 hover 및 focus 매개변수와 함께 $foreground 및 $background 매개변수를 허용하는 새로운 테마를 만듭니다.

다음 마크업을 고려하면:

<div class="my-contained-btn">
    <button igxButton="contained">Contained button</button>
</div>

테마를 만들어야 합니다.

$custom-button-theme: button-theme(
    $foreground: #fdfdfd,
    $hover-foreground: #fdfdfd,
    $focus-foreground: #fdfdfd,
    $background: #345779,
    $hover-background: #2e4d6b,
    $focus-background: #2e4d6b,
    $disabled-foreground: #2e4d6b
);

모든 유형의 버튼 스타일을 지정하는 데 사용할 수 있는 매개변수의 전체 목록을 보려면 button-theme 섹션을 살펴보세요.

Using CSS variables

마지막 단계는 애플리케이션에 사용자 정의 버튼 테마를 전달하는 것입니다.

.my-contained-btn {
    @include css-vars($custom-button-theme);
}

Using Theme Overrides

Internet Explorer 11과 같은 이전 브라우저의 구성 요소에 스타일을 지정하려면 CSS 변수를 지원하지 않기 때문에 다른 접근 방식을 사용해야 합니다. 구성 요소가 Emulated ViewEncapsulation을 사용하는 경우::ng-deep 사용하여 이 캡슐화를 penetrate 해야 합니다. 사용자 정의 테마가 다른 구성 요소에 유출되는 것을 방지하려면::ng-deep 앞에:host 선택기를 포함해야 합니다.

:host {
     ::ng-deep {
        .my-contained-btn {
            @include button($custom-button-theme);
        }
    }
}

Demo

Custom sizing

변수를 사용하여--size 버튼 높이를 변경할 수 있으며 직접 타겟팅 할 수 있습니다. button​

button {
  --size: 50px;
}

또는 universal--igx-button-size 변수를 사용하여 모든 인스턴스를 타겟팅 할 수 있습니다.

<div class="my-app">
  <button igxButton="raised"></button>
</div>

.my-app {
  --igx-button-size: 50px;
}

미리 정의된 크기 중 하나를 사용하여 변수에 할당할 수도 있습니다--ig-size. 에--ig-size 사용할 수 있는 값은 다음과 같습니다--ig-size-small.--ig-size-large​--ig-size-medium​

button {
    --ig-size: var(--ig-size-large);
}

​크기 문서에서 자세히 알아보세요.

API References

• IgxButton 지시어
• Igx버튼 스타일
• IgxRipple 지시어
• IgxIconButton지시문
• IgxButtonGroupComponent

Additional Resources

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

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