我想使用 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>
<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>
以上代码生成以下模板。标题和按钮未与模板正确对齐。
最佳答案
我不确定,但可能是您没有导入 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
关于html - Angular Material 设计中的面板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52275129/