在 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 使布局为列"，即列二"，以在较小的屏幕尺寸上位于行(一和四)下方?

Angular 1 中的 Angular Material 可以通过指定 "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屋！