От автора: 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, она очень проста:
|
1 |
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 следующим образом:
ng generate @angular/material:material-table —name <component-name>: генерирует компонент, который отображает данные с помощью таблицы данных
ng generate @angular/material:material-nav —name <component-name>: генерирует компонент с боковой панелью навигации и панель инструментов
ng generate @angular/material:material-dashboard —name <component-name>: генерирует компонент, содержащий динамический список сетки карт.
Построение Angular 6 Material приложения
Для начала вам понадобится Angular CLI. Если у вас нет Angular CLI, просто установите его, выполнив следующую команду.
|
1 |
npm install -g @angular/cli |
Затем вам нужно будет инициализировать новый проект Angular. Для этого введите следующую команду, где Material-ng — это имя проекта Angular.
|
1 |
ng new Material-ng |
Эта команда создаст несколько файлов шаблонов Angular для вашего проекта и установит необходимые стартовые зависимости. Зайдите в каталог проекта и добавьте в свой проект Angular Material.
|
1 2 |
cd MaterialApp ng add @angular/material |
Затем добавьте некоторые компоненты, общие для многих приложений, например, панель навигации.
Добавление панели навигации
Чтобы добавить панель навигации, просто введите:
|
1 |
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
|
1 2 3 4 5 |
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 для панели навигации, которая была сгенерирована для вас.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<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 и замените весь код на:
|
1 |
<my-nav></my-nav> |
Теперь, когда вы запустите приложение, вы увидите панель навигации. Вы также должны увидеть, что добавленный компонент навигации был импортирован в основной модуль, как показано ниже:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
#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 внесите несколько изменений в списки меню:
|
1 2 3 4 5 6 7 8 9 |
<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> |
Теперь вы можете запустить сервер разработки:
|
1 |
ng server-open |
Результат должен выглядеть так:
Как вы можете видеть, Angular Material обеспечивает простой доступ к вашему приложению. С помощью всего нескольких команд и нескольких строк кода мы смогли включить Material Design в свое приложение Angular! Посетите наш репозиторий GitHub, чтобы получить полный исходный код этого примера.
Заключение
Я надеюсь, что эта статья помогла вам понять, как использовать Material Design в своем приложении. Для получения дополнительной информации о Material Design в Angular 6, ознакомьтесь с официальной документацией, содержащей готовые шаблоны. Это отличное место, чтобы узнать об Angular больше.
Автор: Esther Vaati
Источник: //code.tutsplus.com/
Редакция: Команда webformyself.
