Angular 버튼 개요

Angular Button 지시문은 웹 페이지/애플리케이션에 실행 가능한 버튼을 만들고 추가하는 데 사용됩니다. 사용자 정의하기 쉬운 다양한 Angular Button 유형이 있으며 여러 기본 제공 기능이 포함되어 있습니다. 기본적으로 Angular Material은 기본 <button> 및 <a> 요소를 사용하여 접근 가능한 경험을 제공합니다.

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

Angular Button Example

아래의 Angular Button 예제는 테두리로 스타일을 지정하거나 투명한 배경을 적용했을 때 다양한 유형의 버튼이 어떻게 나타나는지 보여드리기 위해 만들어졌습니다.

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 Button 모듈 또는 지시문을 가져왔으므로 요소에 지시문을 사용할 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})`;
}

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

스타일링

버튼 스타일링을 시작하려면 모든 테마 기능과 구성 요소 믹스인이 있는 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 섹션을 살펴보세요.

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

.button-sample {
  @include css-vars($custom-button-theme);
}

특정 유형의 버튼만 스타일을 지정하도록 선택할 수도 있습니다 -flat, outlined, contained, 또는 fab. 이를 위해 새로운 유형별 테마 함수를 사용할 수 있습니다. flat-button-theme​ ​outlined-button-theme​ ​contained-button-theme​ ​fab-button-theme

예를 들어 다음과 같은 태그가 제공됩니다.

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

버튼만 contained 스타일을 지정하려면 다음 기능을 사용할 수 있습니다. contained-button-theme​

$custom-contained-theme: contained-button-theme(
  $background: #348ae0,
);

새로운 유형별 테마 기능을 사용하면 이제 버튼 스타일 지정이 더 쉬워졌습니다. 위의 contained-button-theme 예에서 볼 수 있듯이 및 fab-button-theme 함수의 경우 매개 변수에 색상 $background만 제공하면 됩니다. 그러면 다른 모든 단추 상태 및 텍스트 색이 자동으로 생성되어 해당 값을 기반으로 적용됩니다. 텍스트 색상은 새로 추가된 adaptive-contrast 함수에 의해 결정되며, 이 함수는 제공된 배경색에 대해 검은색 또는 흰색이 더 나은 대비를 제공하는지 여부를 계산합니다.

For flat-button-theme 및 outlined-button-theme 함수에서 단추 상태 색상도 자동으로 생성되고 적용되지만 대신 $background 제공된 $foreground 매개 변수에서 파생됩니다.

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 포럼
• ​GitHub Ignite UI for Angular