CODEWITHSUNDEEP
cssangularionic-frameworkionic3
Keyur Hardas
Keyur Hardas

Reputation: 53

How to set a toggle effect to ion-card?

I want to achieve a toggle effect on ion-card where when i click on the card it will be highlighted until i unclick it or click on a different card. Like this -

enter image description here

how can i achieve such effect on ion-card?

here is my 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>

Here is my Page's 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;
   }

}

I have tried using .card.activated but it doesn't seem to be working. I want to add a border or just change the shadow colour to blue as per the image to show that the user have selected the card.

Upvotes: 0

Views: 1508

Answers (2)

Nikunj Munjiyasara
Nikunj Munjiyasara

Reputation: 674

Using below code you can deselect card of the selected card:

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

Upvotes: 1

Nikunj Munjiyasara
Nikunj Munjiyasara

Reputation: 674

Update your HTML code as below: 

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

And Add below code in your ts file:

First take one variable with name selectedCard = 0

and Add below method to change selectedCard

onClickCard(ind){
this.selectedCard = ind
}

Than add below code in your CSS file: 

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

Try above code if it is working then change CSS as per your requirement.

Upvotes: 1

Related Questions