有角材料設計的面板

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

我不確定，但可能是您沒有導入角度材料的樣式（或者您有不同的樣式，而不是默認樣式）。 嘗試將此添加到您的styles.css

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

這里的信息https://material.angular.io/guide/getting-started

還有關於主題的信息： https : //material.angular.io/guide/theming