크기

크기 구성은 많은 양의 데이터를 시각적으로 표현하는 것을 크게 향상시킬 수 있습니다. 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

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

크기