[英]Panel in angular material design
我想使用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>
上面的代码产生下面的模板。 标题和按钮未与模板正确对齐。
我不确定,但可能是您没有导入角度材料的样式(或者您有不同的样式,而不是默认样式)。 尝试将此添加到您的styles.css
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
这里的信息https://material.angular.io/guide/getting-started
还有关于主题的信息: https : //material.angular.io/guide/theming
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.