구성

    Ignite UI for Angular 테마 라이브러리는 테마 엔진의 작동 방식을 구성할 수 있는 여러 입력 인수 변수를 노출합니다.

    Global Variables

    다음은 기본 테마 모듈에 전달되는 전역 Sass 변수 목록입니다.

    변수 이름 설명
    $components 모든 구성 요소 테마의 레지스터를 저장합니다. 나무를 흔드는 데 사용됩니다.
    $dropped-themes 삭제된 테마의 레지스터를 저장합니다. 나무를 흔드는 데 사용됩니다.

    Scrollbar Styling

    The Ignite UI for Angular themes ship with custom scrollbar styles that allow you to change the width and/or the colors of all scrollbars in your application. To apply the included styles, make sure to set the ig-scrollbar class to an element that contains your root app component.

    To customize the scrollbar further, you can create a new scrollbar style with the scrollbar-theme function. The function accepts arguments for style changes on the scrollbar. We can customize the scrollbar size, color, border, min-height... and many more.

    // app.component.scss
// Here we set the scrollbar to have size of 16px, scrollbar thumb to be in color pink, and scrolblar track to be in color green
$my-scrollbar-theme: scrollbar-theme($sb-size: 16px, $sb-thumb-bg-color: pink, $sb-track-bg-color: green);

// We use 'css-vars' mixin for generating the css variables with the new scrollbar values.
@include css-vars($my-scrollbar-theme);

    Additional Resources

    개념을 알아보세요:

    애플리케이션 전체 테마를 만드는 방법을 알아보세요.

    구성 요소별 테마를 만드는 방법을 알아보세요.

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