📜  Ext.js-样式

📅  最后修改于: 2020-10-25 11:18:11             🧑  作者: Mango


应用程序样式是指用户调整组件的外观。这些调整可能包括:颜色,颜色渐变,字体,边距/填充等。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.No Variable & Description
1

$base-color

$base-color: color (e.g. $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.