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. |