angular - 在角材料中显示多个网格
问题描述
我正在尝试在一页中显示 8 个小网格。每个网格有 2 列和
4 行,每个单元格大约 2 个单词。
<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>
我对如何以令人愉悦的方式安排它们的其他建议持开放态度,但我的想法是:
- 如果有足够的空间在一行中容纳 4 个,则将它们显示为 2 行:4+4
- 否则,如果有足够的空间在一行中容纳 3 个,则将它们显示为 3 行:3+3+2
- 否则,如果有足够的空间在一行中容纳 2,则将它们显示为 4 行:2+2+2+2
- 否则将它们显示在 8 行上
我真的不知道该怎么做,这个设置和条件的正确方法是什么?
我什至无法在一行上显示 2 个网格,似乎默认情况下一个网格会占用所有可用的页面宽度。
解决方案
您可以使用 FlexLayout 模块来监听媒体变化并根据屏幕大小设置列数。然后将cols
值绑定到列数变量。这是一个 Stackblitz 示例。
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();
}
}
推荐阅读
- amazon-ec2 - 无法从 Oracle Linux Virtualbox 连接到 AWS centos 实例
- ios - 我如何使用他们的 api 而不是 sdk 快速设置 facebook 重定向 uri
- json - 为什么终端.integrated.shell.windows 路径的 VS 代码出现错误?
- python - 将日期时间序列合并到多索引数据框
- python - 在 Treeview Tkinter 中显示熊猫数据框并更改第一列的宽度
- python - 如何在不循环的情况下找到列表中最接近的值,其中 x > numpy 数组中每个值的值
- deep-learning - Pytorch 如何将深度学习可训练参数分解为两部分?
- ruby - 地图元素不使用 xpath
- php - 如何更新数据库,但前提是进行了更改?
- python-3.x - 如何根据用户输入的第一个字母确定范围?