如何為離子卡設置切換效果？

Question

我想在離子卡上實現切換效果，當我單擊卡時，它將突出顯示，直到我取消單擊它或單擊另一張卡。 像這樣 -

我怎樣才能在離子卡上達到這樣的效果？

這是我的 HTML -

<ion-grid>
    <ion-row>
      <ion-col>
        <ion-card (click)="showDetails()">
          <ion-card-content>
            <ion-label class="header">Aluminium</ion-label>
            <ion-label class="month">June 300MT</ion-label>
            <ion-label class="month">May 250MT</ion-label>
            <ion-label class="month">April 300MT</ion-label>
          </ion-card-content>
        </ion-card>
      </ion-col>
      <ion-col>
        <ion-card>
          <ion-card-content>

            <ion-label class="header">Nickle</ion-label>
            <ion-label class="month">June 300MT</ion-label>
            <ion-label class="month">May 250MT</ion-label>
            <ion-label class="month">April 300MT</ion-label>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <ion-card>
          <ion-card-content>
            <ion-label class="header">Copper</ion-label>
            <ion-label class="month">June 300MT</ion-label>
            <ion-label class="month">May 250MT</ion-label>
            <ion-label class="month">April 300MT</ion-label>
          </ion-card-content>
        </ion-card>
      </ion-col>
      <ion-col>
        <ion-card>
          <ion-card-content>
            <ion-label class="header">Alumina</ion-label>
            <ion-label class="month">June 300MT</ion-label>
            <ion-label class="month">May 250MT</ion-label>
            <ion-label class="month">April 300MT</ion-label>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>

這是我的頁面的 CSS -

page-crm {
    .dx-texteditor.dx-editor-outlined {
        background: #fff;
        border: 1px solid #ddd !important;
        border-radius: 4px;
        font-weight: 600;
        font-size: 16px !important;
        margin-bottom: 10px;
    }

    .header{
        font-weight: 700;
        font-size: 20px !important;
        color: #4D4D4D !important;
    }
    .month{
        color: #808080 !important;
        font-weight: 500;
        margin: 5px;
    }
    .card-content{
        padding-top: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
        padding-left: 10px;
    }
   .card{
    box-shadow: 0px 2px 10px #cccccc !important;
   }
   .listContainer{
    box-shadow: 0px 2px 10px #cccccc !important;
   }

}

我曾嘗試使用.card.activated但它似乎沒有工作。 我想添加一個邊框，或者只是根據圖像將陰影顏色更改為藍色，以表明用戶已經選擇了卡片。

Answer 1

更新您的 HTML 代碼如下：

<ion-row>
  <ion-col>
    <ion-card (click)="onClickCard(1)" [class.active]="selectedCard == 1">
      <ion-card-content>
        <ion-label class="header">Aluminium</ion-label>
        <ion-label class="month">June 300MT</ion-label>
        <ion-label class="month">May 250MT</ion-label>
        <ion-label class="month">April 300MT</ion-label>
      </ion-card-content>
    </ion-card>
  </ion-col>
  <ion-col>
    <ion-card [class.active]="selectedCard == 2" (click)="onClickCard(2)">
      <ion-card-content>

        <ion-label class="header">Nickle</ion-label>
        <ion-label class="month">June 300MT</ion-label>
        <ion-label class="month">May 250MT</ion-label>
        <ion-label class="month">April 300MT</ion-label>
      </ion-card-content>
    </ion-card>
  </ion-col>
</ion-row>
<ion-row>
  <ion-col>
    <ion-card [class.active]="selectedCard == 3" (click)="onClickCard(3)">
      <ion-card-content>
        <ion-label class="header">Copper</ion-label>
        <ion-label class="month">June 300MT</ion-label>
        <ion-label class="month">May 250MT</ion-label>
        <ion-label class="month">April 300MT</ion-label>
      </ion-card-content>
    </ion-card>
  </ion-col>
  <ion-col>
    <ion-card [class.active]="selectedCard == 4" (click)="onClickCard(4)">
      <ion-card-content>
        <ion-label class="header">Alumina</ion-label>
        <ion-label class="month">June 300MT</ion-label>
        <ion-label class="month">May 250MT</ion-label>
        <ion-label class="month">April 300MT</ion-label>
      </ion-card-content>
    </ion-card>
  </ion-col>
</ion-row>

並在您的 ts 文件中添加以下代碼：

首先取一個名為selectedCard = 0的變量

並添加以下方法來更改 selectedCard

onClickCard(ind){
this.selectedCard = ind
}

在您的 CSS 文件中添加以下代碼：

card.active {
border: 1px solid #ddd !important;
}

如果上面的代碼正常工作，請嘗試上面的代碼，然后根據您的要求更改 CSS。

Answer 2

使用以下代碼，您可以取消選擇所選卡的卡：

onClickCard(ind){
if(ind == this.selectedCard){
   this.selectedCard = 0
} else {
  this.selectedCard = ind
}
}