Angular 아이콘 버튼 개요
Ignite UI for Angular Icon Button 지시문은 모든 아이콘을 완전한 기능의 버튼으로 바꾸기 위한 것입니다. 세 가지 유형이 igxIconButton 있습니다 - flat, outlined 및 contained(기본 유형)입니다.
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';
// 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 Icon Button 지시문을 가져왔으므로 요소에 지시 igxIconButton 문을 사용할 수 있습니다.
Angular Icon Button Types
Flat Icon Button
igxIconButton 지시문을 사용하여 구성 요소 템플릿에 간단한 플랫 아이콘 단추를 추가합니다.
<button igxIconButton="flat">
<igx-icon>edit</igx-icon>
</button>
Contained Icon Button
포함된 아이콘 단추를 만들려면 속성 값을 변경하기만 하면 됩니다 igxIconButton. 유형을 선택하지 않으면 기본적으로 로 설정됩니다 contained.
<button igxIconButton>
<igx-icon>favorite</igx-icon>
</button>
Outlined 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 삽입한 다음 메서드를 사용하여 addSvgIcon 캐시에서 SVG 파일을 가져와야 합니다. 자세한 내용은 아이콘 항목의 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>
크기
사용자는 사용자 지정 CSS 속성을 사용하여--ig-size 미리 정의된 igxIconButton 세 가지 크기 중 하나를 선택할 수 있습니다. 기본적으로 구성 요소의 크기는 중간으로 설정됩니다.
위의 샘플에서 볼 수 있듯이 지시문을 사용하여 igxIconButton 스타일이 지정된 아이콘 버튼과 같은 span div 요소를 변환할 수도 Ignite UI for Angular.
Icon Button Styling
Icon Button Theme Property Map
주요 속성을 수정하면 관련된 모든 종속 속성이 자동으로 업데이트됩니다:
Flat Icon Button
| 기본 속성 | 종속 속성 | 설명 |
|---|---|---|
$foreground | $hover 전경 | Hovered icon color |
| $focus 전경 | Focused icon color | |
| $focus-호버-포경 | Focus + hover icon color | |
| $active 전경 | Active icon color | |
| $hover 배경 | Background on hover | |
| $focus 배경 | Background on focus | |
| $focus-호버-배경 | Background on focus + hover | |
| $active 배경 | Background on active |
Contained Icon Button
| 기본 속성 | 종속 속성 | 설명 |
|---|---|---|
$background | $foreground | Icon color |
| $hover 배경 | Background on hover | |
| $focus 배경 | Background on focus | |
| $focus 전경 | Focused icon color | |
| $focus-호버-배경 | Background on focus + hover | |
| $active 배경 | Background on active | |
| $hover 전경 | Hovered icon color | |
| $focus-호버-포경 | Focus + hover icon color | |
| $active 전경 | Active icon color | |
| $shadow색 | Shadow on focus | |
| $focus-테두리 색상 | 초점 테두리 색상 | |
| $disabled 배경 | Disabled background | |
| $disabled 전경 | 비활성화된 아이콘 색상 |
Outlined Icon Button
| 기본 속성 | 종속 속성 | 설명 |
|---|---|---|
$foreground | $hover 전경 | Hovered icon color |
| $focus 전경 | Focused icon color | |
| $focus-호버-포경 | Focus + hover icon color | |
| $active 전경 | Active icon color | |
| $hover 배경 | Background on hover | |
| $focus 배경 | Background on focus | |
| $focus-호버-배경 | Background on focus + hover | |
| $active 배경 | Background on active | |
| $border색 | Default border color | |
| $focus-테두리 색상 | 초점 테두리 색상 |
Flat Icon Button
| 기본 속성 | 종속 속성 | 설명 |
|---|---|---|
$foreground | $hover 전경 | 호버 시 아이콘 색상 |
| $focus 전경 | Icon color when focused | |
| $focus-호버-포경 | Icon color when focused and hovered | |
| $active 전경 | Icon color when active | |
| $hover 배경 | Background color on hover | |
| $focus 배경 | Background color on focus | |
| $focus-호버-배경 | Background color on focus and hover | |
| $active 배경 | Background color when active |
Contained Icon Button
| 기본 속성 | 종속 속성 | 설명 |
|---|---|---|
$background | $foreground | Icon color |
| $hover 배경 | Background color on hover | |
| $focus 배경 | Background color on focus | |
| $focus 전경 | Icon color when focused | |
| $focus-호버-배경 | Background color on focus and hover | |
| $active 배경 | Background color when active | |
| $hover 전경 | 호버 시 아이콘 색상 | |
| $focus-호버-포경 | Icon color when focused and hovered | |
| $active 전경 | Icon color when active | |
| $shadow색 | Shadow color on focus | |
| $focus-테두리 색상 | Border color on focus | |
| $disabled 배경 | Background color when disabled | |
| $disabled 전경 | Icon color when disabled |
Outlined Icon Button
| 기본 속성 | 종속 속성 | 설명 |
|---|---|---|
$foreground | $hover 전경 | 호버 시 아이콘 색상 |
| $focus 전경 | Icon color when focused | |
| $focus-호버-포경 | Icon color when focused and hovered | |
| $active 전경 | Icon color when active | |
| $hover 배경 | Background color on hover | |
| $focus 배경 | Background color on focus | |
| $focus-호버-배경 | Background color on focus and hover | |
| $active 배경 | Background color when active | |
| $border색 | Border color | |
| $focus-테두리 색상 | Border color on focus |
Flat Icon Button
| 기본 속성 | 종속 속성 | 설명 |
|---|---|---|
$foreground | $hover 전경 | Icon color when hovered |
| $focus 전경 | Icon color when focused | |
| $focus-호버-포경 | Icon color when focused and hovered | |
| $active 전경 | Icon color when active | |
| $disabled 전경 | Icon color when disabled | |
| $shadow색 | The shadow color of the icon button |
Contained Icon Button
| 기본 속성 | 종속 속성 | 설명 |
|---|---|---|
$background | $foreground | Icon color |
| $hover 배경 | Background color on hover | |
| $focus 배경 | Background color on focus | |
| $focus 전경 | Icon color when focused | |
| $focus-호버-배경 | Background color on focus and hover | |
| $active 배경 | Background color when active | |
| $hover 전경 | 호버 시 아이콘 색상 | |
| $focus-호버-포경 | Icon color when focused and hovered | |
| $active 전경 | Icon color when active | |
| $shadow색 | 그림자 색상 | |
| $focus-테두리 색상 | Border color on focus | |
| $disabled 배경 | Background color when disabled | |
| $disabled 전경 | Icon color when disabled |
Outlined Icon Button
| 기본 속성 | 종속 속성 | 설명 |
|---|---|---|
$foreground | $hover 전경 | 호버 시 아이콘 색상 |
| $focus 전경 | Icon color when focused | |
| $focus-호버-포경 | Icon color when focused and hovered | |
| $active 전경 | Icon color when active | |
| $hover 배경 | Background color on hover | |
| $focus 배경 | Background color on focus | |
| $focus-호버-배경 | Background color on focus and hover | |
| $active 배경 | Background color when active | |
| $border색 | Border color | |
| $focus-테두리 색상 | Border color on focus | |
| $shadow색 | 그림자 색상 | |
| $disabled 전경 | Icon color when disabled | |
| $disabled-테두리 색상 | The border of the icon button when disabled |
Flat Icon Button
| 기본 속성 | 종속 속성 | 설명 |
|---|---|---|
$foreground | $hover 전경 | 호버 시 아이콘 색상 |
| $focus 전경 | Icon color when focused | |
| $focus-호버-포경 | Icon color when focused and hovered | |
| $active 전경 | Icon color when active | |
| $disabled 전경 | Icon color when disabled | |
| $hover 배경 | Background color on hover | |
| $focus 배경 | Background color on focus | |
| $focus-호버-배경 | Background color on focus and hover | |
| $active 배경 | Background color when active | |
| $focus-테두리 색상 | Border color on focus |
Contained Icon Button
| 기본 속성 | 종속 속성 | 설명 |
|---|---|---|
$background | $foreground | Icon color |
| $hover 배경 | Background color on hover | |
| $focus 배경 | Background color on focus | |
| $focus 전경 | Icon color when focused | |
| $focus-호버-배경 | Background color on focus and hover | |
| $active 배경 | Background color when active | |
| $hover 전경 | 호버 시 아이콘 색상 | |
| $focus-호버-포경 | Icon color when focused and hovered | |
| $active 전경 | Icon color when active | |
| $shadow색 | 그림자 색상 | |
| $focus-테두리 색상 | Border color on focus | |
| $disabled 배경 | Background color when disabled | |
| $disabled 전경 | Icon color when disabled |
Outlined Icon Button
| 기본 속성 | 종속 속성 | 설명 |
|---|---|---|
$foreground | $hover 전경 | 호버 시 아이콘 색상 |
| $focus 전경 | Icon color when focused | |
| $focus-호버-포경 | Icon color when focused and hovered | |
| $active 전경 | Icon color when active | |
| $hover 배경 | Background color on hover | |
| $border색 | Border color | |
| $focus-테두리 색상 | Border color on 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 outlined 버튼만 스타일을 지정하도록 선택할 수도 있습니다 contained. 이를 위해 새로운 유형별 테마 함수를 사용할 수 있습니다. flat-icon-button-theme outlined-icon-button-theme contained-icon-button-theme
다음은 함수를 사용하여 contained-icon-button-theme SCSS에서 사용자 지정 테마를 정의하는 예입니다.
@use "igniteui-angular/theming" as *;
$custom-contained: contained-icon-button-theme(
$background: #ECAA53,
);
이렇게 하면 호버, 포커스 및 활성과 같은 다양한 상태에 대한 적절한 전경색 및 배경색을 포함하여 완전한 테마 contained icon button가 생성됩니다.
Styling with Tailwind
You can style the icon button using our custom Tailwind utility classes. Make sure to set up Tailwind first.
전역 스타일시트의 순풍 가져오기와 함께 다음과 같이 원하는 테마 유틸리티를 적용할 수 있습니다.
@import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';
유틸리티 파일에는 테마 변형이 dark 모두 light 포함되어 있습니다.
- 밝은 테마에 클래스를 사용합니다
light-*. - 어두운 테마에 대한 클래스를 사용합니다
dark-*. - Append the component name after the prefix, e.g.,
light-icon-button,dark-icon-button.
이러한 클래스가 적용되면 동적 테마 계산이 가능합니다. 여기에서 다음을 사용하여 생성된 CSS 변수를 재정의할 수 있습니다. arbitrary properties 콜론 뒤에 유효한 CSS 색상 형식(HEX, CSS 변수, RGB 등)을 제공합니다.
You can find the full list of properties in the icon-button-theme. The syntax is as follows:
<button igxIconButton class="!light-icon-button ![--icon-color:#FF4E00]">
<igx-icon>edit</igx-icon>
</button>
Note
느낌표(!)는 유틸리티 클래스가 우선하도록 하는 데 필요합니다. Tailwind는 레이어에 스타일을 적용하며, 이러한 스타일을 중요하게 표시하지 않으면 구성 요소의 기본 테마로 재정의됩니다.
At the end your icon buttons should look like this:
API References
Additional Resources
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.
GitHub