Angular 아이콘 버튼 개요
The Ignite UI for Angular Icon Button directive is intended to turn any icon into a fully functional button. The igxIconButton comes in three types - flat, outlined, and contained which is the default one.
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에 대한 전체 소개는 시작 항목을 참조하십시오.
The next step is to import the IgxIconButtonDirective as a standalone dependency:
// 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 {}
Now that you have the Ignite UI for Angular Icon Button directive imported, you can start using the igxIconButton directive on elements.
Angular Icon Button Types
Flat Icon Button
Use the igxIconButton directive to add a simple flat icon button in your component template:
<button igxIconButton="flat">
<igx-icon>edit</igx-icon>
</button>
Contained Icon Button
All you have to do to create a contained icon button is to change the value of the igxIconButton property. Note that if you do not choose a type, by default it will also be set to 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
If you want to disable an icon button, you can use the disabled property. In this sample we also demonstrate how to use icons from different families with the igxIconButton directive:
<button igxIconButton="flat" disabled>
<igx-icon family="fa" name="fa-home"></igx-icon>
</button>
SVG Icons
In addition to material icons, the igxIconButton directive also supports usage of SVG images as icons. To do so, first we should inject the IgxIconService dependency and then use the addSvgIcon method to import the SVG file in cache. For further information, you can read the SVG section in the icon topic.
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>
크기
Users can choose one of the three predefined igxIconButton sizes by using the --ig-size custom CSS property. By default, the size of the component is set medium.
As you can see from the sample above, we can also use the igxIconButton directive to turn elements like span and div into Ignite UI for Angular styled icon buttons.
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;
}
Take a look at the icon-button-theme section for a complete list of available parameters for styling any type of icon button.
You can also choose to style only buttons of a specific type - flat, outlined or contained.
To do this, you can use the new type-specific theme functions: flat-icon-button-theme, outlined-icon-button-theme and contained-icon-button-theme
Here’s an example of using the contained-icon-button-theme function to define a custom theme in SCSS:
@use "igniteui-angular/theming" as *;
$custom-contained: contained-icon-button-theme(
$background: #ECAA53,
);
This will generate a fully themed contained icon button, including appropriate foreground and background colors for its various states like hover, focus, and active.
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';
유틸리티 파일에는 테마 변형 두 가지light가dark 모두 포함되어 있습니다.
- 라이트 테마에는 클래스를 사용
light-*하세요. - 어두운 테마에는 클래스를 사용
dark-*하세요. - 접두사 뒤에 컴포넌트 이름을 덧붙이세요,
light-icon-buttondark-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