按下按钮时改变按钮的颜色

Question

如何在nativescript中执行此操作？我试过

.myButton:highlighting{ 
    background-color:#00A3FF; 
} 

它没有工作。

Answer 1

这样做的一种方式，它设置在JS的CSS，即

<button class="myButton" (click)="clicked($event) [ngStyle]="{ 'background-color': color }"></button> 

，然后在你的组件，你可以设置默认（未点击的价值），然后切换点击的价值：

class myCmp implements OnInit { 
    color: string; 

    ngOnInit() { 
     this.color = 'green' 
    } 

    clicked(e) { 
     this.color = this.color === 'green' ? 'red' : 'green'; 
    } 
} 

Answer 2

或者，也可以有两个按钮和开关被彼此基于条件 -

<Button row="1" col="0" *ngIf="isTapped" text="Enable" class="activateButton" (tap)="buttonTapped('activate')"></Button> 
<Button row="1" col="0" *ngIf="isNotTapped" text="Disable" class="deactivateButton" (tap)="buttonTapped('deactivate')"></Button> 

CSS

.activatePackage { 
color:white; 
background-color: #68CF17; 
margin-top: 5px; 
margin-right: 0px; 
font-size: 12px; 
border-radius: 20; 
height: 40; 
} 

.deactivatePackage { 
border-width:1px; 
border-color: #ED2830; 
color:#ED2830; 
background-color: white; 
margin-top: 5px; 
margin-right: 0px; 
font-size: 12px; 
border-radius: 20; 
height: 40; 
} 

TS

buttonTapped(args){ 
if(args=='activate'){ 
this.isTapped = true; 
this.isNotTapped = false; 
} 
else if(args=='deactivate'){ 
this.isTapped = false; 
this.isNotTapped = true; 
} 

Answer 3

在nativescript 3+你的CSS/SCSS使用:pressed或:highlighted伪选择。