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.