Angular Material - это набор современных компонентов пользовательского интерфейса, разработанных командой Angular и основанных на спецификации дизайна материалов Google. Google описывает материальный дизайн как набор рекомендаций, значков и компонентов, которые объединяются для создания единого взаимодействия с пользователем на разных платформах. Материальный дизайн основан на трех принципах:
- Материал - это метафора
- Жирный, графический, намеренный
- Движение дает смысл
Суммирование этих принципов приводит к интуитивно понятному визуальному языку, который синтезирует классические принципы хорошего дизайна с проверенной наукой о пользовательском опыте. Компоненты Material имеют модульную структуру и легко интегрируются. Их отзывчивость создает единый, независимый от устройств опыт. Самый простой способ начать работу с материалом angular - это установить пакет и зависимости через npm. Чтобы узнать больше о npm-install, ознакомьтесь с их документацией здесь.
npm install @angular/material --saveНекоторые расширенные переходы и анимация компонентов зависят от пакета «animation», а также от «hammer.js».
npm install @angular/animations --savenpm install --save hammerjs
Флаг --save сохраняет каждый пакет как зависимость от разработчика. После выполнения обеих команд в файл package.json будут добавлены модули материала и анимации. Однако их все еще нужно добавить в наш массив импорта в корневом модуле (app.module.ts).
...import { BrowserAnimationsModule } from '@angular/platform-browser/animations';import { MaterialModule } from '@angular/material';import 'hammerjs';@NgModule({...imports: [BrowserModule,HttpModule,BrowserAnimationsModule,MaterialModule],...})export class AppModule { }
Обратите внимание, что мы импортируем необходимые библиотеки с оператором import в верхней части файла, а затем добавляем их в наш массив импорта. Теперь мы можем начать использовать компоненты материала. Ознакомьтесь с библиотекой компонентов вместе с примерами и лучшими практиками в Angular Material.
Темы
Есть несколько готовых тем на выбор в разделе «node_modules / @ angular / material / rebuilt-themes». Чтобы добавить тему в наш проект, мы можем ссылаться на один из файлов со страницы index.html или включить оператор импорта в наш глобальный файл styles.scss (при условии, что вы создали проект с помощью angular CLI):
//styles.scss global stylesheet@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
Включение темы необходимо для применения всех основных стилей и стилей темы к вашему приложению. Есть 4 встроенных темы на выбор и инструкции по созданию собственных тем в Руководстве по созданию тем.
Иконки
Доступно более 900 высококачественных иконок Материальный дизайн. Они не обязательны. По умолчанию они не включены в библиотеку материалов. Чтобы использовать значки, просто добавьте ссылку на страницу index.html над открывающим тегом <body>.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">Еще одна популярная библиотека иконок - Font Awesome, созданная Дэйвом Ганди. В версии 4.7 они предлагают надежный набор из 675 иконок, которые прекрасно масштабируются. На момент написания этой статьи версия 5 доступна для предварительного заказа и должна быть выпущена в ближайшее время. Самый простой способ начать использовать библиотеку - это зарегистрироваться в настраиваемой CDN. Если вы не знакомы с CDN, это быстрый и простой способ получить доступ к сторонней библиотеке. CDN расшифровывается как Content Delivery Network. Ссылка на значки Material Design - это CDN, она связана с API Google, содержащим набор значков. Использование CDN дает множество преимуществ по сравнению с загрузкой библиотеки и включением ее в ваше приложение. Во-первых, гораздо проще просто привязать объект к объекту. Во-вторых, что более важно, CDN всегда будет ссылаться на последнюю версию. Если в библиотеке есть обновления и улучшения, они будут поступать автоматически с использованием CDN. Если вы скачали и включили библиотеку, вам нужно будет вручную загрузить самую новую версию и заменить ее на более старую версию. Регистрация на Font Awesome бесплатна. Дополнительным преимуществом является персонализация CDN. Таким образом, вы можете отслеживать, сколько раз отображались значки.
Компоненты
Библиотека компонентов организована по функциональности. Все компоненты управления формой сгруппированы вместе, как и компоненты навигации и т. Д. Каждый компонент имеет подробный обзор с примером. Google отлично справляется с предоставлением исчерпывающей документации. Каждый компонент также имеет ссылку на API. В этом справочнике показан любой код, необходимый для работы компонента. Вот справочник по API для «Панели инструментов»:
API указывает, что MdToolbarModule должен быть импортирован из ‘@ angular / material’. На мой взгляд, модуль материалов по умолчанию должен включать все компоненты. Однако ни один из компонентов не включен. Они должны быть импортированы в приложение, чтобы использовать их так же, как мы импортировали BrowserAnimationModule. То есть мы должны сообщить angular о каждом компоненте, который мы собираемся использовать. Каждый компонент находится в @ angular / material. Это означает, что мы можем импортировать несколько компонентов с помощью одного оператора импорта. Мы добавляем следующее в app.module.ts.
import { MdButtonModule, MdCardModule, MdMenuModule, MdToolbarModule, MdIconModule } from '@angular/material';Это дает нам доступ к кнопкам, карточкам, меню, панели инструментов и компонентам значков. Как и раньше, мы также должны добавить модули в массив импорта @NgModule. Обновленный @NgModule будет выглядеть так:
...import { BrowserAnimationsModule } from '@angular/platform-browser/animations';import { MaterialModule } from '@angular/material';import 'hammerjs';import { MdButtonModule, MdCardModule, MdMenuModule,MdToolbarModule, MdIconModule } from '@angular/material'; // import material components@NgModule({...imports: [BrowserModule,HttpModule,BrowserAnimationsModule,MaterialModule,MdButtonModule, // Add material components to imports arrayMdCardModule,MdMenuModule,MdToolbarModule,MdIconModule],...})export class AppModule { }
Обратите внимание, что для краткости корневой модуль показывает только то, что относится к угловому материалу. На этом этапе мы готовы использовать любой из указанных компонентов в приложении. Вот общий компонент, который можно найти в большинстве приложений - панель инструментов:
<md-toolbar color="primary"><span>App Name</span><span class="example-spacer"></span><button md-button [mdMenuTriggerFor]="appMenu"><md-icon>menu</md-icon> Menu</button></md-toolbar><md-menu #appMenu="mdMenu"><button md-menu-item> Settings </button><button md-menu-item> Contact </button></md-menu>
Панель инструментов создается с помощью элемента <md-toolbar></md-toolbar>. Все компоненты следуют соглашению об именах, которое начинается с префикса «md», за которым следует имя компонента. Панель инструментов устанавливает атрибут цвета как основной, который будет использовать основной цвет темы «темно-фиолетовый-янтарный». Обратите внимание, как меню предоставляет api для программного открытия / закрытия, а значок указан как «Меню». Этот метод называется лигатурой, когда имя значка привязано к отображаемому значку. Класс example-spacer - это обычный класс для стилизации панели инструментов с помощью flexbox. Связанный css выглядит следующим образом:
.example-spacer {flex: 1 1 auto;}
Это занимает все пространство между именем приложения с левой стороны и значком меню с правой стороны. Вот как должна выглядеть панель инструментов с текущей темой.
И когда щелкают значок меню:
Слово «Меню» необязательно. Часто разработчики просто используют значок меню, также известный как «значок гамбургера», как единственный визуальный сигнал, указывающий на то, что доступны дополнительные параметры.
Компоненты материала позволяют нам быстро проектировать наше приложение во время разработки. Это был простой пример для представления Angular / Material, хотя библиотека включает в себя некоторые расширенные анимации и стили графики. Ознакомьтесь со всей библиотекой компонентов и посетите Learn2Code, чтобы получить бесплатные курсы по Angular и другим стекам разработки.
