Ext.js-스타일
애플리케이션 스타일링은 구성 요소의 모양과 느낌을 사용자가 조정하는 것을 말합니다. 이러한 조정에는 색상, 색상 그라디언트, 글꼴, 여백 / 패딩 등이 포함될 수 있습니다. Ext JS 6에는 새로운 애플리케이션 스타일링 방법이 있습니다.
스타일링에 SCSS를 사용합니다. SCSS는 CSS 코드를 작성하는보다 동적 인 방법입니다. 이것의 도움으로 스타일 시트에 변수를 작성할 수 있습니다. 그러나 브라우저는 SCSS를 이해할 수 없습니다. CSS 만 이해할 수 있으므로 모든 SCSS 파일은 프로덕션 준비 코드로 CSS로 컴파일되어야합니다.
따라서 SCSS 파일을 전 처리기 파일이라고합니다. Ext.js에서 컴파일은 Sencha CMD 도구를 통해 이루어집니다. Sencha CMD는 다음 명령을 사용하여 한 번만 수동으로 컴파일합니다.
sencha app build [development]Global_CSS는 기본 CSS 파일로, ExtJS에서 관련된 모든 SCSS 변수를 가지고 있으며 우리의 필요에 따라 다른 값을 제공하여 테마를 사용자 지정하기 위해 응용 프로그램에서 사용할 수 있습니다.
다음은 Ext.js의 Global_CSS에서 사용할 수있는 몇 가지 CSS 변수입니다.
| Sr. 아니요 | 변수 및 설명 |
|---|---|
| 1 | $base-color $ base-color : 색상 (예 : $ base-color : # 808080) This base color is to be used throughout the theme. |
| 2 | $base-gradient $base-gradient: string (e.g. $base-gradient : 'matte') This base gradient is to be used throughout the theme. |
| 3 | $body-background-color $body-background-color: color (e.g. $body-background-color : #808080) Background color to apply to the body element. If set to transparent or 'none', no background-color style will be set on the body element. |
| 4 | $color $color : color (e.g. $color : #808080) This default text color is to be used throughout the theme. |
| 5 | $font-family $font-family : string (e.g. $font-family : arial) This default font-family is to be used throughout the theme. |
| 6 | $font-size $font-size : number (e.g. $font-size : 9px ) This default font-size is to be used throughout the theme. |
| 7 | $font-weight $font-weight : string/number (e.g. $font-weight : normal ) This default font-weight is to be used throughout the theme. |
| 8 | $font-weight-bold $font-weight-bold : string/number (e.g. $font-weight-bold : bold ) This default font-weight for bold font is to be used throughout the theme. |
| 9 | $include-chrome $include-chrome : boolean (e.g. $include-chrome : true) True to include Chrome specific rules. |
| 10 | $include-ff $include-ff : boolean (e.g. $include-ff : true) True to include Firefox specific rules. |
| 11 | $include-ie $include-ie : boolean (e.g. $include-ie : true) True to include Internet Explorer specific rules for IE9 and lower. |
| 12 | $include-opera $include-opera : boolean (e.g. $include-opera : true) True to include Opera specific rules. |
| 13 | $include-safari $include-safari : boolean (e.g. $include-safari : true) True to include Opera specific rules. |
| 14 | $include-webkit $include-webkit : boolean (e.g. $include-webkit : true) True to include Webkit specific rules. |