web-dev-qa-db-fra.com

Conception réactive utilisant md-grid-list dans Angular 2

Je regarde un exemple de base de md-grid-list dans Angular 2.

Code HTML :

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

Code TS: 

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'},
  ];
}

Le code ci-dessus donne ceci:  enter image description here Comment puis-je faire la mise en page comme "colonne" qui est la colonne "Deux" pour aller au-dessous des lignes (Un et Quatre) sur une plus petite taille d'écran en utilisant une directive HTML ou CSS?

Le matériau angulaire dans Angular 1 avait l’option à réaliser en spécifiant "md-cols-xs =" 1 "md-cols-sm =" 2 "md-cols-md =" ​​4 "md-cols-gt-md =" ​​6 " ".

cssangularresponsive-designangular-material2
12
Shruti Agarwal

Vous pouvez ajouter une directive à votre composant, puis effectuer le travail dans la directive comme ceci;

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) {

  }
}

Vous devez également ajouter votre directive à app.module.ts

import { TestDirective } from "./test.directive";
@NgModule({
  imports: [
      ...
  ],
  declarations: [
     TestDirective
  ]

Et votre HTML devrait être comme ça

<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

Si je comprends bien, la partie réactive se trouve actuellement dans un projet de mise en page flexible. Certains des utilitaires communs de cette bibliothèque seront déplacés vers angular/cdk que le matériel utilise déjà. Le projet de mise en page Flex fournit une observable à laquelle vous pouvez vous abonner pour recevoir des notifications sur les changements de points d'arrêt - ObservableMedia. Vous pouvez également utiliser le service MediaService (également de flex-layout) pour définir les tailles de fenêtre.

Par conséquent, ce code peut être implémenté comme ça. Veuillez noter que j'utilise la fonction trackBy pour conserver les cases d'origine lorsque la bascule est activée. 

    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']; }
    }

Vous pouvez consulter le code https://stackblitz.com/edit/angular-t325tj?embed=1&file=app/app.component.ts

2
Julia Passynkova

Rendre responsive design dans Angular 4 n’est pas aussi simple que dans bootstrape. Pour que md-grid-list soit réactif ou doive changer de vue en fonction de la largeur du périphérique, nous devons utiliser la bibliothèque de dispositions flex 

Pour avoir la clarté sur la façon dont les choses réagissent dans une visite angulaire, cliquez sur les liens ci-dessous.

visiter http://brianflove.com/2017/05/03/responsive-angular/
demo http://run.plnkr.co/preview/cja10xr7900083b5wx6srd0r6/

0
Suhail