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. ".

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

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