代码之家 › 专栏 › 技术社区 › Aeseir

行扫描的灵活高度

angular-material

Aeseir · 技术社区 · 7 年前

我试图实现一个基本的网格列表,但是注意到内容的大小通常大于行高。

特别是在这个例子中,卡片的标题是信息。

代码是由仪表板示意图预先生成的,我只是对其进行了调整。

我看了看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>