크기(디스플레이 밀도)
크기(표시 밀도) 구성을 통해 대용량 데이터의 시각적 표현을 크게 향상시킬 수 있습니다. Ignite UI for Angular 에서는 대형(편안함), 중간(아늑함), 소형(작음)의 사전 정의된 옵션 세트를 제공합니다.
--ig-size 사용자 정의 CSS 속성을 사용하면 애플리케이션 또는 구성 요소 수준에서 크기를 구성할 수 있습니다.
Angular Size Example
Note
자신의 프로젝트에서 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);
}
구성요소 수준에서 크기를 설정하려면 요소 선택기를 대상으로 지정하세요. 예를 들어, 입력 그룹의 크기를 small로 설정하려면 다음을 수행할 수 있습니다.
igx-input-group {
--ig-size: var(--ig-size-small);
}
Incorporating size in your own components and layouts
Ignite UI for Angular--ig-size CSS 속성의 변경에 반응하는 레이아웃을 구현할 수 있는 몇 가지 Sass 함수와 믹스인을 노출합니다.
다음은--ig-size 값에 따라 요소의 너비와 높이를 변경하는 방법에 대한 예입니다.
<div class="my-elem"></div>
@use "igniteui-angular/theming" as *;
.my-elem {
// Make the element sizable
@include sizable();
// Define the default size of the element and hook it to the `--ig-size` property
--component-size: var(--ig-size, var(--ig-size-large));
// Define sizes for small (10px), medium (20px), and large (30px)
--size: #{sizable(10px, 20px, 30px)};
width: var(--size);
height: var(--size);
}
이제--ig-size 값이 변경될 때마다.my-elem 크기가 변경됩니다.
API References
Sizing and Spacing Functions
Additional Resources
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.
GitHub