구성

    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);
scss

    Additional Resources

    개념을 알아보세요:

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

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

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