html - Angular Material 设计中的面板

Question

我想使用 Angular 6 Material Design 创建一个像上面那样的面板。

使用下面的代码

    <mat-card>
        <mat-card-header>
            <div class="col-lg-12">
                <div class="col-lg-9">
                    <h3>{{ pageTitle }}</h3>
                </div>
                <div class="col-lg-3">
                    <button mat-raised-button color="primary" [disabled]="!form.valid" (click)="form.ngSubmit.emit()">Save</button>
                    &nbsp;&nbsp;
                    <button type="reset" mat-raised-button color="accent" (click)="cancelForm()">Cancel</button>
                </div>
            </div>
        </mat-card-header>
        <mat-progress-bar mode="indeterminate" *ngIf="progress"></mat-progress-bar>
        <mat-divider></mat-divider>
        <mat-card-content>

            <mat-form-field>
<input matInput placeholder="Name [(ngModel)]="vehicleMakeViewModel.name" name="name" required #name="ngModel"></mat-form-field>
        </mat-card-content>

    </mat-card>

以上代码生成以下模板。标题和按钮未与模板正确对齐。

Answer 1

我不确定，但可能是您没有导入 Angular Material 的样式(或者您有不同的样式，而不是默认样式)。尝试将其添加到您的 styles.css

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

信息在这里 https://material.angular.io/guide/getting-started

还有关于主题的信息: https://material.angular.io/guide/theming