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 버튼 예제
아래의 Angular Button 예제는 테두리로 스타일을 지정하거나 투명한 배경을 적용했을 때 다양한 유형의 버튼이 어떻게 나타나는지 보여드리기 위해 만들어졌습니다.
이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.
Ignite UI for Angular Button 시작하기
Ignite UI for Angular Button 지시문을 시작하려면 먼저 Ignite UI for Angular 설치해야 합니다. 기존 Angular 애플리케이션에서 다음 명령을 입력합니다.
ng add igniteui-angular
cmdIgnite 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 {}
typescript또는 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 {}
typescript이제 Ignite UI for Angular Button 모듈 또는 지시문을 가져왔으므로 요소에 지시문을 사용할 igxButton 수 있습니다.
Angular 버튼 유형
플랫 버튼
igxButton 지시문을 사용하여 구성 요소 템플릿에 간단한 평면 버튼을 추가합니다. 유형을 선택하지 않으면 기본적으로 flat으로 설정됩니다.
<button igxButton="flat">Flat</button>
html포함된 버튼
포함된 단추를 만들려면 속성 값을 igxButton 변경하기만 하면 됩니다.
<button igxButton="contained">Contained</button>
html윤곽선 버튼
유사하게 윤곽선 유형으로 전환할 수 있습니다.
<button igxButton="outlined">Outlined</button>
html아이콘 버튼
버전 17.1.0부터 Angular 용 IgniteUI는 아이콘을 완전한 기능의 버튼으로 전환하기 위한 새로운 igxIconButton 지시문을 노출합니다. 아이콘 버튼에 대한 자세한 내용은 여기를 참조하세요.
<button igxIconButton="flat">
<igx-icon fontSet="material">favorite</igx-icon>
</button>
html플로팅 작업 버튼
플로팅 작업 버튼을 만들고 아이콘을 사용하여 다음을 표시할 수 있습니다.
<button igxButton="fab">
<igx-icon fontSet="material">edit</igx-icon>
</button>
html확장된 FAB를 생성하려면 igx-icon 앞에 요소를 추가하면 됩니다.
<button class="btn" igxButton="fab">
<span>like</span>
<igx-icon fontSet="material">favorite</igx-icon>
</button>
html확장된 FAB 텍스트의 스타일을 올바르게 지정하려면 <span> 또는 <div> 태그를 사용하세요.
예
Angular 비활성화 버튼
disabled 속성을 사용하면 버튼을 클릭할 수 없게 만들 수 있습니다.
<button igxButton="contained" [disabled]="'true'">Disabled</button>
html리플
igxRipple 지시어는 버튼이나 기타 지정된 요소에 파급 효과를 추가합니다. 해당 속성을 사용하여 기본 잔물결 색상, 위치 및 지속 시간을 쉽게 변경할 수 있습니다.
<button igxButton="contained" igxRipple="white" [igxRippleCentered]="true" [igxRippleDuration]="2000">
Ripple
</button>
html기간
또한 지시 igxButton 문을 사용하여 스타일이 지정된 버튼과 같은 span div 요소를 Ignite UI for Angular 버튼으로 변환할 수 있습니다. 기본 색상은 및 속성을 통해 igxButtonColor 사용자 지정할 수 있습니다. igxButtonBackground
<span igxButton="contained" igxButtonColor="white" igxButtonBackground="#72da67" igxRipple="white">
Span
</span>
html
크기
--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
...
]
})
typescript<!--buttons-density.component.html-->
<igx-buttongroup [values]="sizes" (selected)="selectSize($event)"></igx-buttongroup>
...
<button igxButton="flat">Flat</button>
html// 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})`;
}
typescript모든 것이 순조롭게 진행되면 브라우저에 다음과 같은 내용이 표시됩니다.
스타일링
버튼 스타일링을 시작하려면 모든 테마 기능과 구성 요소 믹스인이 있는 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-theme 확장하고 각각의 hover 및 focus 매개변수와 함께 $foreground 및 $background 매개변수를 허용하는 새로운 테마를 만듭니다.
다음 마크업을 고려하면:
<div class="my-contained-btn">
<button igxButton="contained">Contained button</button>
</div>
html테마를 만들어야 합니다.
$custom-button-theme: button-theme(
$foreground: #fdfdfd,
$hover-foreground: #fdfdfd,
$focus-foreground: #fdfdfd,
$background: #345779,
$hover-background: #2e4d6b,
$focus-background: #2e4d6b,
$disabled-foreground: #2e4d6b,
);
scss모든 유형의 버튼 스타일을 지정하는 데 사용할 수 있는 매개변수의 전체 목록을 보려면 button-theme 섹션을 살펴보세요.
마지막 단계는 애플리케이션에 사용자 정의 버튼 테마를 전달하는 것입니다.
.button-sample {
@include css-vars($custom-button-theme);
}
scss데모
사용자 지정 크기 조정
변수를 사용하여--size 버튼 높이를 변경할 수 있으며 직접 타겟팅 할 수 있습니다. button
button {
--size: 50px;
}
scss또는 universal--igx-button-size 변수를 사용하여 모든 인스턴스를 타겟팅 할 수 있습니다.
<div class="my-app">
<button igxButton="raised"></button>
</div>
html.my-app {
--igx-button-size: 50px;
}
scss미리 정의된 크기 중 하나를 사용하여 변수에 할당할 수도 있습니다--ig-size. 에--ig-size 사용할 수 있는 값은 다음과 같습니다--ig-size-small.--ig-size-large--ig-size-medium
button {
--ig-size: var(--ig-size-large);
}
scss크기 문서에서 자세히 알아보세요.
API 참조
추가 리소스
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.
GitHub