Farbe eines Knopfes ändern, wenn es gepresst wird

Question

Wie mache ich es in nativescript? Ich versuchte

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

Es hat nicht funktioniert.

Answer 1

Eine Möglichkeit, dies zu tun, ist es die CSS in JS zu setzen, dh

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

und dann in Ihrer Komponente, können Sie den Standard (unclicked Wert) gesetzt würden und dann den Wert des Klick wechseln:

class myCmp implements OnInit { 
    color: string; 

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

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

Answer 2

Alternativ können Sie zwei Tasten haben und sich gegenseitig unter der Bedingung, basierend Schalt sein -

<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

in nativescript 3+ :pressed oder :highlighted Pseudo-Selektor in Ihrem css/SCSS verwenden.