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, который имеет все переменные SCSS, связанные с ним в ExtJS, которые можно использовать в нашем приложении для настройки нашей темы, предоставляя различные значения в зависимости от наших потребностей.

Ниже приведены некоторые из переменных CSS, доступных в Global_CSS в Ext.js.

Старший Нет Переменная и описание
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)

Цвет фона, применяемый к элементу тела. Если установлено значение transparent или none, для основного элемента не будет установлен стиль цвета фона.

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: строка / число (например, $ font-weight: normal)

Этот шрифт по умолчанию должен использоваться во всей теме.

8

$font-weight-bold

$ font-weight-bold: строка / число (например, $ font-weight-bold: полужирный)

Этот шрифт по умолчанию для полужирного шрифта должен использоваться во всей теме.

9

$include-chrome

$ include-chrome: boolean (например, $ include-chrome: true)

Верно, чтобы включить специальные правила Chrome.

10

$include-ff

$ include-ff: логическое (например, $ include-ff: true)

Верно, чтобы включить специальные правила Firefox.

11

$include-ie

$ include-ie: логическое (например, $ include-ie: true)

True, чтобы включить специальные правила Internet Explorer для IE9 и ниже.

12

$include-opera

$ include-opera: логическое (например, $ include-opera: true)

Верно, чтобы включить специальные правила Opera.

13

$include-safari

$ include-safari: логическое (например, $ include-safari: true)

Верно, чтобы включить специальные правила Opera.

14

$include-webkit

$ include-webkit: логическое (например, $ include-webkit: true)

Верно, чтобы включить специальные правила Webkit.