Всем привет. Итак, допустим, мы пишем сайт, на котором нам нужно реализовать возможность динамического переключения настроек внешнего вида, или проще говоря, тем.
Тема — это набор свойств, определяющих внешний вид компонентов (да и всего сайта).
Допустим, у нас есть одностраничное приложение на Angular, и пусть в нем столько-то компонентов, и один из них — ButtonComponent (мы подключим к компоненту стили из button.comComponent.css), с помощью которого мы будем рассматривать весь механизм в качестве примера.
И нам нужно реализовать возможность переключения между двумя темами: «темной» и «светлой», которые будут отличаться только цветами (но в общем случае в тему можно положить что угодно, размеры есть, шрифты, фон картинки и т.п.
— всё, чем можно управлять из css).
Оригинальные «легкие» стили выглядели так:
А для «темных» вот так:.my-button { padding: 10px; font-size: 14px; color: midnightblue; border: 1px solid mdnightblue; background: white; cursor: pointer; } my-button:disabled { pointer-events: none; cursor: default; color: grey; border: 1px solid grey; }
.
my-button {
padding: 10px;
font-size: 14px;
color: lightblue;
border: 1px solid lightblue;
background: midnightblue;
cursor: pointer;
}
.
my-button:disabled {
pointer-events: none;
cursor: default;
background: grey;
color: lightgrey;
border: 1px solid lightgrey;
}
Выделим общую часть и сохраним ее в отдельный файл.
Пусть он находится там же, в папке с нашим компонентом, и называется button-core.comComponent.css. Мы также создадим по одному файлу для каждой темы, назвав их button-light.comComponent.css и button-dark.comComponent.css соответственно.
Что в них будет уже понятно, но для полноты картины все же приведу код (если не хотите его видеть, смело листайте):
кнопка-core.css: .
my-button { padding: 10px; font-size: 14px; cursor: pointer; } .
my-button:disabled {
pointer-events: none;
cursor: default;
}
кнопка-light.css: .
my-button {
color: midnightblue;
border: 1px solid mdnightblue;
background: white;
}
my-button:disabled {
color: grey;
border: 1px solid grey;
}
кнопка-dark.css: .
my-button { color: lightblue; border: 1px solid lightblue; background: midnightblue; } .
my-button:disabled {
background: grey;
color: lightgrey;
border: 1px solid lightgrey;
}
И в итоге сам button.comComponent.css будет выглядеть так: @import 'button-core.css'
@import 'button-light.css'
@import 'button-dark.css'
Обратите внимание, что сначала следует подключить общие настройки для всех тем, затем файл с темой по умолчанию, а затем все остальные.
Теперь посмотрим, как можно переключаться с одной темы на другую, в том числе и из кода.
Для этого нам понадобится селектор :host-context().
Что он делает? Этот селектор ищет определенный класс CSS, проходя через всех родителей элемента, вплоть до корня.
И если он сталкивается с этим классом, то применяет описанные изменения.
А еще лучше, давайте немного отвлечемся от нашей кнопки и рассмотрим ее работу на примере.
Допустим, у нас есть два вложенных компонента: родительский компонент и дочерний компонент. Их стили изолированы друг от друга благодаря Angular, и это хорошо, но нам хочется иногда менять внешний вид дочернего компонента в зависимости, скажем, от того, наведен ли курсор на родительский компонент (событие наведения).
Можно было бы, конечно, убрать инкапсуляцию с помощью ViewEncapsulation:none или добавить для этих целей в дочерний компонент переменную Input, но гораздо проще и правильнее сделать так: :host-context(.
parent-component:hover) .
child-component {
background: lightcoral;
}
Вернемся к нашей кнопке.
Вы можете установить некоторый стиль (:host-context(.
some-style)) в качестве маркера контекста хоста, что нам и нужно сделать.
Теперь файлы светлой темы будут выглядеть так:
кнопка-light.css: :host-context(.
light-theme) .
my-button { color: midnightblue; border: 1px solid mdnightblue; background: white; } :host-context(.
light-theme) my-button:disabled {
color: grey;
border: 1px solid grey;
}
Для темной темы то же самое.
Что мы получили? Теперь, как только мы установим класс светлой темы или темной темы хотя бы для одного из родительских элементов нашей кнопки, она изменит свой внешний вид, подключив соответствующие классы из наших файлов.
Чаще всего тема применяется сразу ко всему приложению, а это значит, что вам нужно переключить тему на корневом элементе, например на внешнем div из app-компонента (или компонента, который вы пропишете в бутстрапе ваше приложение).
В него можно добавить флаг темы и повесить на внешний элемент [ngClass]="{'light-theme': theme === 'light', 'dark-theme': theme === 'dark'}".
Ну что сказать дальше, вроде бы все понятно.
Вот простой способ создания тем без использования препроцессоров CSS. Метод несовершенен, т.к.
предполагает много копипаста.
С препроцессорами, такими как Sass, возможно более лаконичное создание тем.
Однако этот метод тоже имеет право на жизнь.
Всем спасибо за внимание, надеюсь, кому-то это будет полезно.
На основе статья , все идеи, в общем, оттуда.
Теги: #angular2 #angular #angular4 #CSS #компонент #тема #CSS #angular
-
Трансформируемые Мобильные Дома
19 Oct, 24 -
Виды Телекоммуникационных Шкафов
19 Oct, 24 -
Клиент Микроблогов
19 Oct, 24 -
Google И Parallels: Дружба По Расчету?
19 Oct, 24
