创建响应式仪表板 - Angular

Question

我正在尝试使用以下布局创建仪表板：

我正在使用 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>

谢谢

Answer 1

安装 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'];

Answer 2

我假设您也在使用 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>

创建响应式仪表板 - Angular

Create a responsive dashboard - Angular

angular

mat-card