Подключение css-стилей к контролу
Рекомендуется ознакомиться со статьями "Настройка TypeScript" и "TypeScript библиотеки", а также вебинаром "Let's Talk Wasaby #10. TypeScript библиотеки".
Без темизации
Чтобы указать стили контролов без темизации (например использующих CSS без LESS), в файле *.ts
задают значение для статического поля _styles. В нем можно указать зависимость от CSS-файлов, которые не будут собираться с темами: такие CSS собираются в оригинальном модуле и загружаются из него.
// TodoInput.ts
import * as BaseControl from 'Core/Control';
import template = require('wml!TodoMvc/_todo/TodoInput');
class TodoInput extends BaseControl {
private _template: Function = template;
static _styles: Array<String> = ["TodoMvc/helpers/todo_helpers"];
}
export default TodoInput;
├─── TodoMvc
│ ├─── _todo
│ │ ├─── TodoInput.less
│ │ ├─── TodoInput.wml
│ │ └─── TodoInput.ts
│ ├─── TodoMvc.s3mod
│ ├─── helpers
│ │ └─── todo_helpers.less
С темизацией
При описании класса контрола в статическом поле _theme необходимо указать пути до нужных less-файлов со стилями.
В следующем примере показано содержимое файла TodoInput.ts
и его расположение в интерфейсном модуле TodoMvc
.
// TodoInput.ts
import * as BaseControl from 'Core/Control';
import template = require('wml!TodoMvc/_todo/TodoInput');
class TodoInput extends BaseControl {
private _template: Function = template;
static _theme: Array<String> = ["TodoMvc/_todo/TodoInput"];
}
export default TodoInput;
├─── TodoMvc
│ ├─── _todo
│ │ ├─── _TodoInput.less
│ │ ├─── TodoInput.wml
│ │ └─── TodoInput.ts
│ ├─── TodoMvc.s3mod
├─── TodoMvc-todo-theme
│ ├─── _todo
│ │ └─── TodoInput.less
│ └─── TodoMvc-todo-theme.s3mod
Наследование от контрола с предустановленными статическими полями _styles и _theme
При наследовании от контрола, у которого уже определены статические поля _styles
или _theme
, нужно явно указывать наследование стилей в этих полях.
В следующем примере показано содержимое файла Tabs.ts
, где класс контрола TodoInput
наследуется от BaseControl
.
// TodoInput.ts
import * as BaseControl from 'Core/Control';
import template = require('wml!TodoMvc/_todo/TodoInput');
class TodoInput extends BaseControl {
private _template: Function = template;
static _styles: Array<String> = ["TodoMvc/helpers/todo_helpers"].concat(BaseControl._styles);
static _theme: Array<String> = ["TodoMvc/_todo/TodoInput"].concat(BaseControl._theme);
}
export default TodoInput;
Такое решение принято с целью ускорения сборки, т.к. в ином случае придется добавить проход по прототипам всех родительских контролов в конструктор базового контрола. И этот проход будет выполняться при построении каждого контрола.