web-dev-qa-db-ja.com

Angular 5 Mat-grid list responsive

列6のグリッドリストを作成し、小さなスクリーンデバイスで幅100％のグリッドタイトルにしたい。今では小さな画面にも6列を作成します

予想：1つのグリッドタイトルがモバイルデバイスのスペースの100％のみを占める

angularangular-materialangular5
28
Somnath Swami

画面の幅に応じて、mat-grid-listのcols属性を動的に設定する必要があります。 mat-grid-listが1列バージョンをレンダリングする幅ブレークポイントを決定する必要があります。

HTML：

<mat-grid-list [cols]="breakpoint" rowHeight="2:0.5" (window:resize)="onResize($event)">
  <mat-grid-tile>1</mat-grid-tile>
  <mat-grid-tile>2</mat-grid-tile>
  <mat-grid-tile>3</mat-grid-tile>
  <mat-grid-tile>4</mat-grid-tile>
  <mat-grid-tile>5</mat-grid-tile>
  <mat-grid-tile>6</mat-grid-tile>
</mat-grid-list>

TS：

ngOnInit() {
    this.breakpoint = (window.innerWidth <= 400) ? 1 : 6;
}

onResize(event) {
  this.breakpoint = (event.target.innerWidth <= 400) ? 1 : 6;
}

Stackblitzデモはこちら

お役に立てれば！

58
Altus

Altus answer が好きでしたが、ブレークポイントをもっと増やしたいです。そのため、onResizeの代わりにFlexLayout ObservableMediaサービスを使用して、いくつかのブレークポイントを持つ簡単なメソッドを作成しました。

import { AfterContentInit, Component, ViewChild } from '@angular/core';

import { MediaChange, ObservableMedia } from '@angular/flex-layout';
import { MatGridList } from '@angular/material';

@Component({
  selector: 'app-grid',
  templateUrl: './grid.component.html',
  styleUrls: ['./grid.component.css']
})
export class GridComponent implements AfterContentInit {
  @ViewChild('grid') grid: MatGridList;

  gridByBreakpoint = {
    xl: 8,
    lg: 6,
    md: 4,
    sm: 2,
    xs: 1
  }

  constructor(private observableMedia: ObservableMedia) {}

  ngAfterContentInit() {
    this.observableMedia.asObservable().subscribe((change: MediaChange) => {
      this.grid.cols = this.gridByBreakpoint[change.mqAlias];
    });
  }
}
<span>Breakpoint: {{grid.cols}}</span>
<mat-grid-list #grid rowHeight="2:1">
  <mat-grid-tile>1</mat-grid-tile>
  <mat-grid-tile>2</mat-grid-tile>
  <mat-grid-tile>3</mat-grid-tile>
  <mat-grid-tile>4</mat-grid-tile>
  <mat-grid-tile>5</mat-grid-tile>
  <mat-grid-tile>6</mat-grid-tile>
  <mat-grid-tile>7</mat-grid-tile>
  <mat-grid-tile>8</mat-grid-tile>
</mat-grid-list>

https://stackblitz.com/edit/angular-responsive-material-grid-leocaseiro を参照してください

18
Leo Caseiro

再利用可能なソリューションが必要な場合は、次のディレクティブを使用できます。

 
import { Directive, Input, OnInit } from '@angular/core';
import { MatGridList } from '@angular/material';
import { ObservableMedia, MediaChange } from '@angular/flex-layout';

export interface IResponsiveColumnsMap {
  xs?: number;
  sm?: number;
  md?: number;
  lg?: number;
  xl?: number;
}

// Usage: <mat-grid-list [responsiveCols]="{xs: 2, sm: 2, md: 4, lg: 6, xl: 8}">
@Directive({
  selector: '[responsiveCols]'
})
export class ResponsiveColsDirective implements OnInit {
  private countBySize: IResponsiveColumnsMap = {xs: 2, sm: 2, md: 4, lg: 6, xl: 8};

  public get cols(): IResponsiveColumnsMap {
    return this.countBySize;
  }

  @Input('responsiveCols')
  public set cols(map: IResponsiveColumnsMap) {
    if (map && ('object' === (typeof map))) {
      this.countBySize = map;
    }
  }

  public constructor(
    private grid: MatGridList,
    private media: ObservableMedia
  ) {
    this.initializeColsCount();
  }

  public ngOnInit(): void {
    this.initializeColsCount();

    this.media.asObservable()
      .subscribe((changes: MediaChange) => 
        this.grid.cols = this.countBySize[changes.mqAlias]
      );
  }

  private initializeColsCount(): void {
    Object.keys(this.countBySize).some( 
      (mqAlias: string): boolean => {
        const isActive = this.media.isActive(mqAlias);

        if (isActive) {
          this.grid.cols = this.countBySize[mqAlias];
        }

        return isActive;
    });
  }
}
12
Алексей Сердюков

みなさん素晴らしい仕事です！

АлексейСердюковの回答をさらに改善しました。

  • flex-layout 7.0.0+用に更新されました
  • ウィンドウのサイズを変更するときに、状況によってはディレクティブが誤ったカウントを返しました

Gist @ GitHub： https://Gist.github.com/mzellho/7fc7d5bd52a29948c47911a993547dad

0
Maximilian Zellhofer

次のように最初のロードでエラーが発生した場合は、@ Leo Caserioの回答に追加します。

エラー：mat-grid-list：列数で渡す必要があります。例：..​​.

subjectを使用できます：

コンポーネント

@ViewChild('grid',{static:true}) grid: MatGridList;
cols:Subject<any> = new Subject();

constructor(private observableMedia: MediaObserver) { }

ngAfterContentInit() {
    this.observableMedia.asObservable().subscribe((change: MediaChange[]) => {
      this.cols.next(this.gridByBreakpoint[change[0].mqAlias]);
    });
  }

テンプレート

<mat-grid-list #grid [cols]="cols | async"  rowHeight = "1:1">

注： @ angular/flex-layout "：{"バージョン "：" 8.0.0-beta.26 "}

0
Gurkan Yesilyurt