目录

Ext.js - Style

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

$base-color

$ base-color:color(例如$ base-color:#808080)

这种基色将在整个主题中使用。

2

$base-gradient

$ base-gradient:string(例如$ base-gradient:'matte')

此基本渐变将在整个主题中使用。

3

$body-background-color

$ body-background-color:color(例如$ body-background-color:#808080)

应用于body元素的背景颜色。 如果设置为透明或“无”,则不会在body元素上设置背景颜色样式。

4

$color

$ color:color(例如$ color:#808080)

此默认文本颜色将在整个主题中使用。

5

$font-family

$ font-family:string(例如$ font-family:arial)

此默认字体系列将在整个主题中使用。

6

$font-size

$ font-size:number(例如$ font-size:9px)

此默认字体大小将在整个主题中使用。

7

$font-weight

$ font-weight:string/number(例如$ font-weight:normal)

此默认字体权重将在整个主题中使用。

8

$font-weight-bold

$ font-weight-bold:字符串/数字(例如$ font-weight-bold:bold)

此粗体字体的默认字体粗细将在整个主题中使用。

9

$include-chrome

$ include-chrome:boolean(例如$ include-chrome:true)

是的,包括Chrome特定规则。

10

$include-ff

$ include-ff:boolean(例如$ include-ff:true)

如果包含Firefox特定规则,则为True。

11

$include-ie

$ include-ie:boolean(例如$ include-ie:true)

如果包含IE9及更低版本的Internet Explorer特定规则,则为True。

12

$include-opera

$ include-opera:boolean(例如$ include-opera:true)

如果包含Opera特定规则,则为True。

13

$include-safari

$ include-safari:boolean(例如$ include-safari:true)

如果包含Opera特定规则,则为True。

14

$include-webkit

$ include-webkit:boolean(例如$ include-webkit:true)

如果包含Webkit特定规则,则为True。

↑回到顶部↑
WIKI教程 @2018