크기

크기 구성은 많은 양의 데이터에 대한 시각적 표현을 크게 향상시킬 수 있습니다. 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);
}

Understanding Size with CSS Custom Properties

Ignite UI의 크기 조정 시스템은 구성 요소 크기와 간격을 자동으로 조정하는 일련의 CSS 사용자 정의 속성을 통해 작동합니다. 속성을 변경--ig-size 하면 구성 요소가 자동으로 이 변경 사항을 감지하고 적절한 크기 조정 값을 적용합니다.

Size Detection Variables

구성 요소는 여러 CSS 사용자 정의 속성을 사용하여 크기 변경을 감지하고 응답합니다.

--component-size- 전역--ig-size을 숫자 값에 매핑합니다(1=소형, 2=중간, 3=대형).
--is-small- 구성 요소가 작은 경우 1로 설정하고, 그렇지 않으면 0으로 설정합니다.
--is-medium- 구성 요소가 중간 크기인 경우 1로 설정하고, 그렇지 않으면 0으로 설정합니다.
--is-large- 구성 요소가 큰 경우 1로 설정하고, 그렇지 않으면 0으로 설정합니다.

이러한 변수는 수학적 CSS 표현식을 사용하여 자동으로 계산되며 수정될 때마다--ig-size 변경됩니다.

Size Constants

테마 시스템은 세 가지 크기 상수를 정의합니다.

--ig-size-small (값: 1)
--ig-size-medium (값: 2)
--ig-size-large (값: 3).

Incorporating Size in Your Own Components

Ignite UI의 Sass 유틸리티를 사용하여 사용자 정의 구성 요소가 크기 변경에 응답하도록 만들 수 있습니다. 이러한 유틸리티는 백그라운드에서 필요한 CSS 사용자 정의 속성과 수학 표현식을 생성합니다.

Using the Sizable Mixin and Function

전역 크기 설정에 응답하는 구성 요소를 만드는 방법은 다음과 같습니다.

<div class="my-responsive-element"></div>

@use "igniteui-angular/theming" as *;

.my-responsive-element {
    // The sizable mixin sets up size detection CSS custom properties
    @include sizable();

    // Connect to the global size system
    --component-size: var(--ig-size, var(--ig-size-large));

    // Use the sizable function for responsive sizing
    --size: #{sizable(10px, 20px, 30px)};
    width: var(--size);
    height: var(--size);
}

How the Sizable System Works Behind the Scenes

사용하면 @include sizable() 현재 구성 요소 크기를 감지하는 CSS 사용자 정의 속성이 생성됩니다.

.my-responsive-element {
    --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);
    --is-medium: min(
        clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),
        clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)
    );
    --is-small: clamp(0, var(--ig-size-medium, 2) - var(--component-size, 1), 1);
}

이 함수는 sizable(10px, 20px, 30px) 적절한 값을 자동으로 선택하는 CSS 표현식을 생성합니다.

--size: max(
    calc(var(--is-large, 1) * 30px),
    calc(var(--is-medium, 1) * 20px), 
    calc(var(--is-small, 1) * 10px)
);

, min(),, max() 및 calc() 함수를 clamp() 사용하는 이 수학적 접근 방식을 사용하면 구성 요소가 현재--ig-size 설정에 따라 크기 값 간에 자동으로 전환할 수 있습니다.

API References

Sizing and Spacing Functions

Additional Resources

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