在角形材料中显示多个网格 [英] Displaying multiple grids in angular material

问题描述

我正在尝试在页面中显示8个小网格.每个网格都有2列，
4行，每个单元格大约2个单词.

I'm trying to display 8 small grids in a page. Each grid has 2 columns and
4 rows, with about 2 words per cell.

<mat-grid-list cols="2">
            <mat-grid-tile>
                hello world
            </mat-grid-tile>
            <mat-grid-tile>
                hello world
            </mat-grid-tile>
            <mat-grid-tile>
                hello world
            </mat-grid-tile>
            <mat-grid-tile>
                hello world
            </mat-grid-tile>
            <mat-grid-tile>
                hello world
            </mat-grid-tile>
            <mat-grid-tile>
                hello world
            </mat-grid-tile>
            <mat-grid-tile>
                hello world
            </mat-grid-tile>
            <mat-grid-tile>
                hello world
            </mat-grid-tile>
        </mat-grid-list>

我对如何以令人愉悦的风格进行布置的其他建议持开放态度，但我当时的想法是:

I am opened to other suggestions on how to arrange them in a pleasing style, but what I was thinking was:

• 如果有足够的空间在一行中容纳4个，则在两行中显示它们:4 + 4
• 否则，如果有足够的空间在一行中容纳3个，则将它们显示在3行中:3 + 3 + 2
• 否则，如果有足够的空间在一行中容纳2个，则将其显示在4行上:2 + 2 + 2 + 2
• 否则将它们显示在8行上

我真的不知道该怎么做，这种设置和条件的正确方法是什么?

I don't really know how to do that, what would be the correct approach for this setup and conditionals ?

我什至无法在一行上显示2个网格，看来默认情况下，一个网格会占用所有可用的页面宽度.

I can't even manage to display 2 grids on one line, it seems that by default a grid takes all the page width available.

推荐答案

您可以使用FlexLayout模块侦听媒体更改并根据屏幕大小设置列数.然后，将cols值绑定到column number变量. 这是一个Stackblitz示例.

You can use the FlexLayout module to listen to media changes and set the number of columns based on the screen size. Then you bind the cols value to the number of columns variable. Here is a Stackblitz example.

HTML:

<mat-grid-list [cols]="columns" rowHeight="2:1">
  <mat-grid-tile>hello world</mat-grid-tile>
  <mat-grid-tile>hello world</mat-grid-tile>
  <mat-grid-tile>hello world</mat-grid-tile>
  <mat-grid-tile>hello world</mat-grid-tile>
  <mat-grid-tile>hello world</mat-grid-tile>
  <mat-grid-tile>hello world</mat-grid-tile>
  <mat-grid-tile>hello world</mat-grid-tile>
  <mat-grid-tile>hello world</mat-grid-tile>
</mat-grid-list>

TS:

import { Component, OnDestroy } from '@angular/core';
import { MediaChange, ObservableMedia } from '@angular/flex-layout';
import { Subscription } from 'rxjs';

/**
 * @title Flexible grid-list
 */
@Component({
  selector: 'grid-list-flexible-example',
  styleUrls: ['grid-list-flexible-example.css'],
  templateUrl: 'grid-list-flexible-example.html',
})
export class GridListFlexibleExample implements OnDestroy {
  watcher: Subscription;
  columns: number = 4;

  constructor(media: ObservableMedia) {
    this.watcher = media.subscribe((change: MediaChange) => {
      if (change) {
        if (change.mqAlias == 'xs') {
          this.columns = 2;
        } else if (change.mqAlias == 'sm') {
          this.columns = 3;
        } else {
          this.columns = 4;
        }
      }
    });
  }

  ngOnDestroy() {
    this.watcher.unsubscribe();
  }

}

这篇关于在角形材料中显示多个网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！