nativescriptangular2-nativescriptnativescript-angularnativescript-vue

Can You Change Buttons color onfocuse In Nativescript/Angular


Can You Change Buttons color onfocused like yout do in TextField In Nativescript/Angular.. It works in TextField but not in BUTTON Does someone knows some other solution, im trying to build a tvapp i need to change the color when is focused in Button or Label

HTML File

<Page loaded="onPageLoaded($event)">
    <StackLayout>
        <Button  text="My Button 2"  class="my_button_2" >  </Button>
        <TextField class="input-field"> </TextField>
    </StackLayout>
</Page>
CSS File
.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;

Solution

  • Here is the solution in Android onloaded event

    HTML

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

    Component.ts File

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

    Disbaling in it

    androidButton.setOnFocusChangeListener(null)