CODEWITHSUNDEEP
angular2-nativescript
Hen Eliezer
Hen Eliezer

Reputation: 11

Change color of a Button when its Pressed

how do I do it in nativescript? I tried 

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

It didn't work.

Upvotes: 0

Views: 1051

Answers (3)

Mohammad Rafigh
Mohammad Rafigh

Reputation: 796

in nativescript 3+ use :pressed or :highlighted pseudo selector in your css/scss.

Upvotes: 2

Dlucidone
Dlucidone

Reputation: 1101

Alternatively, you can have two buttons and be switching each other based on condition - 

<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;
}

Upvotes: 0

George Edwards
George Edwards

Reputation: 9229

One way of doing this, it to set the css in JS, i.e 

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

and then in your component, you would set the default (unclicked value) and then toggle the value of click:

class myCmp implements OnInit {
    color: string;

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

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

Upvotes: 0

Related Questions