Angular Material на русском

class="so-widget-sow-editor so-widget-sow-editor-base"

>

Перевод руководства Angular material -Get started

Создаем новый проект, используя Angular CLI, или используем существующий.

 

class="so-widget-sow-editor so-widget-sow-editor-base"

>

Шаг 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.

class="so-widget-sow-editor so-widget-sow-editor-base"

>

Шаг 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 это однин из возможных вариантов.

class="so-widget-sow-editor so-widget-sow-editor-base"

>

Приложение. Конфигурируем 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',
    // ...
  }
});

 

Posted in Ангуляр 2, Документация (переводы) and tagged , .

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *