크기

크기 구성은 많은 양의 데이터에 대한 시각적 표현을 크게 향상시킬 수 있습니다. Ignite UI for Angular 에서는 사전 정의된 옵션 세트를 제공합니다.

큰
보통
작다

커스텀 CSS 속성을 사용하면--ig-size 애플리케이션이나 컴포넌트 수준에서 크기를 설정할 수 있습니다.

Angular Size Example

Note

자신의 프로젝트에서 Ignite UI for Angular 구성 요소를 사용하려면 필요한 모든 종속성을 구성하고 프로젝트를 적절하게 설정했는지 확인합니다. 설치 항목에서 이 작업을 수행하는 방법을 알아볼 수 있습니다.

Usage

애플리케이션/구성 요소 수준에서 크기 설정

크기를 설정하려면 CSS 사용자 지정 속성을 사용--ig-size 하세요. 앱에서 모든 컴포넌트의 크기를 바디 요소에 앞서 언급한 속성을 설정하면 됩니다.

의 사용 가능한 값--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)
);

이 수학적 접근법은clamp()min()max()calc() 현재 설정에 따라--ig-size 구성 요소들이 자동으로 크기 값을 전환할 수 있게 합니다.

API References

Sizing and Spacing Functions

Additional Resources

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