Как отобразить Mat-Card внутри панели расширения Mat внутри основной области содержимого боковой навигации? - PullRequest
Новая
       16

Как отобразить Mat-Card внутри панели расширения Mat внутри основной области содержимого боковой навигации?

0 голосов
/ 29 мая 2018

Угловой 6 Проект с Материальными Компонентами.Это небольшой сайт для внутреннего пользования.Его целью является ссылка на внешние ресурсы.Каждый ресурс представлен картой, которую я хотел бы разбить на панели расширения.однако я не могу достичь желаемого эффекта.

Панель расширения открыта:

Expansion Panel Open

Панель расширения закрыта:

Expansion Panel Closed

Как видно, когда панель расширения открывается и закрывается, она влияет на весь экран.

Компонент приборной панели HTML 

<div class="grid-container">
  <h1 class="mat-h1">Document Management</h1>
  <mat-grid-list cols="6" rowHeight="250px">
    <mat-grid-tile *ngFor="let card of cards" [colspan]="card.cols" [rowspan]="card.rows">
      <mat-card class="dashboard-card">
        <mat-card-header>
          <mat-card-title>
            {{card.title}}
          </mat-card-title>
        </mat-card-header>
        <mat-card-content class="dashboard-card-content">
           <img src="https://www.sketchapp.com/images/app-icon.png">
          <a mat-raised-button color="primary" onClick="window.open('//google.com')">Google</a>
        </mat-card-content>
      </mat-card>
    </mat-grid-tile>
  </mat-grid-list>
</div>

</mat-expansion-panel>

Компонент приборной панели CSS 

.grid-container {
  margin: 20px;
}

.dashboard-card {
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  max-height: 180px;
}

.more-button {
  position: absolute;
  top: 5px;
  right: 10px;
}

.dashboard-card-content {
  text-align: center;
}

Компонент приборной панели TS 

import { Component } from '@angular/core';

@Component({
  selector: 'irgdashboard',
  templateUrl: './irgdashboard.component.html',
  styleUrls: ['./irgdashboard.component.css']
})
export class IRGDashboardComponent {
  cards = [
    { title: 'Card 1', cols: 1, rows: 1 },
    { title: 'Card 2', cols: 1, rows: 1 },
    { title: 'Card 3', cols: 1, rows: 1 },
    { title: 'Card 4', cols: 1, rows: 1 },
    { title: 'Card 5', cols: 1, rows: 1 },
    { title: 'Card 6', cols: 1, rows: 1 },
    { title: 'Card 1', cols: 1, rows: 1 },
    { title: 'Card 2', cols: 1, rows: 1 },
    { title: 'Card 3', cols: 1, rows: 1 },
    { title: 'Card 4', cols: 1, rows: 1 },
    { title: 'Card 5', cols: 1, rows: 1 },
    { title: 'Card 6', cols: 1, rows: 1 },
  ];
}

Компонент боковой навигации HTML 

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav
    #drawer
    class="sidenav"
    fixedInViewport="false"
    [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
    [mode]="(isHandset$ | async) ? 'over' : 'side'"
    [opened]="!(isHandset$ | async)">
    <mat-toolbar color="primary">Menu</mat-toolbar>
    <mat-nav-list>
      <a mat-list-item href="#">Link 1</a>
      <a mat-list-item href="#">Link 2</a>
      <a mat-list-item href="#">Link 3</a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar color="primary">
      <button
        type="button"
        aria-label="Toggle sidenav"
        mat-icon-button
        (click)="drawer.toggle()"
        *ngIf="isHandset$ | async">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
      <span>Forms</span>
    </mat-toolbar>
    <irgdashboard></irgdashboard>
  </mat-sidenav-content>
</mat-sidenav-container>

Компонент боковой навигации CSS 

.sidenav-container {
  height: 100%;
}

.sidenav {
  width: 200px;
  box-shadow: 3px 0 6px rgba(0,0,0,.24);
}

Компонент боковой навигации TS 

import { Component } from '@angular/core';
import { BreakpointObserver, Breakpoints, BreakpointState } from '@angular/cdk/layout';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
  selector: 'irgsidenav',
  templateUrl: './irgsidenav.component.html',
  styleUrls: ['./irgsidenav.component.css']
})
export class IRGSidenavComponent {

isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
    .pipe(map(result => result.matches));

  constructor(private breakpointObserver: BreakpointObserver) {}

  }

Компонент приложения HTML 

<irgsidenav></irgsidenav>

Я только начинаю погружаться в разработкувеб-приложений с Angular, и я думаю, что мне не хватает чего-то простогоПожалуйста, дайте мне знать, если вам нужна дополнительная информация.Любой вклад приветствуется.

1 Ответ

0 голосов
/ 30 мая 2018

Похоже, что ваш элемент irgdashboard является всей основной областью содержимого и содержит только список расширения.Это заставляет высоту приложения следовать за высотой списка расширения, создавая проблему, с которой вы столкнулись.Ваша основная область содержимого должна быть DIV или другим элементом, который постоянно расширяется и занимает всю высоту приложения (под панелью инструментов) (100%).Затем вы добавляете свой список расширения в этот контейнер, и развертывание и свертывание не изменят размеры приложения.

...