Angular 아이콘 버튼 개요

    Ignite UI for Angular 아이콘 단추 지시문은 모든 아이콘을 완전한 기능의 단추로 전환하기 위한 것입니다. 플랫 igxIconButton, 아웃라인, 컨텐더의 세 가지 유형이 있으며 이것이 기본값입니다.

    Angular Icon Button Example

    Getting Started with Ignite UI for Angular Icon Button

    Ignite UI for Angular 아이콘 단추 지시문을 시작하려면 먼저 Ignite UI for Angular UI를 설치해야 합니다. 기존 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 Ignite UI for Angular 스타일 아이콘 버튼과 같은 span​ ​div 요소를 변환할 수도 있습니다.

    Angular Icon Button Styling

    가장 간단한 접근 방식에 따라 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 십시오.

    API References

    Additional Resources

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