Angular 아이콘 버튼 개요

    Ignite UI for Angular Icon Button 지시문은 모든 아이콘을 완전한 기능의 버튼으로 바꾸기 위한 것입니다. 세 가지 유형이 igxIconButton 있습니다 - flat, outlined 및 contained(기본 유형)입니다.

    Angular 아이콘 버튼 예제

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.

    Ignite UI for Angular 아이콘 버튼 시작하기

    Ignite UI for Angular Icon Button 지시문을 시작하려면 먼저 Ignite UI for Angular를 설치해야 합니다. 기존 Angular 응용 프로그램에서 다음 명령을 입력합니다.

    ng add igniteui-angular
cmd

    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 {}
typescript

    이제 Ignite UI for Angular Icon Button 지시문을 가져왔으므로 요소에 지시 igxIconButton 문을 사용할 수 있습니다.

    Angular 아이콘 버튼 유형

    플랫 아이콘 버튼

    ​igxIconButton 지시문을 사용하여 구성 요소 템플릿에 간단한 플랫 아이콘 단추를 추가합니다.

    <button igxIconButton="flat">
    <igx-icon>edit</igx-icon>
</button>
html

    포함된 아이콘 버튼

    포함된 아이콘 단추를 만들려면 속성 값을 변경하기만 하면 됩니다 igxIconButton. 유형을 선택하지 않으면 기본적으로 로 설정됩니다 contained.

    <button igxIconButton>
    <igx-icon>favorite</igx-icon>
</button>
html

    윤곽선 아이콘 버튼

    유사하게 윤곽선 유형으로 전환할 수 있습니다.

    <button igxIconButton="outlined">
    <igx-icon>more_vert</igx-icon>
</button>
html

    예

    비활성화된 아이콘 버튼

    아이콘 단추를 사용하지 않으려면 속성을 사용할 disabled 수 있습니다. 이 샘플에서는 지시문과 함께 다른 패밀리의 아이콘을 사용하는 방법도 보여 줍니다. igxIconButton​

    <button igxIconButton="flat" disabled>
    <igx-icon family="fa" name="fa-home"></igx-icon>
</button>
html

    SVG 아이콘

    재료 아이콘 외에도 이 지시문은 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');
}
typescript
    <button igxIconButton>
    <igx-icon family="weather-icons" name="rain"></igx-icon>
</button>
html

    크기

    사용자는 사용자 지정 CSS 속성을 사용하여--ig-size 미리 정의된 igxIconButton 세 가지 크기 중 하나를 선택할 수 있습니다. 기본적으로 구성 요소의 크기는 중간으로 설정됩니다.

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    위의 샘플에서 볼 수 있듯이 지시문을 사용하여 igxIconButton 스타일이 지정된 아이콘 버튼과 같은 span​ ​div 요소를 변환할 수도 Ignite UI for Angular.

    App Builder | CTA 배너

    아이콘 버튼 스타일링

    가장 간단한 접근 방식에 따라 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;
}
scss

    모든 유형의 아이콘 버튼의 스타일을 지정하는 데 사용할 수 있는 매개변수의 전체 목록은 섹션을 살펴보 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,
);
scss

    이렇게 하면 호버, 포커스 및 활성과 같은 다양한 상태에 대한 적절한 전경색 및 배경색을 포함하여 완전한 테마 contained icon button가 생성됩니다.

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    API 참조

    추가 리소스

    우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.