Ionic 如何改变按钮的颜色在离子4按钮点击

xnifntxz  于 2023-04-27  发布在  Ionic
关注(0)|答案(2)|浏览(206)

我想改变按钮的颜色点击按钮。
我正在创建测验应用程序。
点击按钮后,如果答案正确,颜色应更改为绿色,如果答案错误,应更改为红色。
成功了我已经成功了
但现在的问题是,如果答案是错误的,那么它的颜色改变为红色,正确答案按钮的颜色改变为绿色。
如何做到这一点?

play-quiz.html

<ion-list>
    <ion-row class="marginTop">
      <ion-col class="border ion-text-center">
        Grand Central Terminal, Park Avenue, New York is the world's
      </ion-col>
    </ion-row>

    <ion-row class="marginTop">
      <ion-col class="ion-text-center">
        <ion-button id="1" #first class="btn" expand="block" (click)="onClick(first,'1')">
          Largest Railway Station
        </ion-button>
      </ion-col>
    </ion-row>

    <ion-row>
      <ion-col class="ion-text-center">
        <ion-button id="2" #second class="btn" expand="block" (click)="onClick(second,'2')">
          highest railway station
        </ion-button>
      </ion-col>
    </ion-row>

    <ion-row>
      <ion-col class="ion-text-center">
        <ion-button id="3" #third class="btn" expand="block" (click)="onClick(third,'3')">
          longest railway station
        </ion-button>
      </ion-col>
    </ion-row>

    <ion-row>
      <ion-col class="ion-text-center">
        <ion-button id="4" #four class="btn" expand="block" (click)="onClick(four,'4')">
          None of the above
        </ion-button>
      </ion-col>
    </ion-row>

    <ion-row>
      <ion-col>
        <ion-button class="btn right" expand="small">
          Next
        </ion-button>
      </ion-col>
    </ion-row>

  </ion-list>

play-quiz.ts

answer: any = "1";

onClick(ionicButton, btn: any) {
      if(this.answer == btn){
        ionicButton.color =  'success';
      } else {
        ionicButton.color =  'danger';
      }
  }

wdebmtf2

wdebmtf21#

在HTML中:

<ion-button [ngClass]="isClicked() ? 'btn red': 'btn'" (click)="onClick()">Toggle</ion-button>

在TS中:

isClick: boolean=false;

isClicked(){
 return this.isClick;
}

onClick(){
 this.isClick=!this.isClick;
}

你可以在onClick()方法中修改的功能。基于isClicked()返回的值,它将附加类'red'(如果返回true,它将添加,否则否)。
CSS你可以所有需要的样式。
希望这能帮上忙。

fgw7neuy

fgw7neuy2#

你可以通过下面的CSS代码来实现:

ion-button:focus {
        --background: #067856;
        --color: white;
      }

相关问题