Использование компонента Material Drawer в приложении Angular - PullRequest
Новая
       34

Использование компонента Material Drawer в приложении Angular

0 голосов
/ 24 апреля 2020

Как интегрировать компонент "Ящик материала" в приложение Angular? Я не могу заставить его правильно отрендериться, используя инструкции в https://material.io/develop/web/components/drawers/

Может ли кто-нибудь предоставить пошаговые инструкции, чтобы заставить работать md c -drawer, как показано в демонстрации

1 Ответ

0 голосов
/ 24 апреля 2020

вы можете сделать это шаг за шагом.

шаг 1 : - установить angular материал, используя эту команду npm install @angular/material в вашем проекте.

шаг 2 : - добавьте это в свой индекс. html заголовок

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

шаг 3 : - импортируйте следующие модули в ваше приложение .modules.ts или ваш root файл модуля. 

import { MatSidenavModule } from '@angular/material/sidenav';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';

step 4 : - добавьте эти модули в массив imports.

step 5 : - добавьте это в ваш html файл. 

<mat-sidenav-container class="example-container" *ngIf="shouldRun">
  <mat-sidenav #sidenav mode="side" [(opened)]="opened" (opened)="events.push('open!')"
               (closed)="events.push('close!')">
    Sidenav content
  </mat-sidenav>

  <mat-sidenav-content>
    <mat-toolbar color="primary">
      <mat-toolbar-row>
        <mat-icon aria-hidden="false" aria-label="Example home icon" (click)="sidenav.toggle()">menu</mat-icon>
        <span>Custom Toolbar</span>
      </mat-toolbar-row>
    </mat-toolbar>
    <p>Events:</p>
    <div class="example-events">
      <div *ngFor="let e of events">{{e}}</div>
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>

шаг 6 : - добавьте это в свой ts файл. 

events: string[] = [];
opened: boolean;

shouldRun = [/(^|\.)plnkr\.co$/, /(^|\.)stackblitz\.io$/].some(h => h.test(window.location.host));

шаг 7 : - добавьте это в файл компонента css. 

.example-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

шаг 8 : - добавьте это в своем стиле.s css файл. 

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

проверьте рабочая демоверсия

Если у вас все еще есть какие-либо проблемы, сообщите мне.

...