크기
Size configuration can significantly improve the visual representation of large amounts of data. In Ignite UI for Angular, we provide a pre-defined set of options:
--ig-size
사용자 정의 CSS 속성을 사용하면 애플리케이션 또는 구성 요소 수준에서 크기를 구성할 수 있습니다.
Angular Size Example
import { NgModule } from "@angular/core" ;
import { FormsModule } from "@angular/forms" ;
import { BrowserModule } from "@angular/platform-browser" ;
import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ;
import { AppComponent } from "./app.component" ;
import { DisplayDensityComponent } from "./display-density/display-density.component" ;
import {
IgxInputGroupModule,
IgxButtonGroupModule,
IgxIconModule
} from "igniteui-angular" ;
@NgModule ({
bootstrap : [AppComponent],
declarations : [
AppComponent,
DisplayDensityComponent
],
imports : [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
IgxInputGroupModule,
IgxButtonGroupModule,
IgxIconModule
],
providers : [],
schemas : []
})
export class AppModule {}
ts コピー import { Component, HostBinding, OnInit } from '@angular/core' ;
@Component ({
selector : 'app-display-density' ,
styleUrls : ['./display-density.component.scss' ],
templateUrl : './display-density.component.html'
})
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 コピー
Like this sample? Get access to our complete Ignite UI for Angular toolkit and start building your own apps in minutes. Download it for free.
자신의 프로젝트에서 Ignite UI for Angular 사용하려면 필요한 모든 종속성을 구성하고 프로젝트를 적절하게 설정했는지 확인하세요. 설치 항목에서 이를 수행하는 방법을 배울 수 있습니다.
Usage
애플리케이션/구성 요소 수준에서 크기 설정
크기를 설정하려면--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
Incorporating size in your own components and layouts
Ignite UI for Angular--ig-size
CSS 속성의 변경에 반응하는 레이아웃을 구현할 수 있는 몇 가지 Sass 함수와 믹스인을 노출합니다.
다음은--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 References
Sizing and Spacing Functions
Additional Resources
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.