Spacing

간격 구성은 많은 양의 데이터를 시각적으로 표현하는 것을 크게 향상시킬 수 있습니다. Ignite UI for Angular 에서는 패딩과 여백을 조정하기 위해 미리 정의된 옵션 세트를 제공합니다.

고정 값을 사용하는 대신 CSS 사용자 정의 속성을 사용하여 애플리케이션 또는 구성 요소 수준의 간격을 조정합니다.

How Spacing Works

Ignite UI for Angular 구성 요소 크기(소형, 중형, 대형)에 따라 동적으로 확장되는 정교한 간격 시스템을 제공합니다. 간격 시스템은 사용자 정의 CSS를 작성하지 않고도 전역 또는 구성 요소 수준에서 간격을 제어할 수 있는 CSS 사용자 정의 속성을 기반으로 구축되었습니다.

The Relationship Between Sizing and Spacing

Ignite UI의 간격 시스템은 구성 요소 크기 조정과 밀접하게 연관되어 있습니다. 구성 요소는 세 가지 크기를 가질 수 있습니다.

작음- 밀집된 레이아웃을 위한 컴팩트한 간격
Medium - Default balanced spacing.
터치 친화적인 인터페이스를 위한 넓은 간격

간격은 활성 크기에 따라 자동으로 조정되므로 애플리케이션 전체에서 일관된 시각적 계층 구조가 보장됩니다.

Core CSS Custom Properties

간격 시스템은 몇 가지 주요 CSS 사용자 정의 속성을 중심으로 이루어집니다.

Global Spacing Properties

--ig-spacing - The base spacing multiplier (default: 1)
--ig-spacing-small- 소형 부품의 간격
--ig-spacing-medium- 중간 크기의 구성 요소에 대한 간격.
--ig-spacing-large- 대형 구성 요소를 위한 간격

Directional Spacing Properties

--ig-spacing-inline - Controls horizontal spacing
--ig-spacing-block - Controls vertical spacing
--ig-spacing-inline-small- 소형 부품을 위한 수평 간격
--ig-spacing-inline-medium - Horizontal spacing for medium components
--ig-spacing-inline-large- 대형 부품에 대한 수평 간격
--ig-spacing-block-small- 소형 부품을 위한 수직 간격
--ig-spacing-block-medium - Vertical spacing for medium components
--ig-spacing-block-large- 대형 부품에 대한 수직 간격

Size Detection Variables

구성 요소는 CSS 사용자 정의 속성을 사용하여 현재 크기를 자동으로 감지합니다.

--is-small- 구성 요소가 작을 때는 1로 설정하고, 그렇지 않으면 0으로 설정합니다.
--is-medium- 구성 요소가 중간 크기인 경우 1로 설정하고, 그렇지 않으면 0으로 설정합니다.
--is-large- 구성 요소가 큰 경우 1로 설정하고, 그렇지 않으면 0으로 설정합니다.
--component-size- 현재 크기를 나타내는 숫자 값(1=소형, 2=중간, 3=대형).

이러한 변수는 테마 시스템에 의해 자동으로 관리되며 에 의해--ig-size 제어되는 구성 요소의 크기 설정에 따라 변경됩니다.

Practical Usage Examples

Global Spacing Control

전체 애플리케이션에서 모든 구성 요소를 더 컴팩트하게 만들려면:

:root {
  --ig-spacing: 0.8; /* 20% less spacing */
}

더 나은 터치 접근성을 위해 간격을 늘리려면:

:root {
  --ig-spacing: 1.2; /* 20% more spacing */
}

Component-Specific Spacing

특정 구성요소 유형에 대한 간격을 조정하려면:

.my-grid {
  --ig-spacing: 0.5; /* More compact grid, 50% of the original spacing in all sizes */
}

Directional Spacing Control

수직 간격을 정상으로 유지하면서 수평 간격만 줄이려면:

:root {
  --ig-spacing-inline: 0.7;
  --ig-spacing-block: 1.0;
}

Size-Specific Spacing

특정 구성요소 크기에 대한 간격을 사용자 정의하려면:

:root {
  --ig-spacing-small: 0.5;   /* Very tight for small components */
  --ig-spacing-medium: 1.0;  /* Normal for medium components */
  --ig-spacing-large: 1.5;   /* Extra spacious for large components */
}

How Spacing Multipliers Work

간격 시스템은 승수를 사용하여 기본 값을 조정합니다.

구성요소의 간격 값에 활성 간격 변수가 곱해집니다.
예를 들어, 구성 요소에 기본 패딩이 있고 8px 설정--ig-spacing: 1.5 하면 실제 패딩은 12px
대형 구성 요소에 대한 전역--ig-spacing 재정의와 같은--ig-spacing-large 크기별 승수
방향--ig-spacing-inline 승수를 사용하면 수평 및 수직 간격을 독립적으로 조정할 수 있습니다.

이 계단식 접근 방식은 일관된 간격 관계를 보장하는 동시에 CSS 사용자 정의 속성만을 통해 세밀한 제어를 제공합니다.

API References

Sizing Functions and Mixins

Additional Resources

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