Как использовать Material Design в Angular 6

От автора: Angular развивается на протяжении многих лет, и в каждую версию постоянно добавляются новые захватывающие функции. Одно из усовершенствований введено в Material Design, который поставляется с новыми компонентами. В этом руководстве мы рассмотрим сам Angular Material Design и то, как включить его в проекты Angular 6.

Что такое Material Design?

Material Design — это язык дизайна для веб- и мобильных приложений, который был разработан Google в 2014 году. Material Design упрощает разработчикам настройку UI, сохраняя при этом удобный интерфейс приложений. С Material Design вы получаете хорошо организованный формат и гибкость, чтобы выразить свой бренд и стиль.

Если вы хотите получить представление о Material Design, ознакомьтесь с дизайном домашней страницы Houzz, которые в 2016 году выиграли награду Google Play. Это приложение использует Material Design, чтобы реализовать многочисленные функции в ограниченном пространстве мобильных устройств. Это дает хороший опыт для пользователей, позволяя им просматривать и перемещаться по приложению, не чувствуя себя перегруженным. Это действительно одно из лучших приложений Material Design.

Введение в Angular Material

Angular Material состоит из набора предустановленных компонентов Angular. В отличие от Bootstrap, предоставляющего компоненты, которые вы можете использовать любым способом, Anglate Material стремится обеспечить расширенный и последовательный пользовательский интерфейс. В то же время он дает возможность контролировать, как ведут себя разные компоненты.

Также, как Angular, Angular Material значительно изменился с момента его первоначального выпуска.

Как добавить Angular Material в ваш проект

Чтобы добавить в проект Angular Material, мы будем использовать команду ng add. Эта команда является новой функцией в Angular 6, она очень проста:

ng add @angular/material

Эта команда добавит библиотеку в существующий проект, а также тему CSS в angular.json. Она также добавит скрипты в index.html и обновит AppModule.

Еще одна функция в Angular 6 — ng add, которая обновляет зависимости npm при выпуске новой версии. Она также обновляет код RxJS и код Material Design, чтобы использовать преимущества новых API.

Зависимости и компоненты

Angular Material состоит из нескольких элементов, которые относятся к следующим категориям:

Вы можете сгенерировать стартовые компоненты с помощью команды ng update. Через эту команду доступны некоторые схемы:

Эти схемы можно легко установить с помощью команды ng generate следующим образом:

Построение Angular 6 Material приложения

Для начала вам понадобится Angular CLI. Если у вас нет Angular CLI, просто установите его, выполнив следующую команду.

npm install -g @angular/cli

Затем вам нужно будет инициализировать новый проект Angular. Для этого введите следующую команду, где Material-ng — это имя проекта Angular.

ng new Material-ng

Эта команда создаст несколько файлов шаблонов Angular для вашего проекта и установит необходимые стартовые зависимости. Зайдите в каталог проекта и добавьте в свой проект Angular Material.

cd MaterialApp
ng add @angular/material

Затем добавьте некоторые компоненты, общие для многих приложений, например, панель навигации.

Добавление панели навигации

Чтобы добавить панель навигации, просто введите:

ng generate @angular/material:material-nav --name myNav

Эта команда добавляет сворачиваемую боковую панель навигации и компонент выдвижного блока. Вы должны получить следующий результат: четыре файла, а именно my-nav.component.css, my-nav.component.html, my-nav.component.spec.ts и my-nav.component.ts

CREATE src/app/my-nav/my-nav.component.css (129 bytes)
CREATE src/app/my-nav/my-nav.component.html (958 bytes)
CREATE src/app/my-nav/my-nav.component.spec.ts (699 bytes)
CREATE src/app/my-nav/my-nav.component.ts (580 bytes)
UPDATE src/app/app.module.ts (795 bytes)

Теперь откройте my-nav.component.html, вы увидите весь код HTML для панели навигации, которая была сгенерирована для вас.

<mat-sidenav-container class="sidenav-container"> <mat-sidenav #drawer class="sidenav" fixedInViewport="true" [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="!(isHandset$ | async)"> <mat-toolbar color="primary">Menu</mat-toolbar> <mat-nav-list> <a mat-list-item href="#">Link 1</a> <a mat-list-item href="#">Link 2</a> <a mat-list-item href="#">Link 3</a> </mat-nav-list> </mat-sidenav> <mat-sidenav-content> <mat-toolbar color="primary"> <button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()" *ngIf="isHandset$ | async"> <mat-icon aria-label="Side nav toggle icon">menu</mat-icon> </button> <span>Material-ng</span> </mat-toolbar> <!-- Add Content Here --> </mat-sidenav-content>
</mat-sidenav-container>

По умолчанию стартовый проект Angular будет обслуживать страницу по умолчанию, но мы хотим увидеть магию Material Design! Чтобы использовать созданный компонент Nav Design Material Design, откройте app.component.html и замените весь код на:

<my-nav></my-nav>

Теперь, когда вы запустите приложение, вы увидите панель навигации. Вы также должны увидеть, что добавленный компонент навигации был импортирован в основной модуль, как показано ниже:

#app.module.ts import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core'; import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { MyNavComponent } from './my-nav/my-nav.component';
import { LayoutModule } from '@angular/cdk/layout';
import { MatToolbarModule, MatButtonModule, MatSidenavModule, MatIconModule, MatListModule } from '@angular/material'; @NgModule({ declarations: [ AppComponent, MyNavComponent ], imports: [ BrowserModule, BrowserAnimationsModule, LayoutModule, MatToolbarModule, MatButtonModule, MatSidenavModule, MatIconModule, MatListModule ], providers: [], bootstrap: [AppComponent]
})
export class AppModule { }

В my-nav.component.html внесите несколько изменений в списки меню:

<mat-toolbar color="primary">Home</mat-toolbar> <mat-nav-list> <a mat-list-item href="#">Form controls</a> <a mat-list-item href="#">Navigation</a> <a mat-list-item href="#">Layout</a> <a mat-list-item href="#">Buttons and Indicators</a> <a mat-list-item href="#">Popups & Modals</a> <a mat-list-item href="#">Data table</a> </mat-nav-list>

Теперь вы можете запустить сервер разработки:

ng server-open

Результат должен выглядеть так:

Как вы можете видеть, Angular Material обеспечивает простой доступ к вашему приложению. С помощью всего нескольких команд и нескольких строк кода мы смогли включить Material Design в свое приложение Angular! Посетите наш репозиторий GitHub, чтобы получить полный исходный код этого примера.

Заключение

Я надеюсь, что эта статья помогла вам понять, как использовать Material Design в своем приложении. Для получения дополнительной информации о Material Design в Angular 6, ознакомьтесь с официальной документацией, содержащей готовые шаблоны. Это отличное место, чтобы узнать об Angular больше.

Автор: Esther Vaati

Источник: https://code.tutsplus.com/

Редакция: Команда webformyself.