Ignite UI for Angular Icon Button 지시문은 모든 아이콘을 완전한 기능의 버튼으로 바꾸기 위한 것입니다. 세 가지 유형이 igxIconButton
있습니다 - flat, outlined 및 contained(기본 유형)입니다.
import { Component } from '@angular/core' ;
import { IgxIconButtonDirective, IgxRippleDirective, IgxIconComponent } from 'igniteui-angular' ;
@Component ({
selector : 'app-icon-button-overview' ,
styleUrls : ['./icon-button-overview.component.scss' ],
templateUrl : './icon-button-overview.component.html' ,
imports : [IgxIconButtonDirective, IgxRippleDirective, IgxIconComponent]
})
export class IconButtonOverviewComponent { }
ts コピー <div class ="wrapper" >
<div class ="button-sample" >
<button igxIconButton ="flat" igxRipple >
<igx-icon > home</igx-icon >
</button >
</div >
<div class ="button-sample" >
<button igxIconButton ="contained" igxRipple >
<igx-icon > home</igx-icon >
</button >
</div >
<div class ="button-sample" >
<button igxIconButton ="outlined" igxRipple >
<igx-icon > home</igx-icon >
</button >
</div >
</div >
html コピー .wrapper {
display : flex;
flex-flow : row wrap;
}
.button-sample {
display : flex;
flex-flow : row wrap;
justify-content : center;
align-items : center;
flex : 1 0 30% ;
margin : 16px 0 ;
}
scss コピー
이 샘플이 마음에 드시나요? 전체 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
...
import { IgxIconButtonDirective } from 'igniteui-angular' ;
@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
문을 사용할 수 있습니다.
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 ( ) {
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
세 가지 크기 중 하나를 선택할 수 있습니다. 기본적으로 구성 요소의 크기는 중간으로 설정됩니다.
import { Component } from '@angular/core' ;
import { IgxIconButtonDirective, IgxRippleDirective, IgxIconComponent } from 'igniteui-angular' ;
@Component ({
selector : 'app-icon-button-size' ,
styleUrls : ['./icon-button-size.component.scss' ],
templateUrl : './icon-button-size.component.html' ,
imports : [IgxIconButtonDirective, IgxRippleDirective, IgxIconComponent]
})
export class IconButtonSizeComponent { }
ts コピー <div class ="wrapper" >
<div class ="button-sample" >
<span igxIconButton ="outlined" igxRipple class ="small" >
<igx-icon > person</igx-icon >
</span >
</div >
<div class ="button-sample" >
<div igxIconButton ="outlined" igxRipple class ="medium" >
<igx-icon > place</igx-icon >
</div >
</div >
<div class ="button-sample" >
<button igxIconButton ="outlined" igxRipple class ="large" >
<igx-icon > phone</igx-icon >
</button >
</div >
</div >
html コピー .wrapper {
display : flex;
flex-flow : row wrap;
}
.button-sample {
display : flex;
flex-flow : row wrap;
justify-content : center;
align-items : center;
flex : 1 0 30% ;
margin : 16px 0 ;
}
.large {
--ig-size: var(--ig-size-large);
}
.medium {
--ig-size: var(--ig-size-medium);
}
.small {
--ig-size: var(--ig-size-small);
}
scss コピー
위의 샘플에서 볼 수 있듯이 지시문을 사용하여 igxIconButton
스타일이 지정된 아이콘 버튼과 같은 span
div
요소를 변환할 수도 Ignite UI for Angular.
가장 간단한 접근 방식에 따라 CSS 변수를 사용하여 아이콘 버튼의 모양을 사용자 지정합니다.
[igxIconButton="contained" ] {
--background : #011627 ;
--foreground: #fefefe ;
--hover-foreground: #011627 dc;
--hover-background : #ecaa53 ;
--focus-foreground: #011627 dc;
--focus-background : #ecaa53 ;
--focus-border-color : #011627 6c;
--active-foreground: #011627 dc;
--active-background : #ecaa53 ;
}
scss
모든 유형의 아이콘 버튼의 스타일을 지정하는 데 사용할 수 있는 매개변수의 전체 목록은 섹션을 살펴보 icon-button-theme
십시오.
import { Component } from '@angular/core' ;
import { IgxIconButtonDirective, IgxRippleDirective, IgxIconComponent } from 'igniteui-angular' ;
@Component ({
selector : 'app-icon-button-styling' ,
styleUrls : ['./icon-button-styling.component.scss' ],
templateUrl : './icon-button-styling.component.html' ,
imports : [IgxIconButtonDirective, IgxRippleDirective, IgxIconComponent]
})
export class IconButtonStylingComponent { }
ts コピー <div class ="wrapper" >
<div class ="button-sample" >
<button igxIconButton ="flat" igxRipple >
<igx-icon > home</igx-icon >
</button >
</div >
<div class ="button-sample" >
<button igxIconButton ="contained" igxRipple >
<igx-icon > home</igx-icon >
</button >
</div >
<div class ="button-sample" >
<button igxIconButton ="outlined" igxRipple >
<igx-icon > home</igx-icon >
</button >
</div >
</div >
html コピー .wrapper {
display : flex;
flex-flow : row wrap;
}
.button-sample {
display : flex;
flex-flow : row wrap;
justify-content : center;
align-items : center;
flex : 1 0 30% ;
margin : 16px 0 ;
}
[igxIconButton="flat" ] {
--foreground: #011627 ;
--background : #FEFEFE ;
--hover-background : #ECAA53 ;
--focus-foreground: #011627 dc;
--focus-background : #ECAA53 ;
--active-foreground: #011627 dc;
--active-background : #ECAA53 ;
}
[igxIconButton="contained" ] {
--background : #011627 ;
--foreground: #FEFEFE ;
--hover-foreground: #011627 dc;
--hover-background : #ECAA53 ;
--focus-foreground: #011627 dc;
--focus-background : #ECAA53 ;
--focus-border-color : #011627 6c;
--active-foreground: #011627 dc;
--active-background : #ECAA53 ;
}
[igxIconButton="outlined" ] {
--foreground: #011627 ;
--background : #FEFEFE ;
--border-color : #011627 ;
--hover-foreground: #011627 dc;
--hover-background : #ECAA53 ;
--focus-foreground: #011627 dc;
--focus-background : #ECAA53 ;
--focus-border-color : #011627 6c;
--active-foreground: #011627 dc;
--active-background : #ECAA53 ;
}
scss コピー
API 참조
추가 리소스
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.