如何使用 FlexLayout 在另一个垫卡上显示垫卡答案

【问题标题】：How to show mat-card on top of another mat-card using FlexLayout如何使用 FlexLayout 在另一个垫卡上显示垫卡
【发布时间】：2020-11-23 14:12:13
【问题描述】：

我已经使用 flexLayout 展示了 mat-card，如下所示。

上图中结构的代码块

<mat-card>
 <mat-card-content>
  <div fxLayout="row" fxLayoutAlign="space-evenly centre">
   <div fxFlex="40">
      {{UserName}}
   </div>
   <div fxFlex="60">
     <div fxLayout="row" fxLayoutAlign="space-evenly centre">
        <div fxFlex="60>
           <button>{{add_btn}}</button>
        </div>
        <div fxFlex="40">
          <button>{{delete_btn}}</button>
        </div>
     </div>
   </div>
  </div>
 </mat-card-content>
</mat-card>

现在我想在悬停“删除”按钮时显示具有“软删除”和“硬删除”两个按钮的卡片。我已经将 Flexlayout 用于响应式 UI。我现在面临的问题是。我已经在 fxFlex="40" 中编写了悬停代码块。由于 SoftDelete 和 HardDelete 按钮显示为已包装。所以请帮我实现这个 UI。

<mat-card>
 <mat-card-content>
  <div fxLayout="row" fxLayoutAlign="space-evenly centre">
   <div fxFlex="40">
      {{UserName}}
   </div>
   <div fxFlex="60">
     <div fxLayout="row" fxLayoutAlign="space-evenly centre">
        <div fxFlex="60>
           <button>{{add_btn}}</button>
        </div>
        <div fxFlex="40">
          <button (mouseover)="showcards()">{{delete}}</button>
          <mat-card-content *ngIf="isTrue">
                  <div fxLayout="column">
                     <div fxFlex="50">
                          <button>{{softdelete_btn}}</button> 
                     </div>
                     <div fxFlex="50">
                          <button>{{harddelete_btn}}</button> 
                     </div>                  
                  </div>
          </mat-card-content>
        </div>
     </div>
   </div>
  </div>
 </mat-card-content>
</mat-card>

【问题讨论】：

标签： angular angular-material angular-flex-layout

【解决方案1】：

我使用了(click) 事件而不是(mouseover)。它将更适合您的布局，因为每当您单击软删除按钮并隐藏较小的卡片时，鼠标将保持悬停在主删除按钮上并重新触发鼠标悬停事件。

<style>
    .card {
        box-shadow: 0 10px 8px 0 rgba(0, 0, 0, 0.2);
        width: 100%;
        padding: 10px;
    }
</style>

<mat-card>
    <mat-card-content>
        <div fxLayout="row" fxLayoutAlign="space-evenly center">
            <div fxFlex="40">
                Username
            </div>
            <div fxFlex="60">
                <div fxLayoutAlign="space-evenly center">
                    <div fxFlex="60">
                        <button mat-raised-button color="primary">Add</button>
                    </div>
                    <div fxFlex="40">
                        <button *ngIf="!isTrue" (click)="showcards()" mat-raised-button color="primary">Delete</button>
                        <div *ngIf="isTrue" class="card" fxLayout="column" fxLayoutGap="50px" fxLayoutAlign="space-between center">
                            <div fxFlex="50">
                                <button mat-raised-button color="primary" (click)="showcards()">Soft Delete</button>
                            </div>
                            <div fxFlex="50">
                                <button mat-raised-button color="primary" (click)="showcards()">Hard Delete</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </mat-card-content>
</mat-card>

这里有一个Stackblitz 。

【讨论】：