[英]How to show mat-grid inside mat-menu as responsive
我有材料網格和菜單。我使用類似工具提示的墊子菜單,下面會有其他網格,每個網格都有這個墊子菜單。當用戶單擊它時,用戶應該看到出現的框和里面的內容。我決定使用墊子-網格在里面,但它不像往常一樣負責。由於用戶保護其 position 的行為,Mat-grid 會彎曲和收縮。這就是我想要的。但是這里的 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;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.