구성

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

    Global Variables

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

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

    Scrollbar Styling

    Ignite UI for Angular 테마에는 애플리케이션 내 모든 스크롤바의 너비나 색상을 변경할 수 있는 커스텀 스크롤바 스타일이 함께 제공됩니다. 포함된 스타일을 적용하려면, 해당 클래스를 루트 앱 컴포넌트가 포함된 요소로 설정ig-scrollbar 해야 합니다.

    스크롤바를 더 커스터마이즈하려면 이 기능으로scrollbar-theme 새로운 스크롤바 스타일을 만들 수 있습니다. 이 함수는 스크롤바에서 스타일 변경에 대한 인자를 받아들입니다. 스크롤바 크기, 색상, 테두리, 최소 높이 등을 커스터마이즈할 수 있습니다... 그리고 그 외에도 많은 이들이 있습니다.

    // 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

    개념을 알아보세요:

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

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

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