CODEWITHSUNDEEP
vue.jsvuetify.js
newbnoob
newbnoob

Reputation: 75

Vue tab change text color for active class

I want to change the text color of the active tab.

Using Vue.js + Vuetify

I created an .active CSS class. The interesting part is that background-color property for active classes work, but the text color (color) doesnt change when active.

How should I change the code so that both properties apply for the active class ?

style

  .active {

  color: #222222;
  background-color: #ffff;
  }

template

      <v-tabs
        background-color="#FFFFEA"
        slider-color="#C89933"
        optional
        right
        active-class="active"

        >

        <v-tab
          class="normalize font-weight-bold "
          to="/tab1"
          >
          Tab 1
        </v-tab>          

        <v-tab    
          class="normalize font-weight-bold"
          to="/tab2"
          >
          Tab 2
        </v-tab>   

        <v-tab
          class="normalize font-weight-bold"
          to="/tab3"
          >
          Tab 3
        </v-tab>
  
          
      </v-tabs>

Upvotes: 1

Views: 4895

Answers (2)

santanu bera
santanu bera

Reputation: 1311

A default color comes from the Vuetify component itself. To override the color you can use !important flag after the color value.

    .active {
       color: #222222 !important;
       background-color: #ffff !important;
    }

Upvotes: 2

MEAG
MEAG

Reputation: 127

If all your tabs route to a url link in which you can check your current $route.name and confirm it is the current active one. Use a ternary expression to choose the class to render. Do something like the below.

 <a
          @click="this.$router.push('http://localhost:8081/')"
          href="#"
          class="
            hover:bg-papaDark-700
            text-white
            hover:text-gray-200
           
          "
          :class="$route.name === 'Home' ? 'border-l-6 border-gray-200 ' : ''"
        >

In which 'Home' would be your route component name for 'locahost:8081/'. For example.

Tell me if it works

Upvotes: 0

Related Questions