Добавить класс Css к нажатию кнопки в nativescript-vue - PullRequest
Новая
       9

Добавить класс Css к нажатию кнопки в nativescript-vue

0 голосов
/ 18 февраля 2019

У меня есть кнопки для динамического извлечения, я хочу добавить стиль css с нижней границей к кнопке, которая нажата.Но это применимо ко всем кнопкам.Как я могу решить эту проблему ??Я хочу оставить вкладку ВСЕ в качестве выбранной по умолчанию. введите описание изображения здесь введите описание изображения здесь 

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>

1 Ответ

0 голосов
/ 18 февраля 2019

Просто используйте border-bottom-color и border-bottom-width, которые должны работать.

Пример 

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

Пример игровой площадки

...