Winkel 5 Mat-grid-Liste reagieren

ich erstellt grid-Liste mit den Spalten 6 und ich will grid-Titel nehmen 100% der Breite auf kleinen screen-Geräten. Jetzt schafft es 6 Spalte auf kleinen Bildschirmen als auch

Erwartet:
Eine grid-Titel nimmt 100% der Platz auf dem mobilen Gerät nur

Bitte fügen Sie Ihren code auf Ihre Frage.. sonst ist es schwer zu helfen.

InformationsquelleAutor Somnath Swami | 2018-01-29

  1. 41

    Müssen Sie die cols Attribut des mat-grid-list dynamisch abhängig von der Bildschirmbreite. Sie müssten, um zu entscheiden, auf welcher Breite Haltepunkt wird die mat-grid-list machen die 1-Spalte version.

    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 demo hier

    Hoffe, das hilft!

    Froh, dass es geholfen hat!
    Du bist der Hammer, Mann! Danke!!!

    InformationsquelleAutor Altus

  2. 0

    Großartige Arbeit jeder!

    Machte ich einige weitere Verbesserungen Алексей Сердюков Antwort:

    • aktualisiert für flex-layout 7.0.0+
    • wenn die Größe des Fensters, die Richtlinie unter bestimmten Umständen zurückgegeben die falsche Anzahl

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

    InformationsquelleAutor Maximilian Zellhofer

Schreibe einen Kommentar