>
>
Перевод руководства Angular material -Get started
Создаем новый проект, используя Angular CLI, или используем существующий.
>
Шаг 1. Установка Angular Material и Angular CDK
Можно использовать один из двух пакетных менеджеров npm или yarn.
NPM
npm install --save @angular/material @angular/cdk
Yarn
yarn add @angular/material @angular/cdk
Шаг 2. Анимация.
Некоторые компоненты Material зависят от модуля Angular animations. Если вы хотите, чтобы эти анимации работали в вашем приложении, вам необходимо установить модуль @angular/animations
и включить в приложение модуль BrowserAnimationsModule
.
npm install --save @angular/animations
import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; @NgModule({ ... imports: [BrowserAnimationsModule], ... }) export class PizzaPartyAppModule { }
Примечание.
@Angular/animations
использует API WebAnimation, который пока не поддерживается всеми браузерами. Если вы хотите поддерживать анимацию Material компонентов в этих браузерах, вам придется включить polyfill
.
Если вы не хотите добавлять другую зависимость в свой проект, вы можете использовать NoopAnimationsModule.
import {NoopAnimationsModule} from '@angular/platform-browser/animations'; @NgModule({ ... imports: [NoopAnimationsModule], ... }) export class PizzaPartyAppModule { }
Шаг 3. Импортируем модули компонентов.
Импортируйте NgModule
для каждого компонента, который вы хотите использовать:
import {MatButtonModule, MatCheckboxModule} from '@angular/material'; @NgModule({ ... imports: [MatButtonModule, MatCheckboxModule], ... }) export class PizzaPartyAppModule { }
Кроме того, вы можете создать отдельный NgModule
, который импортирует все компоненты Angular Material, которые вы будете использовать в своем приложении. Затем вы можете включить этот модуль там, где хотите использовать компоненты.
import {MatButtonModule, MatCheckboxModule} from '@angular/material'; @NgModule({ imports: [MatButtonModule, MatCheckboxModule], exports: [MatButtonModule, MatCheckboxModule], }) export class MyOwnCustomMaterialModule { }
Какой бы подход вы ни использовали, обязательно импортируйте модули Angular Material после модуля BrowserModule, поскольку порядок импорта имеет значение для NgModules
.
>
Шаг 4. Включаем тему.
Включение темы требует применения всех основных и тематических стилей к вашему приложению.
Чтобы начать работу с предварительно созданной темой, включите одну из предварительно созданных тем Angular Material в ваше приложение. Если вы используете Angular CLI, вы можете добавить это в свои styles.css:
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
Если вы не используете Angular CLI, вы можете включить тему в вашем index.html.
Дополнительные сведения о темах и инструкции по созданию настраиваемой темы см. В руководстве по темам.
Шаг 5. Поддержка жестов.
Некоторые компоненты (mat-slide-toggle, mat-slider, matTooltip) используют HammerJS для поддержки жестов. Чтобы получить полный набор этих компонентов, HammerJS должен быть загружен в приложение.
Вы можете добавить HammerJS в свое приложение через npm, CDN (например, CDN Google) или напрямую работать с вашим приложением.
Для установки через npm используйте следующую команду:
NPM
npm install --save hammerjs
Yarn
yarn add hammerjs
После установки импортируйте его в основную точку входа вашего приложения (например src/main.ts
)
import 'hammerjs';
Шаг 6. (Опционально) Добавление иконок Material
Если вы хотите использовать компонент mat-icon с официальными значками Material Design Icons, загрузите шрифт значка в свой index.html.
link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"
Для большей информации по использованию Material Icons, см. Material Icons Guide.
Заметим, что mat-icon поддерживает любой иконочный шрифт svg; Использование Material Icons это однин из возможных вариантов.
>
Приложение. Конфигурируем SystemJS
Если ваш проект использует SystemJS для загрузки модулей, вам необходимо добавить @angular/material
и @angular/cdk
в конфигурацию SystemJS.
Пакет @angular/cdk
содержит несколько точек входа. Каждая из этих точек входа должна быть зарегистрирована индивидуально с помощью SystemJS.
Вот пример конфигурации, в которой используются @angular/material
, @angular/cdk/platform
и @angular/cdk/a11y
:
System.config({ // Опции существующей конфигурации map: { // ... '@angular/material': 'npm:@angular/material/bundles/material.umd.js', // Индивидуальные пакеты CDK '@angular/cdk/platform': 'npm:@angular/cdk/bundles/cdk-platform.umd.js', '@angular/cdk/a11y': 'npm:@angular/cdk/bundles/cdk-a11y.umd.js', // ... } });