在angular 2中使用md-grid-list进行响应式设计 [英] Responsive Design using md-grid-list in angular 2

问题描述

我正在查看Angular 2中的 md-grid-list 的基本示例.

I am looking at basic example of md-grid-list in Angular 2.

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>

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

上面的代码导致: 如何使用HTML指令或CSS将布局设置为第二列"，使其在较小屏幕尺寸的行(一列和四列)下方?

The above code results in this : How can I make the layout as "column" that is column "Two" to go below the rows(One and Four) on smaller screen size using some HTML directive or CSS?

Angular 1中的Angular材质可以通过指定"md-cols-xs =" 1"md-cols-sm =" 2"md-cols-md =" 4"md-cols-gt-md =来实现"6".

Angular Material in Angular 1 had option to achieve by specifying "md-cols-xs="1" md-cols-sm="2" md-cols-md="4" md-cols-gt-md="6" ".

推荐答案

这是最简单的方法:)

This is the simplest Way you can achive that :)

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

这篇关于在angular 2中使用md-grid-list进行响应式设计的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！