Add Css Class to button tap in nativescript-vue

Question

I have retrieve buttons dynamically, i want to add border-bottom css style to button which is tapped. But it is applicable to all button. How can I solve this Issue?? I want to keep ALL tab as default selected.enter image description here enter image description here

all(){
                alert('all');
                this.isAllActive = true;
                this.isActive = false;
                this.TabGender = null;
                this.TabCategory = null;
                this.TabSub_Category = null;
            },
            selectTab: function (gender, category, sub_category,args) {
                alert(args);
                this.TabGender = gender; 
                this.TabCategory = category;
                this.TabSub_Category = sub_category;
                alert(this.TabGender+this.TabCategory+this.TabSub_Category);
                this.isActive = true;
                this.isAllActive = false;
                //this.makeTabActive(args);
            }

.category_label {
        height: 35;
        vertical-align: middle;
        padding: 5 15;
        margin: 0 4;
        background-color: #344955;
        color: #FFFFFF;
        border-radius: 5;
        font-size: 16;
    }

    

    .active {
        border-width: 0 0 4 0;
        border-color: #F9AA33;
    }

<StackLayout orientation="horizontal" style="padding-left:5">
 <Button text="ALL" class="category_label" :class="{active:isAllActive}" @tap="all"/>
 <template v-for="(tab,index) in tabs" marginBottom="5">
 <Button :text="tab.gender.charAt(0).toUpperCase(0)+'-'+tab.sub_category" :key="index" class="category_label"
  :class="{active:isActive}" @tap="selectTab(tab.gender,tab.category,tab.sub_category,index)" />
  </template>
</StackLayout>

Manoj · Accepted Answer · 2019-02-18 16:16:44Z

1

Just use the border-bottom-color and border-bottom-width, that should work.

Example

.active {
    border-bottom-color: yellow;
    border-bottom-width: 2;
}

Playground Sample

answered Feb 18, 2019 at 16:16

Manoj

21.9k3 gold badges24 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rushikesh Shirkar Over a year ago

I used template for looping purpose. Buttons are created dynamically based on the response get by server

Manoj Over a year ago

That doesn't matter, whether the button is dynamic with ngFor or simple, the syntax is same.

Collectives™ on Stack Overflow

Add Css Class to button tap in nativescript-vue

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related