Question

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

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

它没有用。

Answer 1

in nativescript 3+在你的css / scss中使用:pressed或:highlighted伪选择器。

Answer 2

这样做的一种方法是在JS中设置css，即

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

然后在您的组件中，您将设置默认值（未单击的值），然后切换click的值：

class myCmp implements OnInit {
    color: string;

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

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

Answer 3

或者，你可以有两个按钮，并根据条件相互切换 -

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

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

3 个答案: