创建响应式仪表板 - Angular
Create a responsive dashboard - Angular
我正在尝试使用以下布局创建仪表板:
我正在使用 mat-card 并完成了以下操作:
<mat-card class="outer-card fadeInDown" style="max-width:50%;">
.
.
.
.
.
</mat-card>
<mat-card class="outer-card fadeInDown" style="max-width:50%;">
.
.
.
.
.
</mat-card>
谢谢
安装 npm install --save-dev ng2-charts-schematics.refer link https://www.smashingmagazine.com/2020/07/responsive-dashboard-angular-material-ng2-charts-schematics/
nav.component.html
<mat-nav-list>
<a *ngFor="let item of menuItems" mat-list-item [routerLink]="'/'+item"> {{item | titlecase}} </a>
nav.component.ts
menuItems = ['dashboard', ’sales', 'orders', 'customers', 'products'];
我假设您也在使用 ngx-bootstrap。所以,你可以使用这样的东西:
<div class="row">
<div class="col-6">
<div class="row>
<div class="col-12">
<mat-card><!-- your code --></mat-card>
</div>
</div>
<div class="row>
<div class="col-12">
<mat-card><!-- your code --></mat-card>
</div>
</div>
</div>
<div class="col-6">
<mat-card><!-- your code --></mat-card>
</div>
</div>
我正在尝试使用以下布局创建仪表板:
我正在使用 mat-card 并完成了以下操作:
<mat-card class="outer-card fadeInDown" style="max-width:50%;">
.
.
.
.
.
</mat-card>
<mat-card class="outer-card fadeInDown" style="max-width:50%;">
.
.
.
.
.
</mat-card>
谢谢
安装 npm install --save-dev ng2-charts-schematics.refer link https://www.smashingmagazine.com/2020/07/responsive-dashboard-angular-material-ng2-charts-schematics/
nav.component.html
<mat-nav-list>
<a *ngFor="let item of menuItems" mat-list-item [routerLink]="'/'+item"> {{item | titlecase}} </a>
nav.component.ts
menuItems = ['dashboard', ’sales', 'orders', 'customers', 'products'];
我假设您也在使用 ngx-bootstrap。所以,你可以使用这样的东西:
<div class="row">
<div class="col-6">
<div class="row>
<div class="col-12">
<mat-card><!-- your code --></mat-card>
</div>
</div>
<div class="row>
<div class="col-12">
<mat-card><!-- your code --></mat-card>
</div>
</div>
</div>
<div class="col-6">
<mat-card><!-- your code --></mat-card>
</div>
</div>