我有 Material 网格和菜单。我像工具提示一样使用垫子菜单,下面会有其他网格,每个网格都有这个垫子菜单。当用户单击它时,用户应该看到出现的框和里面的内容。我决定在内部使用 Mat-Grid 但它不像往常一样负责。Mat-grid 由于用户保护其位置的行为而 flex 和收缩。这就是我想要的。但是这里的 mat-grid 并没有变小big mat-grid 会在您更改页面宽度时执行。
StackBlitz 演示:https://stackblitz.com/edit/angular-material-bootstrap-css-zcjddn?file=src/app/app.component.html
这里存在下面的问题(平板电脑,手机等的宽度。不会像外面的网格一样变小)
] 2
最佳答案
HTML:
<mat-grid-list [cols]="breakpoint" rowHeight="2:0.5 (window:resize)="onResize($event)">
<`enter code here`mat-grid-tile>1</mat-grid-tile>
<mat-grid-tile>2</mat-grid-tile>
<mat-grid-tile>3</mat-grid-tile>
<mat-grid-tile>4</mat-grid-tile>
<mat-grid-tile>5</mat-grid-tile>
<mat-grid-tile>6</mat-grid-tile>
</mat-grid-list>
.ts 文件:
ngOnInit() {
this.breakpoint = (window.innerWidth <= 400) ? 1 : 6;
}
onResize(event) {
this.breakpoint = (event.target.innerWidth <= 400) ? 1 : 6;
}
关于css - 如何将垫子菜单内的垫子网格显示为响应式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58340433/