ExtJS教程

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.No 变量和描述
1
$base-color
$base-color:颜色(例如 $base-color : #808080)
这个基色将在整个主题中使用。
2
$base-gradient
$base-gradient: 字符串(例如 $base-gradient : 'matte')
这个基础整个主题都使用渐变。
3
$body-background-color
$body-background-color:颜色(例如 $body-background-color : #808080)
应用于 body 元素的背景颜色。如果设置为透明或"无",则不会在 body 元素上设置背景颜色样式。
4
$color
$color : 颜色(例如 $color : #808080)
此默认文本颜色将贯穿始终主题。
5
$font-family
$font-family : string (eg $font-family : arial)
这个默认字体-family 将贯穿整个主题。
6
$font-size
$font-size : 数字(例如 $font-size : 9px )
这个默认字体-大小将在整个主题中使用。
7
$font-weight
$font-weight : string/number (eg $font-weight : normal )
这个默认font-weight 将在整个主题中使用。
8
$font-weight-bold
$font-weight-bold : 字符串/数字(例如 $font-weight-bold : bold )
粗体的默认字体粗细将在整个主题中使用。
9
$include-chrome
$include-chrome : boolean (例如 $include-chrome : true)
True 以包含 Chrome具体规则。
10
$include-ff
$include-ff : boolean (例如 $include-ff : true)
True 以包含 Firefox具体规则。
11
$include-ie
$include-ie :布尔值(例如 $include-ie :true)
True 以包含 Internet IE9 及更低版本的 Explorer 特定规则。
12
$include-opera
$include-opera : boolean (例如 $include-opera : true)
True 以包含 Opera具体规则。
13
$include-safari
$include-safari : boolean (例如 $include-safari : true)
True 以包含 Opera具体规则。
14
$include-webkit
$include-webkit : boolean (例如 $include-webkit : true)
True 以包含 Webkit具体规则。
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4