진원도

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

    개요

    많은 Ignite UI 구성 요소에는 CSS 변수를 사용하여--ig-radius-factor 조정할 수 있는 미리 정의된 최소 및 최대 경계 반경 값이 있습니다.

    0으로 설정--ig-radius-factor 하면 구성 요소가 최소 테두리 반경을 사용하고 날카로운 모서리가 있는 블록처럼 나타납니다. 1로 설정하면 구성 요소가 미리 정의된 최대 경계 반경을 사용하고 둥글게 표시됩니다.

    다음은 미리 정의된 최소 및 최대 경계 반경 값이 있고 변수를 사용하여 수정할 수 있는 구성 요소 목록입니다.--ig-radius-factor​
    • 동작 스트립 • 버튼 • 버튼 그룹 • 캘린더 • 카드 • 캐러셀 • 체크박스 • 칩 • 콤보 • 날짜 선택기 • 날짜 범위 선택기 • 그리드 • 입력 그룹 • 선형 진행 • 목록 • 월 선택기 • 탐색 서랍 • 라디오 • 리플 • 스낵바 • 스위치 • 토스트

    Usage

    구성 요소의 두 border-radius 값 사이를 전환하려면 요소 선택기를 대상으로 하고 변수를--ig-radius-factor 0 또는 1로 설정하기만 하면 됩니다.

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

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

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

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

    경계 반경이 정의된 최소값과 최대값 사이 어딘가에 있도록 하려면 변수를--ig-radius-factor 0과 1 사이의 10진수 값으로 설정할 수 있습니다. 예를 들어 로 0.5 설정하면 구성 요소의 최대 허용 값의 50%인 border-radius가 적용됩니다.

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

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

    Additional Resources

    관련 주제:

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