Учебники

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.

$ базового цвета

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