Angular 버튼 개요
Angular Button directive is used for creating and adding actionable buttons to a web page/application. There are different Angular Button types that are easy to customize and include several built-in features. By default, Angular Material uses native <button> and <a> elements to deliver an accessible experience.
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 {}
Now that you have the Ignite UI for Angular Button module or directive imported, you can start using the igxButton directive on elements.
Angular Button Types
플랫 버튼
Use the igxButton directive to add a simple flat button in your component template. Note that if you do not choose a type, by default it will be set to flat.
<button igxButton="flat">Flat</button>
포함된 버튼
All you have to do to create a contained button is to change the value of the igxButton property:
<button igxButton="contained">Contained</button>
윤곽선 버튼
유사하게 윤곽선 유형으로 전환할 수 있습니다.
<button igxButton="outlined">Outlined</button>
아이콘 버튼
As of version 17.1.0 the IgniteUI for Angular exposes a new igxIconButton directive intended to turn icons into fully functional buttons. You can read more about the Icon Button here.
<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>
To create an extended FAB, you can add any element prior to the igx-icon:
<button class="btn" igxButton="fab">
<span>like</span>
<igx-icon fontSet="material">favorite</igx-icon>
</button>
Note
To get the extended FAB text styled properly, use <span> or <div> tags.
Examples
Angular Disable Button
The disabled property can be used to make a button unclickable:
<button igxButton="contained" [disabled]="'true'">Disabled</button>
리플
The igxRipple directive adds a ripple effect to your buttons or other specified elements. You can easily change the default ripple color, position and duration, using its properties:
<button igxButton="contained" igxRipple="white" [igxRippleCentered]="true" [igxRippleDuration]="2000">
Ripple
</button>
Span
We can also use the igxButton directive to turn elements like span and div into Ignite UI for Angular styled buttons. The default colors can be customized via the igxButtonColor and the igxButtonBackground properties:
<span igxButton="contained" igxButtonColor="white" igxButtonBackground="#72da67" igxRipple="white">
Span
</span>
크기
We can allow the user to choose the size of the igxButton by using the --ig-size custom CSS property. To do this, first we have to import the IgxButtonGroupModule, and then use the igxButtonGroup component to display size values. This way whenever one gets selected, we will update the --ig-size CSS property.
// 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)에 따라 약간 달라질 수 있습니다.
To style the button you can use our type-specific theme functions: flat-button-theme, outlined-button-theme, contained-button-theme, and fab-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';
Next, create a new theme that extends the type-specific theme function for the type of button you are styling. In this example, we will use the contained-button-theme function and pass values to the $foreground and the $background parameters, along with their respective hover and active parameters.
다음 마크업을 고려하면:
<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,
);
Take a look at the contained-button-theme section for a complete list of available parameters for styling the contained-type buttons.
마지막으로 애플리케이션에 사용자 지정 테마를 포함 합니다.
.my-contained-btn {
@include css-vars($custom-contained-theme);
}
타입별 테마 기능 덕분에 버튼 스타일링이 훨씬 쉬워졌습니다.
For contained-button-theme and fab-button-theme functions, you only need to provide a color value to the $background parameter. All other button state and text colors (if they are not provided) will then be automatically generated and applied based on that value.
The text color is determined by the newly added adaptive-contrast function, which calculates whether black or white provides better contrast against the supplied background color.
For flat-button-theme and outlined-button-theme functions, the button state colors are also automatically generated and applied, but they are derived from the supplied $foreground parameter instead of $background.
In the sample below, you can see how using the button component with customized CSS variables allows you to create a design that visually resembles the button used in the Ant design system.
Note
이 샘플에서는 Bootstrap Light 스키마를 사용합니다.
Styling with Tailwind
저희 맞춤형 Tailwind 유틸리티 클래스를 사용해 스타일button 링할 수 있습니다. 먼저 Tailwind를 꼭 설정 하세요.
전역 스타일시트의 순풍 가져오기와 함께 다음과 같이 원하는 테마 유틸리티를 적용할 수 있습니다.
@import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';
유틸리티 파일에는 테마 변형 두 가지light가dark 모두 포함되어 있습니다.
- 라이트 테마에는 클래스를 사용
light-*하세요. - 어두운 테마에는 클래스를 사용
dark-*하세요. - Append the component name after the prefix. Because the button has types, the classes are used like so, e.g.,
light-contained-button,light-flat-buttondark-outlined-button,dark-fab-button, etc.
이 클래스들이 적용되면 동적 테마 계산이 가능합니다. 그 다음에는 생성된 CSS 변수를 무arbitrary properties 시할 수 있습니다. 콜론 다음에는 유효한 CSS 색상 형식(HEX, CSS 변수, RGB 등)을 입력하세요.
You can find the full list of properties in the button-theme which reflect differently in the different variants, the primary property for the flat and outlined buttons is $foreground and for the contained and fab buttons is $background. The syntax is as follows:
<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
You can change the button height either by using the --size variable, targeting the button directly:
button {
--size: 50px;
}
Or you can use the universal --igx-button-size variable to target all instances:
<div class="my-app">
<button igxButton="raised"></button>
</div>
.my-app {
--igx-button-size: 50px;
}
You can also use one of the predefined sizes, assigning it to the --ig-size variable. The available values for --ig-size are --ig-size-small, --ig-size-medium, and --ig-size-large:
button {
--ig-size: var(--ig-size-large);
}
크기 문서에서 자세히 알아보세요.
API References
Additional Resources
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.
GitHub