진원도

Ignite UI for Angular 사용하면 0에서 1 사이의 값을 사용하여 진원도를 조정하여 구성 요소의 모양을 사용자 정의할 수 있습니다.

개요

많은 Ignite UI 컴포넌트는 최소 및 최대 경계 반경 값을 미리 정의하여 CSS 변수를 사용하여--ig-radius-factor 조정할 수 있습니다.

0으로 설정--ig-radius-factor 하면 컴포넌트가 최소 경계 반경을 사용해 모서리가 날카로운 블록처럼 보입니다. 1로 설정하면 컴포넌트는 미리 정의된 최대 테두리 반경을 사용하며 둥글게 보입니다.

다음은 미리 정의된 최소 및 최대 경계 반경 값을 가진 구성 요소들의 목록이며, 변수--ig-radius-factor를 사용하여 수정할 수 있습니다:
• 액션 스트립 • 버튼 • 버튼 그룹 • 달력 • 카드 • 회전목마 • 체크박스 • 칩 • 콤보 • 날짜 선택기 • 날짜 범위 선택기 • 그리드 • 입력 그룹 • 선형 진행 • 목록 • 월 선택기 • 내비게이션 서랍 • 라디오 • 리플 • 스낵바 • 스위치 • 토스트

컴포넌트의 두 경계-반경 값을 전환하려면 요소 선택기를 타겟팅하고 변수를--ig-radius-factor 0 또는 1로 설정하세요:

igx-chip {
   --ig-radius-factor: 0;
}

이렇게 하면 미리 정의된 최소 경계 반경이 적용되어 칩 구성 요소에 직선 모서리가 생깁니다.

igx-chip {
    --ig-radius-factor: 1;
}

그리고 값을 1로 설정하면 미리 정의된 최대 테두리 반경이 적용되어 칩 구성 요소의 모서리가 둥글게 됩니다.

경계 반경을 정의된 최소값과 최대 값 사이 어딘가에 두고 싶다면, 변수를--ig-radius-factor 0에서 1 사이의 소수점으로 설정할 수 있습니다. 예를 들어, 를0.5 설정하면 컴포넌트 최대 허용값의 50%에 해당하는 경계 반경이 적용됩니다.

igx-chip {
    --ig-radius-factor: 0.5;
}

아래 예에서 최소 및 최대 border-radius 값의 차이를 확인할 수 있습니다.