在角材料中显示多个网格 [英] 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 个，则将它们显示在 2 行中: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 值绑定到列数变量.这是一个 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屋！