Мультитемизация
В некоторых приложениях на одной странице может использоваться несколько тем.
Для поддержки мультитемизации на странице к верстке каждого контрола должны применяться стили из его темы. Для этого необходимо задать опцию theme для контрола.
Однако, чтобы контролы с разной опцией theme не перекрывали стили друг друга, при разработке контрола соблюдайте следующие правила.
Чтобы указать, какие из частей шаблона зависят от темы, вставьте название темы с постфиксом _theme-{{_options.theme}} в качестве класса у соответствующего элемента:
<div class="my-container_theme-{{_options.theme}}">
<Controls.input:Text/>
</div>
Именно добавление постфикса позволит избежать перекрытия стилей.
В LESS-файле это будет выглядеть так:
.my-container_theme-@{themeName} {
// Алиас, определенный в теме.
background: @default-background-color;
}
Обратите внимание, что задавать темизированные классы необходимо согласно следующим правилам:
- Если стили не зависят от темы оформления и не содержат less-переменных (например, выравнивание или display), для них создается класс без постфикса темы:
.controls-Button_readonly{ cursor: default; }
- И наоборот, если стили зависят от темы и содержат значения переменных, они должны задаваться на теге div с темизированным классом:
.controls-Button_button_style-primary_theme-@{themeName} { border-color: @primary_border-color_button;
- Если на одном теге div заданы оба вида стилей, необходимо создать два класса и распределить стили между ними.
<div class="controls-Button_readonly controls-Button_button_style-primary_theme-{{_options.theme}}"> </div>