Angular Material позволяет добавить компоненты Material Design в Angular 2+ приложения. Целью проекта является создания полного набора компонентов что сделает возможным легкое создания веб-интерфейсов для мобильных клиентов и десктопов. Последний релиз Angular Material требует Angular версии 4+.
И так начнем разбираться, как начать использовать Angular Material 2:
1. Добавьте зависимости angular-material & hammerjs
Сначала установите Angular Material, Angular animations, и Hammer.js с помощью следующих команд
$ npm install --save @angular/material @angular/animations @angular/cdk $ npm install --save hammerjs
Hammer.js необязательная зависимость которая добавляет поддержку touch-экранов для нескольких компонентов.
2. angular-cli.json
Если вы решили использовать Hammer.js и вы создали свой проект с помощью Angular CLI, добавить библиотеку Hammer.js в файл angular-cli.json. Найдите поле “scripts” и добавьте такую строку
"scripts": [ "../node_modules/hammerjs/hammer.min.js" ],
Вам необходимо будет перезапустить ваш локальный сервер, чтобы изменения в angular-cli.json вступили в силу.
3. Кастомный Material модуль
До Angular Material 2 Beta 3, существовал глобальный модуль MaterialModule который мог был импортирован в приложения чтобы сделать компоненты доступными. Негативной стороной такого похода было то что tree-shaking не настолько эффективен чтобы удалить весь неиспользуемый код.
поэтому MaterialModule был объявлен устаревшим в в пользу определения специфичного для проекта material модуля, в котором импортируются и экспортируются только нужные компоненты. Ниже приведен пример такого модуля:
import { NgModule } from '@angular/core'; import { MatButtonModule, MatMenuModule, MatToolbarModule, MatIconModule, MatCardModule } from '@angular/material'; @NgModule({ imports: [ MatButtonModule, MatMenuModule, MatToolbarModule, MatIconModule, MatCardModule ], exports: [ MatButtonModule, MatMenuModule, MatToolbarModule, MatIconModule, MatCardModule ] }) export class MaterialModule {}
4. Добавьте Angular Material в ваш app модуль
Импортируйте MaterialModule и добавьте его в свои импорты. Также вам нужно импортировать необходимые анимации для вашего модуля. Ваш app.module.ts должен выглядеть примерно так
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { MaterialModule } from './material.module'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, HttpModule, MaterialModule, BrowserAnimationsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
5. Импортируйте собранную тему и Material icons
Существует несколько готовых тем которые устанавливаются автоматически с Angular Material. Они устанавливают базовые стили и цвета. Доступны такие темы: indigo-pink, deeppurple-amber, purple-green и pink-bluegrey
Чтобы импортировать тему, добавьте импорт в ваш глобальный styles.css файл
@import '~@angular/material/prebuilt-themes/indigo-pink.css';
Также вы можете получить доступ к Material Design иконкам и использовать именованные иконки с помощью компонента . Для импорта их в проект, добавьте следующую строку в секцию head кореневого index.html файла
6. Angular Material готов к использованию
Теперь вы готовы приступить к использованию доступных компонентов Material Design в ваших шаблонах. Вот пример разметки для шаблона приложения:
<div> <mat-toolbar color="primary"> <span><mat-icon>mood</mat-icon></span> <span>Yay, Material in Angular 2!</span> <button mat-icon-button [mat-menu-trigger-for]="menu"> <mat-icon>more_vert</mat-icon> </button> </mat-toolbar> <mat-menu x-position="before" #menu="matMenu"> <button mat-menu-item>Option 1</button> <button mat-menu-item>Option 2</button> </mat-menu> <mat-card> <button mat-button>All</button> <button mat-raised-button>Of</button> <button mat-raised-button color="primary">The</button> <button mat-raised-button color="accent">Buttons</button> </mat-card> <span class="done"> <button mat-fab> <mat-icon>check circle</mat-icon> </button> </span> </div>
Ресурсы для дальнейшего изучения
Angular Material 2 Quick Reference
Angular Material: Creating a Custom Theme
Dialogs With Angular Materia
Пример приложения
Демо https://material2-app.firebaseapp.com/
Репозиторий GitHub https://github.com/jelbourn/material2-app