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

Как использовать 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, она очень проста:

Эта команда добавит библиотеку в существующий проект, а также тему 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, просто установите его, выполнив следующую команду.

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

Автор: Esther Vaati

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

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

Метки:

Похожие статьи:

Комментарии Вконтакте: