您可以在Nativescript中将按钮颜色更改为焦点/角度吗 [英] Can You Change Buttons color onfocuse In Nativescript/Angular

问题描述

您是否可以像在Nativescript/ANGLING中的TextField中那样在Focus上更改按钮的颜色。 它可以在TextField中工作，但不能在按钮中工作 有人知道其他解决方案吗？我正在尝试构建一个TVAP，当我在按钮或标签中聚焦时，我需要更改颜色

HTML文件

<Page loaded="onPageLoaded($event)">
    <StackLayout>
        <Button  text="My Button 2"  class="my_button_2" >  </Button>
        <TextField class="input-field"> </TextField>
    </StackLayout>
</Page>

CSS文件

.my_button_2:focus{
    background:olive;
    border-color: red;
    border: 2;
    border-width: 2;
}

.my_button_2:active{
    background:olive;
    border-color: red;
    border: 2;
    border-width: 2;
}


.input-field:focus {
border-bottom-color: red;

推荐答案

这里是android onload事件的解决方案

HTML

<Button #myButton1 text="My Button 1" (tap)="OnTapButton_1($event)" (loaded)="onButtonLoaded_1($event)" class="button_style"></Button>

Component.ts文件

public onButtonLoaded_1(args) {
    let btn = args.object as Button;
    let androidButton = btn.android;

    androidButton.setOnFocusChangeListener(new android.view.View.OnFocusChangeListener({
      onFocusChange:(view, hasFocus) => {
          if(hasFocus === true){
            btn.addPseudoClass("focus")
          }
          else {
            btn.deletePseudoClass("focus")

          }
        }
      }))
}

CSS

.button_style {
    android-elevation: 0;
    android-dynamic-elevation-offset: 0;
    background: rgba(190, 138, 17, 0.315);
    border-width: 0.3;
    border-color: rgba(190, 138, 17, 0.671);

}

.button_style:focus{
    android-elevation: 0;
    android-dynamic-elevation-offset: 0;
    background: rgba(190, 138, 17, 0.856);
    border-width: 0.3;
    border-color: rgba(116, 84, 11, 0.856);
}

在其中拆分

androidButton.setOnFocusChangeListener(null)

这篇关于您可以在Nativescript中将按钮颜色更改为焦点/角度吗的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！