Как показать мат-карту поверх другой мат-карты с помощью FlexLayout - PullRequest
Новая
       5

Как показать мат-карту поверх другой мат-карты с помощью FlexLayout

0 голосов
/ 03 августа 2020

Я показал мат-карту, используя flexLayout, как показано ниже. Current Working code

Code Block of the structure in the above image


 
   {{UserName}}

Теперь я хотел бы показать карту с двумя кнопками «Мягкое удаление» и «Жесткое удаление» при наведении курсора на кнопку «Удалить». Я использовал Flexlayout для гибкого пользовательского интерфейса. Проблема, с которой я столкнулся сейчас. Я написал блок кода зависания внутри fxFlex = "40". Из-за этого кнопки SoftDelete и HardDelete отображаются как завернутые. поэтому, пожалуйста, помогите мне достичь этого интерфейса. 

<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>

Ожидаемый результат

1 Ответ

0 голосов
/ 03 августа 2020

Я использовал событие (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 .

...