Angular 버튼 개요
Angular 버튼 지시는 웹 페이지/애플리케이션에 실행 가능한 버튼을 생성하고 추가하는 데 사용됩니다. 다양한 Angular 버튼 유형이 있어 쉽게 커스터마이징할 수 있고 여러 내장 기능이 포함되어 있습니다. 기본적으로 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/button';
// 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/button';
// 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
플랫 버튼
컴포넌트 템플릿에 간단한 플랫 버튼을 추가하는 지침을 사용igxButton 하세요. 타입을 선택하지 않으면 기본적으로 다음과flat 같이 설정됩니다.
<button igxButton="flat">Flat</button>
포함된 버튼
포함된 버튼을 만들기 위해 해야 할 일은 속성의 값을 변경하는 것뿐입니다igxButton:
<button igxButton="contained">Contained</button>
윤곽선 버튼
유사하게 윤곽선 유형으로 전환할 수 있습니다.
<button igxButton="outlined">Outlined</button>
아이콘 버튼
현재 IgniteUI17.1.0 버전 Angular은 아이콘을 완전한 기능의 버튼으로 바꾸는 새로운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 해 요소들을 Ignite UI for Angular 스타일 버튼으로 변환spandiv 할 수도 있습니다. 기본 색상은 와igxButtonColor를 통해igxButtonBackground 커스터마이즈할 수 있습니다:
<span igxButton="contained" igxButtonColor="white" igxButtonBackground="#72da67" igxRipple="white">
Span
</span>
크기
사용자 지정 CSS 속성을 사용하여igxButton 사용자가 크기를--ig-size 선택할 수 있도록 허용할 수 있습니다. 이를 위해 먼저 를IgxButtonGroupModule 가져오고, 그 컴포넌트를 사용igxButtonGroup 해 크기 값을 표시합니다. 이렇게 하면 선택될 때마다 CSS 속성--ig-size 속성을 업데이트합니다.
// app.module.ts
...
import { IgxButtonGroupModule } from 'igniteui-angular/button-group';
// 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})`;
}
모든 것이 순조롭게 진행되면 브라우저에 다음과 같은 내용이 표시됩니다.
스타일링
Button Theme Property Map
주요 속성을 수정하면 관련된 모든 종속 속성이 자동으로 업데이트됩니다:
Material Theme
플랫 버튼
| 기본 속성 | 종속 속성 | 설명 |
|---|---|---|
$foreground |
$hover 배경 | 마우스 버튼의 배경색 |
| $focus 배경 | 포커스 버튼의 배경색 | |
| $focus-호버-배경 | 초점 + 호버 버튼의 배경색 | |
| $active 배경 | 활성 버튼의 배경색 | |
| $hover 전경 | 호버링 버튼의 전경 색상 | |
| $icon색 호버 | 마우스 버튼의 아이콘 색상 | |
| $focus 전경 | 포커스 버튼의 전경 색상 | |
| $focus-호버-포경 | 포커스 + 호버 버튼의 전경 색상 | |
| $active 전경 | 액티브 버튼의 전경 색상 | |
| $focus-가시-배경 | 초점이 보일 때 배경 | |
| $focus-가시-전경 | 초점이 보일 때 전경 |
포함된 버튼
| 기본 속성 | 종속 속성 | 설명 |
|---|---|---|
$background |
$foreground | 배경을 바탕으로 한 전경 |
| $icon색 | 배경 기반 아이콘 색상 | |
| $hover 배경 | 호버 배경색 | |
| $hover 전경 | 호버 상태에서 전경 | |
| $icon색 호버 | 호버 시 아이콘 색상 | |
| $focus 배경 | 초점 배경색 | |
| $focus 전경 | 초점 맞춘 전경 | |
| $focus-호버-배경 | 초점 + 호버 배경 | |
| $focus-호버-포경 | 포커스 + 호버 시 전경 | |
| $active 배경 | 활성 배경색 | |
| $active 전경 | 능동 전경 색상 | |
| $focus-가시-배경 | 초점이 보일 때 배경 | |
| $focus-가시-전경 | 초점이 보일 때 전경 |
윤곽선 버튼
| 기본 속성 | 종속 속성 | 설명 |
|---|---|---|
$foreground |
$hover 배경 | 마우스 버튼의 배경색 |
| $focus 배경 | 포커스 버튼의 배경색 | |
| $focus-호버-배경 | 초점 + 호버 버튼의 배경색 | |
| $active 배경 | 활성 버튼의 배경색 | |
| $hover 전경 | 호버링 버튼의 전경 색상 | |
| $icon색 호버 | 마우스 버튼의 아이콘 색상 | |
| $focus 전경 | 포커스 버튼의 전경 색상 | |
| $focus-호버-포경 | 포커스 + 호버 버튼의 전경 색상 | |
| $active 전경 | 액티브 버튼의 전경 색상 | |
| $focus-가시-배경 | 초점이 보일 때 배경 | |
| $focus-가시-전경 | 초점이 보일 때 전경 | |
| $border색 | 테두리 단추의 테두리 색상. | |
| $hover-테두리 색상 | 호버링된 테두리 버튼의 테두리 색상. | |
| $focus-테두리 색상 | 초점이 맞춰진 테두리 버튼의 테두리 색상. | |
| $focus-가시-테두리 색상 | 초점이 보일 때 테두리가 그려진 버튼의 테두리 색상. | |
| $active-테두리 색상 | 액티브 테두리 버튼의 테두리 색상. |
FAB 버튼
| 기본 속성 | 종속 속성 | 설명 |
|---|---|---|
$background |
$foreground | 배경을 바탕으로 한 전경 |
| $icon색 | 배경 기반 아이콘 색상 | |
| $hover 배경 | 호버 배경색 | |
| $hover 전경 | 호버 상태에서 전경 | |
| $icon색 호버 | 호버 시 아이콘 색상 | |
| $focus 배경 | 초점 배경색 | |
| $focus 전경 | 초점 맞춘 전경 | |
| $active 배경 | 활성 배경색 | |
| $active 전경 | 능동 전경 색상 | |
| $focus-호버-배경 | 초점 + 호버 배경 | |
| $focus-호버-포경 | 포커스 + 호버 시 전경 | |
| $focus-가시-배경 | 초점이 보일 때 배경 | |
| $focus-가시-전경 | 초점이 보일 때 전경 |
Fluent Theme
플랫 버튼
| 기본 속성 | 종속 속성 | 설명 |
|---|---|---|
$foreground |
$hover 배경 | 마우스 버튼의 배경색 |
| $focus 배경 | 포커스 버튼의 배경색 | |
| $focus-호버-배경 | 초점 + 호버 버튼의 배경색 | |
| $active 배경 | 활성 버튼의 배경색 | |
| $hover 전경 | 호버링 버튼의 전경 색상 | |
| $icon색 호버 | 마우스 버튼의 아이콘 색상 | |
| $focus 전경 | 포커스 버튼의 전경 색상 | |
| $focus-호버-포경 | 포커스 + 호버 버튼의 전경 색상 | |
| $active 전경 | 액티브 버튼의 전경 색상 | |
| $focus-가시-전경 | 초점이 보일 때 전경 | |
| $focus-가시-테두리 색상 | 초점이 보일 때 테두리 색상 |
포함된 버튼
| 기본 속성 | 종속 속성 | 설명 |
|---|---|---|
$background | $foreground | 배경을 바탕으로 한 전경 |
| $icon색 | 배경 기반 아이콘 색상 | |
| $hover 배경 | 호버 배경색 | |
| $focus 배경 | 초점 배경색 | |
| $active 배경 | 활성 배경색 | |
| $hover 전경 | 호버 상태에서 전경 | |
| $icon색 호버 | 호버 시 아이콘 색상 | |
| $focus 전경 | 초점 맞춘 전경 | |
| $active 전경 | 능동 전경 색상 | |
| $focus-호버-배경 | 초점 + 호버 배경 | |
| $focus-호버-포경 | 포커스 + 호버 시 전경 | |
| $focus-가시-배경 | 초점이 보일 때 배경 | |
| $focus-가시-전경 | 초점이 보일 때 전경 | |
| $focus-가시-테두리 색상 | 초점이 보일 때 테두리 색상 |
윤곽선 버튼
| 기본 속성 | 종속 속성 | 설명 |
|---|---|---|
$foreground | $hover 배경 | 떠 있는 테두리 버튼의 배경색. |
| $focus 배경 | 초점이 맞춰진 아웃라인 버튼의 배경색. | |
| $focus-호버-배경 | 초점 + 호버 버튼의 윤곽선 배경색. | |
| $active 배경 | 활성 아웃라인 버튼의 배경색. | |
| $hover 전경 | 호버링 테두리 버튼의 전경 색상. | |
| $icon색 호버 | 호버링 테두리 버튼의 아이콘 색상. | |
| $focus 전경 | 초점 맞춘 외곽선 버튼의 전경 색상. | |
| $focus-호버-포경 | 포커스 + 호버 시 버튼의 전경 색상. | |
| $active 전경 | 액티브 테두리 버튼의 전경 색상. | |
| $focus-가시-전경 | 초점이 보일 때 윤곽이 표시된 버튼의 전경 색상. | |
| $focus-가시-테두리 색상 | 초점이 보일 때 테두리 버튼의 테두리 색상. | |
| $border색 | 테두리 단추의 테두리 색상. | |
| $hover-테두리 색상 | 떠 있는 테두리 버튼의 테두리 색상. | |
| $focus-테두리 색상 | 초점이 맞춰진 단추에 테두리 색상을 표시하세요. | |
| $active-테두리 색상 | 활성 테두리 버튼의 테두리 색상. |
FAB 버튼
| 기본 속성 | 종속 속성 | 설명 |
|---|---|---|
$background | $foreground | 배경을 바탕으로 한 전경 |
| $icon색 | 배경 기반 아이콘 색상 | |
| $hover 배경 | 호버 배경색 | |
| $hover 전경 | 호버 상태에서 전경 | |
| $icon색 호버 | 호버 시 아이콘 색상 | |
| $active 배경 | 활성 배경색 | |
| $active 전경 | 능동 전경 색상 | |
| $focus 배경 | 초점 배경색 | |
| $focus 전경 | 초점 맞춘 전경 | |
| $focus-호버-배경 | 초점 + 호버 배경 | |
| $focus-호버-포경 | 포커스 + 호버 시 전경 | |
| $focus-가시-배경 | 초점이 보일 때 배경 | |
| $focus-가시-전경 | 초점이 보일 때 전경 | |
| $focus-가시-테두리 색상 | 초점이 보일 때 테두리 색상 |
Bootstrap Theme
플랫 버튼
| 기본 속성 | 종속 속성 | 설명 |
|---|---|---|
$foreground |
$hover 전경 | 호버링 버튼의 전경 색상 |
| $icon색 호버 | 마우스 버튼의 아이콘 색상 | |
| $focus 전경 | 포커스 버튼의 전경 색상 | |
| $focus-호버-포경 | 포커스 + 호버 버튼의 전경 색상 | |
| $active 전경 | 액티브 버튼의 전경 색상 | |
| $focus-가시-전경 | 초점이 보일 때 전경 | |
| $focus-가시-테두리 색상 | 초점이 보일 때 테두리 색상 | |
| $disabled 전경 | 비활성화 버튼의 전경 색상 | |
| $disabled-아이콘-컬러 | 비활성화 버튼의 아이콘 색상 | |
| $shadow색 | 그림자 색상 |
포함된 버튼
| 기본 속성 | 종속 속성 | 설명 |
|---|---|---|
$background |
$foreground | 배경을 바탕으로 한 전경 |
| $icon색 | 배경 기반 아이콘 색상 | |
| $hover 배경 | 호버 배경색 | |
| $focus 배경 | 초점 배경색 | |
| $active 배경 | 활성 배경색 | |
| $hover 전경 | 호버 상태에서 전경 | |
| $icon색 호버 | 호버 시 아이콘 색상 | |
| $focus 전경 | 초점 맞춘 전경 | |
| $focus-호버-배경 | 초점 + 호버 배경 | |
| $focus-호버-포경 | 포커스 + 호버 시 전경 | |
| $focus-가시-배경 | 초점이 보일 때 배경 | |
| $focus-가시-전경 | 초점이 보일 때 전경 | |
| $active 전경 | 능동 전경 색상 | |
| $shadow색 | 그림자 색상 | |
| $disabled 배경 | 비활성화된 배경색 | |
| $disabled 전경 | 비활성화된 전경 색상 | |
| $disabled-아이콘-컬러 | 비활성화된 아이콘 색상 |
윤곽선 버튼
| 기본 속성 | 종속 속성 | 설명 |
|---|---|---|
$foreground |
$hover 배경 | 마우스 버튼의 배경색 |
| $focus 배경 | 포커스 버튼의 배경색 | |
| $focus-호버-배경 | 초점 + 호버 버튼의 배경색 | |
| $active 배경 | 활성 버튼의 배경색 | |
| $hover 전경 | 호버링 버튼의 전경 색상 | |
| $icon색 호버 | 마우스 버튼의 아이콘 색상 | |
| $focus 전경 | 포커스 버튼의 전경 색상 | |
| $focus-호버-포경 | 포커스 + 호버 버튼의 전경 색상 | |
| $active 전경 | 액티브 버튼의 전경 색상 | |
| $focus-가시-배경 | 초점이 보일 때 배경 | |
| $focus-가시-전경 | 초점이 보일 때 전경 | |
| $focus-가시-테두리 색상 | 초점이 보일 때 테두리 색상 | |
| $disabled 전경 | 비활성화 버튼의 전경 색상 | |
| $disabled-아이콘-컬러 | 비활성화 버튼의 아이콘 색상 | |
| $disabled-테두리 색상 | 장애 버튼의 테두리 색상 | |
| $hover-테두리 색상 | 호버 테두리 색상 | |
| $focus-테두리 색상 | 초점 테두리 색상 | |
| $focus-가시-테두리 색상 | 초점 가시 테두리 색상 | |
| $active-테두리 색상 | 활성 테두리 색상 | |
| $shadow색 | 그림자 색상 |
FAB 버튼
| 기본 속성 | 종속 속성 | 설명 |
|---|---|---|
$background |
$foreground | 배경을 바탕으로 한 전경 |
| $icon색 | 배경 기반 아이콘 색상 | |
| $hover 배경 | 호버 배경색 | |
| $focus 배경 | 초점 배경색 | |
| $active 배경 | 활성 배경색 | |
| $disabled 배경 | 비활성화된 배경색 | |
| $hover 전경 | 호버 상태에서 전경 | |
| $icon색 호버 | 호버 시 아이콘 색상 | |
| $focus 전경 | 초점 맞춘 전경 | |
| $focus-호버-배경 | 초점 + 호버 배경 | |
| $focus-호버-포경 | 포커스 + 호버 시 전경 | |
| $focus-가시-배경 | 초점이 보일 때 배경 | |
| $focus-가시-전경 | 초점이 보일 때 전경 | |
| $active 전경 | 능동 전경 색상 | |
| $shadow색 | 그림자 색상 | |
| $disabled 전경 | 비활성화된 전경 색상 | |
| $disabled-아이콘-컬러 | 비활성화된 아이콘 색상 |
각 버튼은 해당 유형의 버튼만 겨냥합니다.
Indigo Theme
플랫 버튼
| 기본 속성 | 종속 속성 | 설명 |
|---|---|---|
$foreground | $hover 배경 | 마우스 버튼의 배경색 |
| $focus 배경 | 포커스 버튼의 배경색 | |
| $focus-호버-배경 | 초점 + 호버 버튼의 배경색 | |
| $active 배경 | 활성 버튼의 배경색 | |
| $hover 전경 | 호버링 버튼의 전경 색상 | |
| $icon색 호버 | 마우스 버튼의 아이콘 색상 | |
| $focus 전경 | 포커스 버튼의 전경 색상 | |
| $focus-호버-포경 | 포커스 + 호버 버튼의 전경 색상 | |
| $active 전경 | 액티브 버튼의 전경 색상 | |
| $focus-가시-전경 | 초점이 보일 때 전경 | |
| $disabled 전경 | 비활성화된 전경 색상 | |
| $disabled-아이콘-컬러 | 비활성화된 아이콘 색상 | |
| $shadow색 | 그림자 색상 |
포함된 버튼
| 기본 속성 | 종속 속성 | 설명 |
|---|---|---|
$background |
$foreground | 배경을 바탕으로 한 전경 |
| $icon색 | 배경 기반 아이콘 색상 | |
| $hover 배경 | 호버 배경색 | |
| $focus 배경 | 초점 배경색 | |
| $active 배경 | 활성 배경색 | |
| $hover 전경 | 호버 상태에서 전경 | |
| $icon색 호버 | 호버 시 아이콘 색상 | |
| $focus 전경 | 초점 맞춘 전경 | |
| $focus-호버-배경 | 초점 + 호버 배경 | |
| $focus-호버-포경 | 포커스 + 호버 시 전경 | |
| $focus-가시-배경 | 초점이 보일 때 배경 | |
| $focus-가시-전경 | 초점이 보일 때 전경 | |
| $active 전경 | 능동 전경 색상 | |
| $shadow색 | 그림자 색상 | |
| $disabled 배경 | 비활성화된 배경색 | |
| $disabled 전경 | 비활성화된 전경 색상 | |
| $disabled-아이콘-컬러 | 비활성화된 아이콘 색상 |
윤곽선 버튼
| 기본 속성 | 종속 속성 | 설명 |
|---|---|---|
$foreground |
$hover 배경 | 마우스 버튼의 배경색 |
| $focus 배경 | 포커스 버튼의 배경색 | |
| $focus-호버-배경 | 초점 + 호버 버튼의 배경색 | |
| $active 배경 | 활성 버튼의 배경색 | |
| $hover 전경 | 호버링 버튼의 전경 색상 | |
| $icon색 호버 | 마우스 버튼의 아이콘 색상 | |
| $focus 전경 | 포커스 버튼의 전경 색상 | |
| $focus-호버-포경 | 포커스 + 호버 버튼의 전경 색상 | |
| $active 전경 | 액티브 버튼의 전경 색상 | |
| $focus-가시-배경 | 초점이 보일 때 배경 | |
| $focus-가시-전경 | 초점이 보일 때 전경 | |
| $focus-가시-테두리 색상 | 초점이 보일 때 테두리 색상 | |
| $border색 | Border color | |
| $hover-테두리 색상 | 호버 테두리 색상 | |
| $focus-테두리 색상 | 초점 테두리 색상 | |
| $focus-가시-테두리 색상 | 초점 가시 테두리 색상 | |
| $active-테두리 색상 | 활성 테두리 색상 | |
| $shadow색 | 그림자 색상 |
FAB 버튼
| 기본 속성 | 종속 속성 | 설명 |
|---|---|---|
$background |
$foreground | 배경을 바탕으로 한 전경 |
| $icon색 | 배경 기반 아이콘 색상 | |
| $hover 배경 | 호버 배경색 | |
| $focus 배경 | 초점 배경색 | |
| $active 배경 | 활성 배경색 | |
| $disabled 배경 | 비활성화된 배경색 | |
| $hover 전경 | 호버 상태에서 전경 | |
| $icon색 호버 | 호버 시 아이콘 색상 | |
| $focus 전경 | 초점 맞춘 전경 | |
| $focus-호버-배경 | 초점 + 호버 배경 | |
| $focus-호버-포경 | 포커스 + 호버 시 전경 | |
| $focus-가시-배경 | 초점이 보일 때 배경 | |
| $focus-가시-전경 | 초점이 보일 때 전경 | |
| $active 전경 | 능동 전경 색상 | |
| $shadow색 | 그림자 색상 | |
| $disabled 전경 | 비활성화된 전경 색상 | |
| $disabled-아이콘-컬러 | 비활성화된 아이콘 색상 |
메모: 결과적으로 발생하는 종속 속성은 선택된 주제(Material, Fluent, Bootstrap, Indigo)에 따라 약간 달라질 수 있습니다.
버튼을 스타일링하려면 타입별 테마 함수를 사용할 수 있습니다:flat-button-theme,outlined-button-theme,contained-button-theme, andfab-button-theme.
각 버튼은 해당 유형의 버튼만 겨냥합니다.
버튼 스타일링을 시작하려면 먼저 테마 모듈을 가져오세요. 이 모듈에는 모든 테마 기능과 컴포넌트 믹싱이 포함되어 있습니다:
@use "igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
다음으로, 스타일링하는 버튼 유형별 테마 기능을 확장하는 새 테마를 만드세요. 이 예시에서는 함수를contained-button-theme 사용하여 와$foreground 매개변수에$background 값을 전달하고, 각각의 호버 및 활성 매개변수를 함께 전달합니다.
다음 마크업을 고려하면:
<div class="my-contained-btn">
<button igxButton="contained">Contained button</button>
</div>
다음과 같은 테마를 만들 수 있습니다:
$custom-contained-theme: contained-button-theme(
$background: #f9f0ff,
$foreground: #722ed1,
$hover-background: #efdbff,
$hover-foreground: #9254de,
$active-foreground: #531dab,
$active-background: #dfc2fa,
);
포함된 타입 버튼 스타일링에 사용할 수 있는 전체 매개변수 목록은 섹션을contained-button-theme 참고하세요.
마지막으로 애플리케이션에 사용자 지정 테마를 포함 합니다.
.my-contained-btn {
@include css-vars($custom-contained-theme);
}
타입별 테마 기능 덕분에 버튼 스타일링이 훨씬 쉬워졌습니다.
와contained-button-theme 함수의 경우fab-button-theme, 매개변수에$background 색상 값만 제공하면 됩니다. 다른 모든 버튼 상태 및 텍스트 색상(제공되지 않은 경우)은 해당 값을 기반으로 자동으로 생성되고 적용됩니다.
텍스트 색상은 새로 추가adaptive-contrast 된 함수에 의해 결정되며, 이 함수는 제공된 배경색과 대비되는 검정과 흰색 중 어느 쪽이 더 나은 대비를 제공하는지 계산합니다.
와flat-button-theme 함수에 대해서outlined-button-theme도 버튼 상태 색상이 자동으로 생성되고 적용되지만, 이는 제공된$foreground 매개변수$background에서 파생됩니다.
아래 샘플에서 맞춤형 CSS 변수를 가진 버튼 컴포넌트를 사용하면 디자인 시스템에서 사용되는Ant 버튼과 시각적으로 유사한 디자인을 만들 수 있음을 알 수 있습니다.
Note
이 샘플에서는 Bootstrap Light 스키마를 사용합니다.
Styling with Tailwind
저희 맞춤형 Tailwind 유틸리티 클래스를 사용해 스타일button 링할 수 있습니다. 먼저 Tailwind를 꼭 설정 하세요.
전역 스타일시트의 순풍 가져오기와 함께 다음과 같이 원하는 테마 유틸리티를 적용할 수 있습니다.
@import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';
유틸리티 파일에는 테마 변형 두 가지light가dark 모두 포함되어 있습니다.
- 라이트 테마에는 클래스를 사용
light-*하세요. - 어두운 테마에는 클래스를 사용
dark-*하세요. - 접두사 뒤에 컴포넌트 이름을 덧붙이세요. 버튼에 타입이 있기 때문에 클래스는 다음과 같이 사용됩니다. 예를 들어,
light-contained-buttonlight-flat-buttondark-outlined-buttondark-fab-button, 등.
이 클래스들이 적용되면 동적 테마 계산이 가능합니다. 그 다음에는 생성된 CSS 변수를 무arbitrary properties 시할 수 있습니다. 콜론 다음에는 유효한 CSS 색상 형식(HEX, CSS 변수, RGB 등)을 입력하세요.
버튼 테마에서 전체 속성 목록을 찾을 수 있는데, 각 변형마다 다르게 반영됩니다. 그리고flat 버튼의 주요 속성outlined은 이고$foreground, 버튼contained과 버튼은fab 이입니다$background. 문법은 다음과 같습니다:
<div class="buttons-sample">
<div class="button-sample">
<button
igxButton="flat"
class="!light-flat-button ![--foreground:#7B9E89]">
Flat Button
</button>
</div>
<div class="button-sample">
<button
igxButton="contained"
class="!light-contained-button ![--background:#7B9E89]">
Contained Button
</button>
</div>
<div class="button-sample">
<button
igxButton="outlined"
class="!light-outlined-button ![--foreground:#7B9E89]">
Outlined Button
</button>
</div>
<div class="button-sample">
<button
igxButton="fab"
class="!light-fab-button ![--background:#7B9E89]">
Fab Button
</button>
</div>
</div>
Note
느낌표(!)는 유틸리티 클래스가 우선순위가 되도록 보장하기 위해 필요합니다. Tailwind는 레이어에 스타일을 적용하는데, 이 스타일을 중요하게 표시하지 않으면 컴포넌트의 기본 테마에 의해 덮어쓰여집니다.
마지막에 단추는 이렇게 생겨야 합니다:
Custom sizing
버튼 높이는 변수를 사용--size 해 직접 타겟팅button 하여 변경할 수 있습니다:
button {
--size: 50px;
}
또는 모든 인스턴스를 타겟팅하는 유버설--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-medium--ig-size-large
button {
--ig-size: var(--ig-size-large);
}
크기 문서에서 자세히 알아보세요.
API References
Additional Resources
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.
GitHub