按下按鈕時改變按鈕的顏色

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僞選擇。