Question

我正在尝试实现基本的网格列表，但是注意到内容的大小通常比行高更大。

特别是在此示例中，标题为“信息”的卡。

代码是由仪表板原理图预先生成的，我只是对其进行了调整。

我看着rowHeight =“ fit”，但没什么。

有什么办法可以使行高度动态化？

代码：

<mat-grid-list cols="4">
        <mat-grid-tile [colspan]=1>
            <mat-card class="dashboard-card">
                <mat-card-header>
                    <mat-card-title>
                        Details
                        <button mat-icon-button class="edit-button">
                            <mat-icon>edit</mat-icon>
                        </button>
                    </mat-card-title>
                </mat-card-header>
                <mat-card-content class="dashboard-card-content">
                    <pre>{{ itData| json }}</pre>
                </mat-card-content>
            </mat-card>
        </mat-grid-tile>
        <mat-grid-tile [colspan]=3>
            <mat-card class="dashboard-card">
                <mat-card-header>
                    <mat-card-title>
                        Card 2
                    </mat-card-title>
                </mat-card-header>
                <mat-card-content class="dashboard-card-content">
                    <div>Card Content Here</div>
                </mat-card-content>
            </mat-card>
        </mat-grid-tile>
        <mat-grid-tile [colspan]=4>
            <mat-card class="dashboard-card">
                <mat-card-header>
                    <mat-card-title>
                        Information
                    </mat-card-title>
                </mat-card-header>
                <mat-card-content class="dashboard-card-content">
                    <button mat-raised-button color="primary" (click)="toggleDetails()">{{ show ? 'Add IT' : 'View IT'}}</button>
                    <br>
                    <section *ngIf="!show">
                        <sc-it-new></sc-it-new>
                    </section>
                    <section *ngIf="show">
                        <sc-it-table></sc-it-table>
                    </section>
                </mat-card-content>
            </mat-card>
        </mat-grid-tile>
    </mat-grid-list>

Answer 1

MatGridList不是布局组件。它是一个“网格”组件。 “网格”表示所有列和所有行具有相同的宽度或高度。因此，网格列表的目的是使其所有图块都具有相同的大小。如果要灵活地布置内容，则不是正确的组件选择。

尽管如此，我还是无法做到自己想要的事情。可以动态更改图块的列数或宽高比，但不能仅更改某些行或列。

行跨高度灵活

1 个答案: