css - कोणीय 2 में एमडी-ग्रिड-सूची का उपयोग करके उत्तरदायी डिजाइन




angular responsive-design (3)

मैं कांस्यर 2 में एमडी-ग्रिड-सूची का मूल उदाहरण देख रहा हूं I

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>

टीएस कोड:

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

इसके बाद के संस्करण कोड: मैं लेआउट को "कॉलम" के रूप में कैसे बना सकता हूं जो कुछ HTML निर्देश या सीएसएस का उपयोग करते हुए छोटे स्क्रीन आकार पर पंक्तियों (एक और चार) के नीचे जाने के लिए "दो" स्तंभ है?

कोणीय सामग्री में कोणीय सामग्री को "एमडी-कोल्स-एक्सएस =" 1 "एमडी-कोल्स-एसएम =" 2 "एमडी-कोल्स-एमडी =" 4 "एमडी-कोल्स-जीटी-एमडी =" 6 "निर्दिष्ट करके प्राप्त करने का विकल्प था "।


यह सबसे सरल तरीका है जिसे आप प्राप्त कर सकते हैं :)

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>

your.component.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;
    }
  }

आप अपने घटक के निर्देश को जोड़ सकते हैं और फिर इस तरह के निर्देश में काम कर सकते हैं;

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

  }
}

आपको अपने निर्देश को ऐप.मॉड्यूल.ts में जोड़ना होगा

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

और आपका एचटीएमएल इस तरह होना चाहिए

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


जैसा कि मैं समझता हूं कि उत्तरदायी हिस्सा वर्तमान में फ्लेक्स-लेआउट परियोजना में स्थित है इस लाइब्रेरी से कुछ सामान्य उपयोगिताओं को कोणीय / सीडीके में ले जाया जाएगा जो सामग्री पहले ही उपयोग कर रहे हैं। फ्लेक्स-लेआउट प्रोजेक्ट एक अवलोकन प्रदान करता है कि आप ब्रेक पॉइंट बदलावों पर अधिसूचना प्राप्त करने के लिए सदस्यता ले सकते हैं - अवलोकनशील मीडिया आप विंडो आकारों पर जोर देने के लिए मीडिया सेवा सेवा (फ्लेक्स-लेआउट से भी) का उपयोग कर सकते हैं।

इसलिए इस कोड को इस तरह लागू किया जा सकता है। कृपया नोट करें कि टॉगल होने पर मूल बक्से रखने के लिए मैं ट्रैकबैक फ़ंक्शन का उपयोग करता हूं

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

आप कोड को https://stackblitz.com/edit/angular-t325tj?embed=1&file=app/app.component.ts पर देख सकते हैं





angular-material2