В этой статье мы научимся включать "Google Material Design" в проекты Angular.

Что такое материальный дизайн?

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

Введение в угловой материал

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

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

Создайте новый проект Angular (нажмите здесь ↓)



Создайте одностраничный веб-сайт с помощью хостинга Angular и Firebase.
Создайте новый проект Angular с одностраничным веб-сайтом и живым сервером с хостингом Firebase. medium.com



Надеюсь, у вас уже есть проект Angular или вы создали новый проект, перейдя по ссылке выше.

Примечание. Angular Project требуется для добавления материала Angular.

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

Чтобы добавить Angular Material в проект, мы будем использовать команду ng add. Эта команда добавлена ​​в версиях Angular 6+. Чтобы добавить Angular Material, выполните эту команду:

ng add @angular/material

Эта команда внесет в ваш проект следующие изменения:

  1. Добавьте библиотеку (@angular/material) в существующую папку проекта node_modules.
  2. Добавьте CSS темы в файл angular.json.
  3. Он также добавит сценарии в index.html и обновит AppModule

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

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

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

  • Элементы управления формой
  • Кнопки и индикаторы
  • Навигация и верстка
  • Всплывающие окна и модальные окна
  • Таблица данных

Вы можете сгенерировать стартовые компоненты с помощью команды 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 Material, использование схем компонентов

Подробнее обо всех схемах в Angular: https://material.angular.io/guide/schematics#navigation-schematic

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

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

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

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

Теперь откройте файл src / app / menu-sidenav / menu-sidenav.component.html, и вы должны увидеть весь HTML-код для навигации, который был сгенерирован для нас. См. Изображение ниже ↓

Теперь, чтобы увидеть волшебство материального дизайна! откройте app.component.html и замените весь код на:

<app-menu-sidenav></app-menu-sidenav>

Теперь, когда вы запустите приложение, вы увидите панель навигации. Запустите приложение с помощью этой команды:

ng serve –open

Вы можете в любое время отредактировать файл [src / app / menu-sidenav / menu-sidenav.component.html] и внести изменения в свое боковое навигационное меню.

Как видите, Angular Material предоставляет простой способ, с помощью всего нескольких команд и нескольких строк кода, мы смогли включить Material Design в наше приложение Angular!

Выполнено! 🤩 Использовать материальный дизайн в Angular Project так просто.

Увидимся позже 👋👋

Не стесняйтесь комментировать в поле для комментариев ... Если я что-то пропустил, что-то неверно или что-то не работает для вас :)
Оставайтесь на связи, чтобы увидеть больше статей.

Оставайтесь на связи, чтобы увидеть больше статей:
https://medium.com/@AnkitMaheshwariIn

Если вы не против похлопать в ладоши 👏 👏 раз уж это помогло, я буду очень признателен :) Помогите другим найти статью, чтобы она могла им помочь!

Всегда хлопайте в ладоши…

Учить больше



Создайте одностраничный веб-сайт с помощью Node.js и Express.js
Для создания веб-сайта на Node.js мы будем использовать платформу Express.js. Также можно использовать любой другой фреймворк, но Express.js - это… medium.com





Создайте CRUD Rest API с помощью Node и Express.js
Для создания API в Node.js мы будем использовать платформу Express.js. Также можно использовать любой другой фреймворк, но Express.js очень… medium.com





Все, что вам нужно знать об Angular framework / TypeScript.
Полная серия Angular - Что такое Angular / TypeScript? | Зачем нам нужен Angular? | Преимущества использования Angular? |… medium.com



Примечание из JavaScript на простом английском:

Мы всегда заинтересованы в продвижении качественного контента. Если у вас есть статья, которую вы хотели бы отправить в JavaScript In Plain English, отправьте нам электронное письмо по адресу [email protected] с вашим именем пользователя Medium, и мы добавим вас в качестве автора. Также мы выпустили три новых издания! Проявите любовь к нашим новым публикациям, подписавшись на них: AI на простом английском, UX на простом английском, Python на простом английском - спасибо и продолжайте учиться!