진원도

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

    개요

    Many Ignite UI components have predefined minimum and maximum border-radius values, which can be adjusted using the --ig-radius-factor CSS variable.

    When you set --ig-radius-factor to 0, the component uses its minimum border-radius and will appear more block-like with sharp corners. When set to 1, the component uses its maximum predefined border-radius and will appear rounded.

    Here is a list of the components that have predefined minimum and maximum border-radius values and can be modified using the --ig-radius-factor variable:
    • Action Strip • Button • Button Group • Calendar • Card • Carousel • Checkbox • Chip • Combo • Date Picker • Date Range Picker • Grid • Input Group • Linear Progress • List • Month Picker • Navigation Drawer • Radio • Ripple • Snackbar • Switch • Toast

    Usage

    To switch between the two border-radius values on a component, target the element selector and simply set the --ig-radius-factor variable to either 0 or 1:

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

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

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

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

    If you want the border-radius to be somewhere between the defined minimum and maximum values, you can set the --ig-radius-factor variable to a decimal value between 0 and 1. For example, setting it to 0.5 will apply a border-radius that is 50% of the component's maximum allowed value.

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

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

    Additional Resources

    관련 주제:

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