Этот блог был перемещен с среднего уровня на blogs.tensult.com. Здесь будет доступен весь последний контент. Подпишитесь на нашу рассылку новостей, чтобы оставаться в курсе.
В настоящее время использование Angular Material design в приложении Angular очень распространено. Angular Material предоставляет вам удобные встроенные конструктивные особенности, позволяющие легко проектировать компоненты Angular. В этом блоге я объясню, как написать собственную тему angular -материала для приложения Angular.
Итак, давайте продолжим, я предполагаю, что вы уже запускаете приложение Angular 6 с материалом Angular. Если вы не настроили свое приложение Angular с помощью Angular Material, вы можете сделать это здесь.
После того, как Angular Material настроен в вашем приложении, в вашем приложении будет установлена одна тема angular-material-theme по умолчанию. У вас также есть возможность изменить тему по умолчанию angular -материала с другими предварительно созданными темами-материала-angular. Есть несколько готовых тем Angular Material на выбор, доступных в Angular Material, и это следующие
* deeppurple-amber.css
* indigo-pink.css
* pink-bluegrey.css
* purple-green.css
Вы можете заменить стандартную тему angular -материала одной из вышеупомянутых тем-материалов angular, используя следующие способы.
- Вы можете напрямую включить предварительно созданную тему angular -материала в файл styles.css.
@import '@angular/material/prebuilt-themes/deeppurple-amber.css';2. Добавьте следующее в заголовок файла index.html.
<link href="node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css" rel="stylesheet">3. Обновите следующее в файле «angular.json».
"styles": [
{
"input": "node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css"
},
"src/styles.css"
],
Для изменения набора цветов существующей предварительно созданной темы Angular Material вам необходимо создать пользовательскую тему angular-material-theme. Здесь я покажу вам демонстрацию того, как изменить набор цветов предварительно созданной темы angular-material-theme.
Давайте начнем с демонстрации пользовательской темы angular-material-theme.
- Теперь добавьте модули MatFormFieldModule, MatButtonModule и MatInputModule в массив импорта NgModule в app.module.ts файл. Ваш файл должен выглядеть примерно так:
2. Создайте один компонент и обновите в нем следующие.
3. Поскольку мы имеем дело с одним компонентом, мы не помещаем здесь никакой логики маршрутизации. Просто обновите следующее в app.component.html.
4. Теперь запустите приложение Angular с помощью команды «ng serve», оно будет отражать цвета заранее созданной темы Angular Material. По умолчанию основной цвет предварительно созданной темы Angular Material темно-фиолетовый, поэтому он будет активирован в дизайне.
5. Теперь предположим, что вы хотите установить свой собственный цвет на границе поля формы и в кнопке, вы не можете изменить цвет вручную, так как вы используете angular-material-theme, поэтому для этого вам нужно написать собственный angular-material-theme, чтобы изменить набор цветов предварительно созданной темы. Вот пример настраиваемой темы Angular Material для изменения набора цветов вашей angular-material-theme.
6. Чтобы применить настраиваемую тему материала Angular в приложении Angular, просто добавьте имя файла настраиваемой темы в массив стилей angular.json следующим образом.
"styles": [
{
"input": "src/custom-theme.scss"
},
"src/styles.css"
],
Вуаля! Теперь вы успешно реализовали свою настраиваемую тему в приложении Angular. Чтобы увидеть вашу настраиваемую тему в эффектах в вашем приложении, просто запустите приложение, и вы сможете увидеть подобные изменения.
Заключение
В настроенной мной теме основным цветом стал черный. Вы можете выбрать свой цвет здесь. Спасибо за чтение моего блога. Пожалуйста, поделитесь своими мыслями по этому поводу, и если вы обнаружите какие-либо трудности, поделитесь своими сомнениями в разделе ответов ниже.
