更改按钮的背景颜色onclick

Question

我有两个按钮 YES 和 NO，它们的颜色 (i,e background-color) 是这样的：

When the user click YES

YES 按钮背景颜色应更改为绿色（即成功），NO 应为浅色，如下所示：

When the user click No

NO 按钮背景颜色应更改为红色（即危险），Yes 应为浅色，如下所示：

DEMO

我在网上冲浪时看到了这个。在这里，他们只更改按钮上 click 的颜色。但是根据我的要求，按钮颜色应该在 click 时改变。

代码

HTML

<ion-content padding>
  <ion-item lines="none">
  <ion-button class="btn-1" expand="full" color="light" >Yes</ion-button>
   <ion-button class="btn-2" expand="full"  color="light" >No</ion-button> 
  </ion-item>
</ion-content>

CSS

.btn-1{
width:45%;
float:left;
padding:0px 5px 0px 5px;
margin-bottom:20px;
}
.btn-2{
width:45%;
float:right;
padding:0px 5px 0px 5px;
margin-bottom:20px;
}

TS

 import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.css'],
})
export class HomePage {

}

Answer 1

这样试试：

TS:

isYesClicked:boolean = false
isNoClicked:boolean = false

HTML:

<ion-button class="btn-1" expand="full" (click)="isYesClicked=true;isNoClicked=false" [color]="isYesClicked?'success':'light'"  >Yes</ion-button>


<ion-button class="btn-2" expand="full"  color="light" (click)="isYesClicked=false;isNoClicked=true" [color]="isNoClicked?'danger':'light'">No</ion-button>

Answer 2

3 个值意味着您不能使用布尔值。但是你可以使用一个数字：

buttonValue = 0;

<ion-button class="btn-1" expand="full" [color]="buttonValue > 0 ? 'success' : 'light'" (click)="buttonValue = 1">Yes</ion-button>
<ion-button class="btn-2" expand="full" [color]="buttonValue < 0 ? 'danger' : 'light'" (click)="buttonValue = -1">No</ion-button>

Answer 3

您可以像这样 ngClass 在点击时添加 class

<ion-content padding>
  <ion-item lines="none">
    <ion-button
      [ngClass]="yesButtonTriggered ? 'greenButton': 'light'"
      (click)="yesButton()"
      class="btn-1"
      expand="full"
      color="light"
    >Yes</ion-button>
    <ion-button
      [ngClass]="noButtonTriggered ? 'redButton': 'light'"
      (click)="noButton()"
      class="btn-2"
      expand="full"
      color="light"
    >No</ion-button>
  </ion-item>
</ion-content>

并且在你的 TS

  yesButtonTriggered = false;
  noButtonTriggered = false;

  yesButton() {
    // do your stuff
    this.yesButtonTriggered = true;
    this.noButtonTriggered = false;
  }

  noButton() {
    // do your stuff
    this.noButtonTriggered = true;
    this.yesButtonTriggered = false;
  }

Answer 4

在这里你可以试试这个代码或者按照这个 link stackblitz:

编辑您的模板home.page.html

<ion-button (click)="activeNow('green')" class="btn-1" expand="full" [color]="(selectItem==='green')? 'success':'light'" >Yes</ion-button>
<ion-button (click)="activeNow('red')" class="btn-2" expand="full"  [color]="(selectItem==='red')? 'danger':'light'"  >No</ion-button>

并更新 home.page.ts

selectItem:string='';
activeNow(item:string) {
  this.selectItem=item;
}

更改按钮的背景颜色onclick

Change background color of buttons onclick

ionic-framework

angular

ionic4