web-dev-qa-db-de.com

Responsive Design mit md-Grid-Liste in Winkel 2

Ich betrachte ein grundlegendes Beispiel für md-grid-list in Angular 2.

HTML Quelltext :

<md-grid-list cols="4" rowHeight="100px">
   <md-grid-tile *ngFor="let tile of tiles"
         [colspan]="tile.cols"
         [rowspan]="tile.rows"
         [style.background]="tile.color">
         {{tile.text}}
    </md-grid-tile>
</md-grid-list>

TS-Code: 

export class GridListDynamicExample {
  tiles = [
    {text: 'One', cols: 3, rows: 1, color: 'lightblue'},
    {text: 'Two', cols: 1, rows: 2, color: 'lightgreen'},
    {text: 'Three', cols: 1, rows: 1, color: 'lightpink'},
    {text: 'Four', cols: 2, rows: 1, color: '#DDBDF1'},
  ];
}

Der obige Code führt dazu:  enter image description here Wie kann ich das Layout als "Spalte" erstellen, dh Spalte "Zwei", um die Zeilen (Eins und Vier) bei einer kleineren Bildschirmgröße mit einer HTML-Anweisung oder CSS zu überschreiten?

Winkelmaterial in Winkel 1 hatte die Option, durch Angabe von "md-cols-xs = 1" md-cols-sm = 2 md-cols-md = 4 md-cols-gt-md = 6 zu erreichen. ".

cssangularresponsive-designangular-material2
12
Shruti Agarwal

Your.component.html

<md-card class="sub-category-grid" style="padding:0px;" (window:resize)="onResize($event)"> <md-grid-list cols="{{test}}" rowHeight="1:1"> <md-grid-tile *ngFor="let item of Items"> {{item.title}} </md-grid-tile> </md-grid-list> </md-card> 

Ihre.Komponente.ts

// init this var with the default number of columns test: any = 2; Items: any = [ {title: "title", img_src: "../../../assets/img/-samples/raketa.png", description: "Description" }, {title: "title", img_src: "../../../assets/img/-samples/raketa.png", description: "Description" }, {title: "title", img_src: "../../../assets/img/-samples/raketa.png", description: "Description" }, {title: "title", img_src: "../../../assets/img/-samples/raketa.png", description: "Description" }, {title: "title", img_src: "../../../assets/img/-samples/raketa.png", description: "Description" }, {title: "title", img_src: "../../../assets/img/-samples/raketa.png", description: "Description" }, {title: "title", img_src: "../../../assets/img/-samples/raketa.png", description: "Description" }, {title: "title", img_src: "../../../assets/img/-samples/raketa.png", description: "Description" }, {title: "title", img_src: "../../../assets/img/-samples/raketa.png", description: "Description" } ] constructor() { } ngOnInit() { } onResize(event) { const element = event.target.innerWidth; console.log(element); if (element < 950) { this.test = 2; } if (element > 950) { this.test = 3; } if (element < 750) { this.test = 1; } } 

 11 
user7956520
Sie können Direktive zu Ihrer Komponente hinzufügen und dann die Direktion wie folgt ausführen.
import { Directive, ElementRef, Input, HostListener, Output } from '@angular/core';
import * as _ from  "lodash";
@Directive({ selector: '[myResponsive]' })

export class TestDirective {
  @Input() tiles;

  @HostListener('window:resize', ['$event'])
  onResize(event) {
    if (event.target.innerWidth < 980) {
      _.each(this.tiles, tile => {
        tile.cols = 2;
        tile.rows = 1;
      });
    } else {
      this.tiles = [
        {text: 'One', cols: 3, rows: 1, color: 'lightblue'},
        {text: 'Two', cols: 1, rows: 2, color: 'lightgreen'},
        {text: 'Three', cols: 1, rows: 1, color: 'lightpink'},
        {text: 'Four', cols: 2, rows: 1, color: '#DDBDF1'}
      ];
    }
  }

  constructor(el: ElementRef) {

  }
}

Sie müssen auch Ihre Anweisung zu app.module.ts hinzufügen
import { TestDirective } from "./test.directive";
@NgModule({
  imports: [
      ...
  ],
  declarations: [
     TestDirective
  ]

Und dein HTML sollte so sein
<md-grid-list cols="4" rowHeight="100px">
   <md-grid-tile myResponsive [(tiles)]="tiles" *ngFor="let tile of tiles"
         [colspan]="tile.cols"
         [rowspan]="tile.rows"
         [style.background]="tile.color">
         {{tile.text}}
    </md-grid-tile>
</md-grid-list>

 enter image description here 
 3 
Onurhan Aytac
Wie ich es verstehe, befindet sich der responsive Teil derzeit im Flex-Layout-Projekt. Einige der gängigen Dienstprogramme aus dieser Bibliothek werden in das von Material bereits verwendete angle/cdk verschoben. Das Flex-Layout-Projekt bietet eine Beobachtungsmöglichkeit, die Sie abonnieren können, um Benachrichtigungen zu Haltepunktänderungen zu erhalten - ObservableMedia. Sie können auch den MediaService-Dienst (auch vom Flex-Layout) verwenden, um die Fenstergrößen zu bestätigen.
Daher kann dieser Code so implementiert werden. Bitte beachten Sie, dass ich die Funktion trackBy verwende, um die ursprünglichen Boxen beim Umschalten zu erhalten. 
    export class AppComponent  {
      tiles: Array<Object>;
      public columns = 4;
      private subscription: Subscription;

      tilesBig = [
        {text: 'One', cols: 3, rows: 1, color: 'lightblue', id: 1},
        {text: 'Two', cols: 1, rows: 2, color: 'lightgreen', id: 2},
        {text: 'Three', cols: 1, rows: 1, color: 'lightpink', id: 3},
        {text: 'Four', cols: 2, rows: 1, color: '#DDBDF1', id: 4},
      ];

      tilesSm = [
        {text: 'One', cols: 3, rows: 1, color: 'lightblue', id: 1},
        {text: 'Three', cols: 1, rows: 1, color: 'lightpink', id: 3},
        {text: 'Four', cols: 2, rows: 1, color: '#DDBDF1', id: 4},
        {text: 'Two', cols: 3, rows: 1, color: 'lightgreen', id: 2},
      ];

      constructor(private _media$: ObservableMedia,
                  private mediaService: MediaService) {
        this.subscription = this._media$.subscribe((e: MediaChange) => {
          this.toggle();
        });
      }

      ngOnInit() {
        this.toggle();
      }

      private toggle() {
        const isSmall = this.mediaService.isActive('lt-md');
        this.columns = isSmall ? 3 : 4;
        this.tiles = isSmall ? this.tilesSm : this.tilesBig;
      }

      trackById(index: number, item: any): string { return item['id']; }
    }

Sie können sich code https://stackblitz.com/edit/angular-t325tj?embed=1&file=app/app.component.ts anschauen
 2 
Julia Passynkova
Responsive Design in eckig 4 ​​zu erstellen ist nicht so einfach wie in Bootstrape. Um md-grid-list ansprechbar zu machen oder die Ansicht entsprechend der Gerätebreite ändern zu können, müssen wir die Flex-Layoutbibliothek verwenden 
Um Klarheit darüber zu haben, wie verantwortungsbewusste Dinge funktionieren, klicken Sie unten auf die Links
besuch http://brianflove.com/2017/05/03/responsive-angular/
 demo http://run.plnkr.co/preview/cja10xr7900083b5wx6srd0r6/
 0 
Suhail