如何为离子卡设置切换效果？

Question

我想在 ion-card 上实现切换效果，当我点击卡片时它会突出显示，直到我取消点击它或点击另一张卡片。像这样 -

如何在离子卡上实现这样的效果？

这是我的 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
}
}

如何为离子卡设置切换效果？

How to set a toggle effect to ion-card?

css

angular

ionic-framework

ionic3