구성
Legacy Support
Ignite UI for Angular 개발은 Internet Explorer 11이 여전히 관련성이 있었던 2016년에 시작되었습니다. 일부 사용자는 현재까지 IE11을 사용하고 있습니다. 우리의 테마 엔진은 동일한 API를 사용하여 에버그린 브라우저와 오래된 브라우저 모두에 대한 스타일을 생성할 수 있는 방식으로 구축되었습니다. 단일 전역 변수인 $igx-legacy-support 기반으로 엔진이 작동하는 방식을 구성할 수 있습니다. 기본적으로 false로 설정되어 있지만 해당 선언을 숨길 수 있습니다. 이 변수의 값은 theme 믹스인에 $legacy-support 매개변수를 지정할 때 암시적으로 설정됩니다.
Warning
$legacy-support 옵션은 igniteui-angular 13.0.x에서 제거되었습니다. IE11 및 레거시 브라우저에 대한 지원은 버전 13에서 제거되었으며 이 옵션은 더 이상 유효하지 않습니다.
Example:
// Sets the global $igx-legacy-support variable to true
@include theme(
$legacy-support: true
);
이는 styles.scss 파일에서 작성 중인 테마에 대한 레거시 지원을 끄는 기본 방법입니다. app.component.scss 파일과 같은 특정 구성 요소로 범위가 지정된 스타일이 있는 경우 거기에서도 레거시 지원을 지정해야 합니다.
// app.component.scss
$igx-legacy-support: true;
$color: color($light-material-palette, 'primary', 900);
모든 전역 구성 변수를 저장하는 프로젝트의 styles 디렉터리에_variables.scss 파일을 만드는 것이 좋습니다. 이러한 방식으로 모든 스타일 파일의 구성을 간단히 가져올 수 있습니다.
Global Variables
다음은 기본 테마 모듈에 전달되는 전역 Sass 변수 목록입니다.
| 변수 이름 | 설명 |
|---|---|
$components |
모든 구성 요소 테마의 레지스터를 저장합니다. 나무를 흔드는 데 사용됩니다. |
$dropped-themes |
삭제된 테마의 레지스터를 저장합니다. 나무를 흔드는 데 사용됩니다. |
Scrollbar Styling
Ignite UI for Angular 애플리케이션에 있는 모든 스크롤 막대의 너비 및/또는 색상을 변경할 수 있는 사용자 정의 스크롤 막대 스타일과 함께 제공됩니다. 포함된 스타일을 적용하려면 ig-scrollbar 클래스를 루트 앱 구성 요소가 포함된 요소로 설정해야 합니다.
스크롤 막대를 추가로 사용자 정의하려면 기존 scrollbar-theme 확장하고 $schema, $thumb-background, $track-background 및 $scrollbar-size 매개 변수를 허용하는 새 테마를 생성할 수 있습니다.
// app.component.scss
$my-scrollbar-theme: scrollbar-theme($thumb-background: black, $track-background: gray);
@include scrollbar($my-scrollbar-theme);
추가 테마 생성을 방지하기 위해 매개변수를 스크롤바 기능에 직접 적용할 수도 있습니다.
// app.component.scss
@include scrollbar(scrollbar-theme($scrollbar-size: 16px));
Additional Resources
개념을 알아보세요:
애플리케이션 전체 테마를 만드는 방법을 알아보세요.
구성 요소별 테마를 만드는 방법을 알아보세요.
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.
GitHub