Использование библиотеки Material для Angular: компоненты, стилизация

Приложения и сайты сегодня немыслимы без красивого и удобного интерфейса. А создать такой интерфейс с нуля - это очень кропотливая работа. К счастью, есть библиотека Material, которая делает всё это за тебя!

Material - это набор готовых и стильных компонентов для Angular. Она позволяет легко создавать современные сайты и приложения, не вдаваясь в тонкости вёрстки и дизайна. Тебе нужны кнопки, меню, таблицы? Не проблема - всё уже есть в Material!

Установка библиотеки Material

Чтобы начать пользоваться прикольными компонентами из Material, нужно сначала установить эту библиотеку в свой Angular-проект.

Делается это просто, в терминале пишешь команду:

npm install --save @angular/material @angular/cdk

Также нужно подключить стили Material в файл styles.css:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

И импортировать модуль Material в app.module.ts:

import {MatButtonModule} from '@angular/material/button';

@NgModule({
  // ...
  imports: [MatButtonModule, ...],
})

Вот и всё! Теперь можно использовать Material.

Кнопки, карточки и прочие штучки

Давай разберём основные и самые полезные компоненты из Material.

Кнопки

Чтобы добавить кнопку, используй тег <button mat-button>Нажми меня!</button>.

Кнопки можно стилизовать, добавляя классы:

<button mat-raised-button>Кнопка</button> 

<button mat-stroked-button>Кнопка с обводкой</button>

<button mat-flat-button color="primary">Цветная кнопка</button>

Карточки

Карточки создаются компонентом <mat-card>:

<mat-card>
  <mat-card-header>
    <mat-card-title>Карточка</mat-card-title>
  </mat-card-header>
  
  <img mat-card-image src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png">
  
  <mat-card-content>
    Контент карточки 
  </mat-card-content>
</mat-card>

В карточки можно добавлять заголовки, изображения, текст и другие элементы.

Другие компоненты

Ещё в Material есть:

Поля ввода - <mat-form-field>
Выпадающие списки - <mat-select>
Таблицы - <mat-table>
и многое другое!

Кастомизация компонентов

Компоненты Material отлично выглядят по умолчанию. Но что если тебе нужно изменить цвета, размеры или ещё что-то под свой дизайн? Не беда, Material легко кастомизировать!

Например, чтобы поменять цвет кнопки, можно переопределить CSS-класс:

.mat-raised-button {
  background-color: blue; 
  color: white;
}

А чтобы изменить размер поля ввода:

.mat-form-field {
  width: 400px;
}

Все стили компонентов описаны в документации, там можно найти что поменять.

Советы по использованию Material

Вот несколько советов, чтобы использовать Material максимально эффективно:

Пользуйся темами - это поможет сохранить единый стиль в приложении.
Изучи демки - на официальном сайте есть демо-примеры со всеми компонентами.
Читай документацию - там подробно описано как правильно использовать компоненты.
Не изобретай велосипед - если нужен слайдер, аккордеон и т.п., скорее всего это уже есть в Material.
И главное - практикуйся! Чем больше будешь использовать Material, тем проще он тебе будет даваться.

Заключение

Итак, мы разобрались что такое библиотека Material и как её можно применять в Angular. Главные преимущества Material:

Готовые и красивые компоненты для создания интерфейса
Простота в использовании
Возможность гибкой настройки под себя

Если хочешь быстро создавать крутые приложения - обязательно изучи Material для Angular! А самое главное - практикуйся и экспериментируй, тогда ты быстро освоишь эту библиотеку. Удачи!