크기

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

큰
보통
작다

Using the --ig-size custom CSS property, you can configure the size on an application or a component level.

Angular Size Example

Note

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

Usage

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

To set the size, use the --ig-size CSS custom property. You can set the size for all components in your app by setting the aforementioned property on the body element.

The available values for --ig-size are --ig-size-small, --ig-size-medium, and --ig-size-large.

body {
    --ig-size: var(--ig-size-small);
}

To set the size on a component level, target the element selector. For instance, to set the size of the input group to small, you can do:

igx-input-group {
    --ig-size: var(--ig-size-small);
}

Understanding Size with CSS Custom Properties

The sizing system in Ignite UI works through a set of CSS custom properties that automatically adjust component dimensions and spacing. When you change the --ig-size property, components automatically detect this change and apply the appropriate sizing values.

Size Detection Variables

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

--component-size - Maps the global --ig-size to a numeric value (1=small, 2=medium, 3=large)
--is-small - Set to 1 when component is small-sized, 0 otherwise
--is-medium - Set to 1 when component is medium-sized, 0 otherwise.
--is-large- 부품이 클 때는 1, 그렇지 않을 때는 0으로 설정합니다.

These variables are automatically calculated using mathematical CSS expressions and change whenever --ig-size is modified.

Size Constants

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

--ig-size-small (value: 1)
--ig-size-medium (value: 2)
--ig-size-large (value: 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

When you use @include sizable(), it generates CSS custom properties that detect the current component size:

.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);
}

The sizable(10px, 20px, 30px) function generates a CSS expression that automatically selects the appropriate value:

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

This mathematical approach using clamp(), min(), max(), and calc() functions allows components to automatically switch between size values based on the current --ig-size setting.

API References

Sizing and Spacing Functions

Additional Resources

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