Стиль приложения относится к пользовательской настройке внешнего вида компонентов. Эти настройки могут включать в себя: цвет, цветовые градиенты, шрифт, поля / отступы и т. Д. В 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.
$ базового цвета
$ base-color: color (например, $ base-color: # 808080)
Этот базовый цвет должен использоваться по всей теме.
$ базового градиента
$ base-градиент: строка (например, $ base-градиент: ‘матовый’)
Этот базовый градиент должен использоваться по всей теме.
$ тела цвет фона
$ body-background-color: color (например, $ body-background-color: # 808080)
Цвет фона для применения к элементу тела. Если установлено прозрачное или «нет», стиль элемента фона не будет установлен для элемента body.
$ цвет
$ color: color (например, $ color: # 808080)
Этот цвет текста по умолчанию должен использоваться во всей теме.
$ семейство шрифтов
$ font-family: string (например, $ font-family: arial)
Это семейство шрифтов по умолчанию должно использоваться во всей теме.
$ размер шрифта
$ font-size: number (например, $ font-size: 9px)
Этот размер шрифта по умолчанию должен использоваться во всей теме.
$ начертание шрифта
$ font-weight: string / number (например, $ font-weight: normal)
Этот шрифт по умолчанию используется для всей темы.
$ начертание шрифта, полужирный
$ font-weight-bold: строка / число (например, $ font-weight-bold: полужирный)
Этот шрифт по умолчанию для жирного шрифта должен использоваться по всей теме.
$ включают хром
$ include-chrome: boolean (например, $ include-chrome: true)
Правда включать в Chrome специфичные правила.
$ включают-Ф.Ф.
$ include-ff: boolean (например, $ include-ff: true)
Правда включать в Firefox определенные правила.
$ включают, т.е.
$ include-ie: boolean (например, $ include-ie: true)
Правда, чтобы включить специальные правила Internet Explorer для IE9 и ниже.
$ включают-оперу
$ include-opera: boolean (например, $ include-opera: true)
Правда, чтобы включить определенные правила Opera.
$ включать-сафари
$ include-safari: boolean (например, $ include-safari: true)
Правда, чтобы включить определенные правила Opera.
$ включают WebKit-
$ include-webkit: boolean (например, $ include-webkit: true)
Правда, чтобы включить определенные правила Webkit.