html - 如何在 Ionic 4 中的 ion-item 上叠加文本

Question

我有一个如下图所示的列表。当我单击每个项目上的加号图标时，我将调用一个 rest api 来更新数据库。当我得到回复时，我想用透明黑色背景覆盖成功文本消息几秒钟，如图所示。

谁能指导我如何实现这一目标？我们可以使用 css 或任何角度材料来实现这一点吗？

下面是代码。

<ion-card *ngFor="let item of items">
    <ion-row>
      <ion-col size="3">
        <ion-img width="80" height="80" [src]="item.imagePath"></ion-img>
      </ion-col>
      <ion-col size="7" >
       <ion-label class="item-name">item.name</ion-label>
       <ion-label class="item-price">item.cost</ion-label>
       <ion-label class="item-date">item.date</ion-label>        
      </ion-col>
      <ion-col size="2">
       <ion-icon class="select-icon" name="add-circle"></ion-icon>
      </ion-col>
    </ion-row>
   </ion-card>

标签： htmlionic4angular9

Answer 1

  add(item) {
    item.showMessage = true;
    setTimeout(() => {
      delete item.showMessage;
    }, 3000);
  }

.success-message {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: none;
    justify-content: center;
    align-items: center;
    background: rgba(00,00,00,0.7);
    z-index: 1;
}

ion-card.showMessage { 
    .success-message {
        display: flex;
    }
}

 <ion-card *ngFor="let item of items" [class.showMessage]="item?.showMessage">
    <div class="success-message">Added to your coupon list.</div>
    <ion-row>
      <ion-col size="3">
        <ion-img width="80" height="80" [src]="item.imagePath"></ion-img>
      </ion-col>
      <ion-col size="7" >
       <ion-label class="item-name">item.name</ion-label>
       <ion-label class="item-price">item.cost</ion-label>
       <ion-label class="item-date">item.date</ion-label>        
      </ion-col>
      <ion-col size="2">
       <ion-icon class="select-icon" name="add-circle" (click)="add(item)"></ion-icon>
      </ion-col>
    </ion-row>
   </ion-card>