[Из песочницы] Создание Angular 2+ компонентов с возможностью переключения темы
Итак, допустим мы пишем сайт, на котором нужно реализовать возможность динамического переключения настроек внешнего вида, или, проще говоря, темы. Темой (theme) будем называть набор свойств, определяющих внешний вид компонентов (да и вообще всего сайта).
Допустим, у нас есть одностраничное приложение на Angular, и пусть в нем будет ооочень много компонентов, и один из них — ButtonComponent (к компоненту подключим стили из button.component.css), на примере которого и рассмотрим весь механизм. И нужно реализовать возможность переключения между двумя темами: «dark» и «light», которые у нас будут отличаться только цветами (а в общем случае можно выносить в тему что угодно, размеры там, шрифты, картинки бэкграунда и т.п. — все, чем можно управлять из css).
Читать дальше →
Источник:
Если Вы хотите оставить заказ на разработку сайта или получить предварительную консультацию воспользуйтесь формой по ссылке ниже.
Обратная связь
Наш специалист ответит вам в течении суток.
Похожие публикации
Собственный VPN клиент на JavaScript. 10 часть — Объединение всех компонентов
После того, как все части приложения были разработаны, их можно объединить в одно большое приложение.Читать дальше →... читать далее
Блог им. linuxxspb / HttpHandler для сжатия и компрессии *.js и *.css файлов
Всем известно, что «большая часть времени уходит на загрузку компонентов страницы: картинок, таблиц стилей, скриптов, flash… Уменьшение количества этих компонентов уменьшает количество запросов к... читать далее
[Из песочницы] Практическое руководство по использованию CSS Modules в React приложениях
Привет Хабр! Предлагаю вашему вниманию свободный перевод статьи «Practical Guide to React and CSS Modules» от Tatu Tamminen. В прошлом веб-разработчики тратили много времени и сил на создание... читать далее
[Из песочницы] [Select-Form]: Пишем свой select-список, используя jQuery и CSS
Здравствуйте, хабраюзеры и просто читающие. Сравнительно недавно задался вопросом, как применить стили к тегу select. Всем же хочется, чтобы стилизация формы соответствовала дизайну сайта, а пока что... читать далее
Недокументированные приемы CSS
Всем привет! Зовут меня Дмитрий Григоров. Работаю фронтедером в Райффайзенбанке в команде RBO PRO. Я расскажу и покажу вам, как можно творчески применять данные возможности CSS. В статье мы... читать далее
[recovery mode] Добавляем реактивность в строковые шаблонизаторы
Одним из преимуществ строковых шаблонизаторов таких как JUST.js, jqueryTmpl или handlebarsjs перед шаблонизаторами на основе виртуального DOM дерева (VUE.js, angular) это низкий порог вхождения и... читать далее
Прокомментировать
Облако тегов
angular css CSS es6 frontend habrahabr.ru HTML html html5 JavaScript javascript js react ReactJS seo SEO на Хабрахабре vue Блог компании RUVDS.com Веб-дизайн Интернет-маркетинг Поисковая оптимизация Программирование Разработка веб-сайтов Уроки CSS на Хабрахабре автомобильный сайт блог браузеры верстка вёрстка дайджест интернет-магазин информационный ресурс корпоративный сайт модуль мы рекомендуем портфолио разработка ссылки фронтенд
Реклама на сайте
Веб студия в Киеве hover