크기
크기 구성은 많은 양의 데이터에 대한 시각적 표현을 크게 향상시킬 수 있습니다. Ignite UI for Angular 에서는 사전 정의된 옵션 세트를 제공합니다.
--ig-size
사용자 정의 CSS 속성을 사용하면 애플리케이션 또는 구성 요소 수준에서 크기를 구성할 수 있습니다.
Angular 크기 예
import { Component, HostBinding, OnInit } from '@angular/core' ;
import { IgxButtonGroupComponent, IgxInputGroupComponent, IgxInputDirective, IgxLabelDirective, IgxPrefixDirective, IgxSuffixDirective, IgxIconComponent, IgxHintDirective } from 'igniteui-angular' ;
import { FormsModule } from '@angular/forms' ;
@Component ({
selector : 'app-display-density' ,
styleUrls : ['./display-density.component.scss' ],
templateUrl : './display-density.component.html' ,
imports : [IgxButtonGroupComponent, IgxInputGroupComponent, FormsModule, IgxInputDirective, IgxLabelDirective, IgxPrefixDirective, IgxSuffixDirective, IgxIconComponent, IgxHintDirective]
})
export class DisplayDensityComponent implements OnInit {
public sizes: any [];
public size = 'large' ;
public user: any ;
public ngOnInit ( ) {
this .sizes = [
{
label : 'small' ,
selected : this .size === 'small' ,
togglable : true
},
{
label : 'medium' ,
selected : this .size === 'medium' ,
togglable : true
},
{
label : 'large' ,
selected : this .size === 'large' ,
togglable : true
}
];
this .user = {
firstName : 'John' ,
lastName : 'Smith' ,
phone : 888123456
};
}
@HostBinding ('style.--ig-size' )
protected get sizeStyle () {
return `var(--ig-size-${this .size} )` ;
}
public selectSize (eventArgs: any ) {
this .size = this .sizes[eventArgs.index].label;
}
}
ts コピー <div class ="density-chooser" >
<igx-buttongroup [values ]="sizes" (selected )="selectSize($event)" > </igx-buttongroup >
</div >
<igx-input-group >
<input igxInput name ="firstName" type ="text" [(ngModel )]="user.firstName" />
<label igxLabel for ="firstName" > First Name</label >
</igx-input-group >
<igx-input-group >
<input igxInput name ="lastName" type ="text" [(ngModel )]="user.lastName" required />
<label igxLabel for ="lastName" > Last Name</label >
</igx-input-group >
<igx-input-group >
<igx-prefix > +359</igx-prefix >
<label igxLabel for ="phone" > Phone</label >
<input type ="number" igxInput name ="phone" [(ngModel )]="user.phone" />
<igx-suffix >
<igx-icon > phone</igx-icon >
</igx-suffix >
<igx-hint position ="start" > Ex.: +359 888 123 456</igx-hint >
</igx-input-group >
html コピー :host {
display : block;
padding : 8px ;
}
.density-chooser {
margin-bottom : 16px ;
}
igx-buttongroup, igx-input -group {
display : block;
width : 500px ;
}
scss コピー
이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.
자신의 프로젝트에서 Ignite UI for Angular 구성 요소를 사용하려면 필요한 모든 종속성을 구성하고 프로젝트를 적절하게 설정했는지 확인합니다. 설치 항목에서 이 작업을 수행하는 방법을 알아볼 수 있습니다.
용법
애플리케이션/구성 요소 수준에서 크기 설정
크기를 설정하려면--ig-size
CSS 사용자 정의 속성을 사용하세요. 앞서 언급한 body 요소의 속성을 설정하여 앱의 모든 구성 요소 크기를 설정할 수 있습니다.
--ig-size
에 사용 가능한 값은--ig-size-small
,--ig-size-medium
및--ig-size-large
입니다.
body {
--ig-size: var (--ig-size-small);
}
css
구성요소 수준에서 크기를 설정하려면 요소 선택기를 대상으로 지정하세요. 예를 들어, 입력 그룹의 크기를 small
로 설정하려면 다음을 수행할 수 있습니다.
igx-input -group {
--ig-size: var (--ig-size-small);
}
css
자체 구성 요소 및 레이아웃에 크기 통합
Ignite UI for Angular는 CSS 속성의 변경에 반응하는 레이아웃을 구현할 수 있는 몇 가지 Sass 함수와 mixin을--ig-size
제공합니다.
다음은--ig-size
값에 따라 요소의 너비와 높이를 변경하는 방법에 대한 예입니다.
<div class ="my-elem" > </div >
html
@use "igniteui-angular/theming" as *;
.my-elem {
@include sizable();
--component-size: var(--ig-size, var(--ig-size-large));
--size: #{sizable(10px , 20px , 30px )};
width : var(--size);
height : var(--size);
}
scss
이제--ig-size
값이 변경될 때마다.my-elem
크기가 변경됩니다.
API 참조
크기 조정 및 간격 기능
추가 리소스
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.