Angular 아이콘 버튼 개요
Ignite UI for Angular 아이콘 버튼 지시는 어떤 아이콘을 완전한 기능용 버튼으로 바꾸도록 설계되었습니다. 이 카드는igxIconButton 평면, 외곽선, 그리고 기본 형태인 '포함' 세 가지 유형이 있습니다.
Angular Icon Button Example
Getting Started with Ignite UI for Angular Icon Button
Ignite UI for Angular Icon Button 지시문을 시작하려면 먼저 Ignite UI for Angular를 설치해야 합니다. 기존 Angular 응용 프로그램에서 다음 명령을 입력합니다.
ng add igniteui-angular
Ignite UI for Angular에 대한 전체 소개는 시작 항목을 참조하십시오.
다음 단계는 독립 실행형 의존IgxIconButtonDirective 성으로 가져오는 것입니다:
// home.component.ts
...
import { IgxIconButtonDirective } from 'igniteui-angular/directives';
// import { IgxIconButtonDirective } from '@infragistics/igniteui-angular'; for licensed package
@Component({
selector: 'app-home',
template: `
<button igxIconButton="outlined">
<igx-icon>home</igx-icon>
</button>`,
styleUrls: ['home.component.scss'],
standalone: true,
imports: [IgxIconButtonDirective]
})
export class HomeComponent {}
이제 Ignite UI for Angular 아이콘 버튼 지시를 가져왔으니, 요소에 대한 지시를 사용할igxIconButton 수 있습니다.
Angular Icon Button Types
Flat Icon Button
컴포넌트 템플릿에 간단한 평면 아이콘 버튼을 추가하는 지침을 사용igxIconButton 하세요:
<button igxIconButton="flat">
<igx-icon>edit</igx-icon>
</button>
포함된 아이콘 버튼
포함된 아이콘 버튼을 생성하려면 속성의igxIconButton 값을 변경하기만 하면 됩니다. 타입을 선택하지 않으면 기본적으로 그 타입도 자동으로 설정contained 됩니다.
<button igxIconButton>
<igx-icon>favorite</igx-icon>
</button>
윤곽선 아이콘 버튼
유사하게 윤곽선 유형으로 전환할 수 있습니다.
<button igxIconButton="outlined">
<igx-icon>more_vert</igx-icon>
</button>
Examples
Disabled Icon Button
아이콘 버튼을 비활성화하고 싶으면 이disabled 속성을 사용할 수 있습니다. 이 샘플에서는 다음과 같은 지침과 함께igxIconButton 서로 다른 계열의 아이콘을 사용하는 방법도 보여줍니다:
<button igxIconButton="flat" disabled>
<igx-icon family="fa" name="fa-home"></igx-icon>
</button>
SVG Icons
재질 아이콘 외에도 이 지침은igxIconButton SVG 이미지를 아이콘으로 사용할 수 있도록 지원합니다. 이를 위해서는 먼저 의존성을 주입IgxIconService 한 후 캐시에 SVG 파일을 가져오는 메서드를 사용해야addSvgIcon 합니다. 자세한 내용은 아이콘 주제의 SVG 섹션을 참고하시기 바랍니다.
constructor(private _iconService: IgxIconService) { }
public ngOnInit() {
// register custom SVG icon
this._iconService.addSvgIcon('rain', 'assets/images/card/icons/rain.svg', 'weather-icons');
}
<button igxIconButton>
<igx-icon family="weather-icons" name="rain"></igx-icon>
</button>
크기
사용자는 사용자 정의된 세 가지 크기igxIconButton 중 하나를 사용자 정의 CSS 속성을 사용하여--ig-size 선택할 수 있습니다. 기본적으로 컴포넌트 크기는 중간 크기로 설정되어 있습니다.
위 샘플에서 볼 수 있듯이, 이 디렉티브를 사용igxIconButton 해 요소들을 Ignite UI for Angular 스타일 아이콘 버튼으로 변환spandiv 할 수도 있습니다.
Icon Button Styling
Icon Button Theme Property Map
주요 속성을 수정하면 관련된 모든 종속 속성이 자동으로 업데이트됩니다:
Flat Icon Button
| 기본 속성 | 종속 속성 | 설명 |
|---|---|---|
$foreground | $hover 전경 | 아이콘 색상을 떠올렸습니다 |
| $focus 전경 | 집중 아이콘 색상 | |
| $focus-호버-포경 | 포커스 + 호버 아이콘 색상 | |
| $active 전경 | 활성 아이콘 색상 | |
| $hover 배경 | 호버에 대한 배경 | |
| $focus 배경 | 포커스에 대한 배경 | |
| $focus-호버-배경 | 포커스 + 호버에 대한 배경 | |
| $active 배경 | 액티브 배경 |
포함된 아이콘 버튼
| 기본 속성 | 종속 속성 | 설명 |
|---|---|---|
$background | $foreground | 아이콘 색상 |
| $hover 배경 | 호버에 대한 배경 | |
| $focus 배경 | 포커스에 대한 배경 | |
| $focus 전경 | 집중 아이콘 색상 | |
| $focus-호버-배경 | 포커스 + 호버에 대한 배경 | |
| $active 배경 | 액티브 배경 | |
| $hover 전경 | 아이콘 색상을 떠올렸습니다 | |
| $focus-호버-포경 | 포커스 + 호버 아이콘 색상 | |
| $active 전경 | 활성 아이콘 색상 | |
| $shadow색 | 초점 위의 그림자 | |
| $focus-테두리 색상 | 초점 테두리 색상 | |
| $disabled 배경 | 장애인 배경 | |
| $disabled 전경 | 비활성화된 아이콘 색상 |
윤곽선 아이콘 버튼
| 기본 속성 | 종속 속성 | 설명 |
|---|---|---|
$foreground | $hover 전경 | 아이콘 색상을 떠올렸습니다 |
| $focus 전경 | 집중 아이콘 색상 | |
| $focus-호버-포경 | 포커스 + 호버 아이콘 색상 | |
| $active 전경 | 활성 아이콘 색상 | |
| $hover 배경 | 호버에 대한 배경 | |
| $focus 배경 | 포커스에 대한 배경 | |
| $focus-호버-배경 | 포커스 + 호버에 대한 배경 | |
| $active 배경 | 액티브 배경 | |
| $border색 | 기본 테두리 색상 | |
| $focus-테두리 색상 | 초점 테두리 색상 |
Flat Icon Button
| 기본 속성 | 종속 속성 | 설명 |
|---|---|---|
$foreground | $hover 전경 | 호버 시 아이콘 색상 |
| $focus 전경 | 초점 시 아이콘 색상 | |
| $focus-호버-포경 | 초점을 맞추고 마우스를 올렸을 때 아이콘 색상 | |
| $active 전경 | 아이콘 색상 활성화 시 | |
| $hover 배경 | 호버 상태에서의 배경색 | |
| $focus 배경 | 초점 위의 배경색 | |
| $focus-호버-배경 | 초점과 호버 시 배경색 | |
| $active 배경 | 활성화 시 배경색 |
포함된 아이콘 버튼
| 기본 속성 | 종속 속성 | 설명 |
|---|---|---|
$background | $foreground | 아이콘 색상 |
| $hover 배경 | 호버 상태에서의 배경색 | |
| $focus 배경 | 초점 위의 배경색 | |
| $focus 전경 | 초점 시 아이콘 색상 | |
| $focus-호버-배경 | 초점과 호버 시 배경색 | |
| $active 배경 | 활성화 시 배경색 | |
| $hover 전경 | 호버 시 아이콘 색상 | |
| $focus-호버-포경 | 초점을 맞추고 마우스를 올렸을 때 아이콘 색상 | |
| $active 전경 | 아이콘 색상 활성화 시 | |
| $shadow색 | 초점 시 그림자 색상 | |
| $focus-테두리 색상 | 초점 맞춘 테두리 색상 | |
| $disabled 배경 | 비활성화 시 배경색 | |
| $disabled 전경 | 비활성화 시 아이콘 색상 |
윤곽선 아이콘 버튼
| 기본 속성 | 종속 속성 | 설명 |
|---|---|---|
$foreground | $hover 전경 | 호버 시 아이콘 색상 |
| $focus 전경 | 초점 시 아이콘 색상 | |
| $focus-호버-포경 | 초점을 맞추고 마우스를 올렸을 때 아이콘 색상 | |
| $active 전경 | 아이콘 색상 활성화 시 | |
| $hover 배경 | 호버 상태에서의 배경색 | |
| $focus 배경 | 초점 위의 배경색 | |
| $focus-호버-배경 | 초점과 호버 시 배경색 | |
| $active 배경 | 활성화 시 배경색 | |
| $border색 | Border color | |
| $focus-테두리 색상 | 초점 맞춘 테두리 색상 |
Flat Icon Button
| 기본 속성 | 종속 속성 | 설명 |
|---|---|---|
$foreground | $hover 전경 | 마우스를 올렸을 때 아이콘 색상 |
| $focus 전경 | 초점 시 아이콘 색상 | |
| $focus-호버-포경 | 초점을 맞추고 마우스를 올렸을 때 아이콘 색상 | |
| $active 전경 | 아이콘 색상 활성화 시 | |
| $disabled 전경 | 비활성화 시 아이콘 색상 | |
| $shadow색 | 아이콘 버튼의 그림자 색상 |
포함된 아이콘 버튼
| 기본 속성 | 종속 속성 | 설명 |
|---|---|---|
$background | $foreground | 아이콘 색상 |
| $hover 배경 | 호버 상태에서의 배경색 | |
| $focus 배경 | 초점 위의 배경색 | |
| $focus 전경 | 초점 시 아이콘 색상 | |
| $focus-호버-배경 | 초점과 호버 시 배경색 | |
| $active 배경 | 활성화 시 배경색 | |
| $hover 전경 | 호버 시 아이콘 색상 | |
| $focus-호버-포경 | 초점을 맞추고 마우스를 올렸을 때 아이콘 색상 | |
| $active 전경 | 아이콘 색상 활성화 시 | |
| $shadow색 | 그림자 색상 | |
| $focus-테두리 색상 | 초점 맞춘 테두리 색상 | |
| $disabled 배경 | 비활성화 시 배경색 | |
| $disabled 전경 | 비활성화 시 아이콘 색상 |
윤곽선 아이콘 버튼
| 기본 속성 | 종속 속성 | 설명 |
|---|---|---|
$foreground | $hover 전경 | 호버 시 아이콘 색상 |
| $focus 전경 | 초점 시 아이콘 색상 | |
| $focus-호버-포경 | 초점을 맞추고 마우스를 올렸을 때 아이콘 색상 | |
| $active 전경 | 아이콘 색상 활성화 시 | |
| $hover 배경 | 호버 상태에서의 배경색 | |
| $focus 배경 | 초점 위의 배경색 | |
| $focus-호버-배경 | 초점과 호버 시 배경색 | |
| $active 배경 | 활성화 시 배경색 | |
| $border색 | Border color | |
| $focus-테두리 색상 | 초점 맞춘 테두리 색상 | |
| $shadow색 | 그림자 색상 | |
| $disabled 전경 | 비활성화 시 아이콘 색상 | |
| $disabled-테두리 색상 | 아이콘 버튼의 테두리가 비활성화되었을 때 |
Flat Icon Button
| 기본 속성 | 종속 속성 | 설명 |
|---|---|---|
$foreground | $hover 전경 | 호버 시 아이콘 색상 |
| $focus 전경 | 초점 시 아이콘 색상 | |
| $focus-호버-포경 | 초점을 맞추고 마우스를 올렸을 때 아이콘 색상 | |
| $active 전경 | 아이콘 색상 활성화 시 | |
| $disabled 전경 | 비활성화 시 아이콘 색상 | |
| $hover 배경 | 호버 상태에서의 배경색 | |
| $focus 배경 | 초점 위의 배경색 | |
| $focus-호버-배경 | 초점과 호버 시 배경색 | |
| $active 배경 | 활성화 시 배경색 | |
| $focus-테두리 색상 | 초점 맞춘 테두리 색상 |
포함된 아이콘 버튼
| 기본 속성 | 종속 속성 | 설명 |
|---|---|---|
$background | $foreground | 아이콘 색상 |
| $hover 배경 | 호버 상태에서의 배경색 | |
| $focus 배경 | 초점 위의 배경색 | |
| $focus 전경 | 초점 시 아이콘 색상 | |
| $focus-호버-배경 | 초점과 호버 시 배경색 | |
| $active 배경 | 활성화 시 배경색 | |
| $hover 전경 | 호버 시 아이콘 색상 | |
| $focus-호버-포경 | 초점을 맞추고 마우스를 올렸을 때 아이콘 색상 | |
| $active 전경 | 아이콘 색상 활성화 시 | |
| $shadow색 | 그림자 색상 | |
| $focus-테두리 색상 | 초점 맞춘 테두리 색상 | |
| $disabled 배경 | 비활성화 시 배경색 | |
| $disabled 전경 | 비활성화 시 아이콘 색상 |
윤곽선 아이콘 버튼
| 기본 속성 | 종속 속성 | 설명 |
|---|---|---|
$foreground | $hover 전경 | 호버 시 아이콘 색상 |
| $focus 전경 | 초점 시 아이콘 색상 | |
| $focus-호버-포경 | 초점을 맞추고 마우스를 올렸을 때 아이콘 색상 | |
| $active 전경 | 아이콘 색상 활성화 시 | |
| $hover 배경 | 호버 상태에서의 배경색 | |
| $border색 | Border color | |
| $focus-테두리 색상 | 초점 맞춘 테두리 색상 |
가장 간단한 접근 방식에 따라 CSS 변수를 사용하여 아이콘 버튼의 모양을 사용자 지정합니다.
[igxIconButton="contained"] {
--background: #011627;
--foreground: #fefefe;
--hover-foreground: #011627dc;
--hover-background: #ecaa53;
--focus-foreground: #011627dc;
--focus-background: #ecaa53;
--focus-border-color: #0116276c;
--active-foreground: #011627dc;
--active-background: #ecaa53;
}
아이콘 버튼 스타일링에 사용할 수 있는 전체 매개변수 목록은 섹션을icon-button-theme 참고하세요.
특정 유형의 버튼만 스타일링할 수도 있습니다 -flat, 또는outlinedcontained 이를 위해 새로운 유형별 테마 함수를 사용할 수 있습니다:flat-icon-button-theme,outlined-icon-button-theme 그리고contained-icon-button-theme
다음은 SCSS에서 커스텀 테마를 정의하기 위해 이 함수를 사용하는contained-icon-button-theme 예시입니다:
@use "igniteui-angular/theming" as *;
$custom-contained: contained-icon-button-theme(
$background: #ECAA53,
);
이렇게 하면 호버, 초점, 활 등 다양한 상태에 맞는 적절한 전경과 배경 색상을 포함한 완전한 테마가contained icon button 생성됩니다.
Styling with Tailwind
아이콘 버튼을 저희 맞춤형 Tailwind 유틸리티 클래스로 스타일링할 수 있습니다. 먼저 Tailwind를 꼭 설정 하세요.
전역 스타일시트의 순풍 가져오기와 함께 다음과 같이 원하는 테마 유틸리티를 적용할 수 있습니다.
@import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';
유틸리티 파일에는 테마 변형 두 가지light가dark 모두 포함되어 있습니다.
- 라이트 테마에는 클래스를 사용
light-*하세요. - 어두운 테마에는 클래스를 사용
dark-*하세요. - 접두사 뒤에 컴포넌트 이름을 덧붙이세요,
light-icon-buttondark-icon-button예: .
이 클래스들이 적용되면 동적 테마 계산이 가능합니다. 그 다음에는 생성된 CSS 변수를 무arbitrary properties 시할 수 있습니다. 콜론 다음에는 유효한 CSS 색상 형식(HEX, CSS 변수, RGB 등)을 입력하세요.
아이콘-버튼-테마에서 전체 속성 목록을 찾을 수 있습니다. 문법은 다음과 같습니다:
<button igxIconButton class="!light-icon-button ![--icon-color:#FF4E00]">
<igx-icon>edit</igx-icon>
</button>
Note
느낌표(!)는 유틸리티 클래스가 우선순위가 되도록 보장하기 위해 필요합니다. Tailwind는 레이어에 스타일을 적용하는데, 이 스타일을 중요하게 표시하지 않으면 컴포넌트의 기본 테마에 의해 덮어쓰여집니다.
마지막에 아이콘 버튼은 다음과 같이 보여야 합니다:
API References
Additional Resources
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.
GitHub