CODEWITHSUNDEEP
vue.jsvuetify.js
LiteralGoat
LiteralGoat

Reputation: 131

Is it default for vuetify to keep active state on buttons after click? How do you remove this?

Vuetify buttons keep active state after being clicked. You need to click elsewhere on the screen to remove it. Is there a simple way of adding a timer on returning to inherit state.

I've recently gotten into programming these few last months and just now started using vuetify in my vue project. This issue is something I can solve with unnecessary amounts of code and I'de like to see how you could improve on this. 

<v-app-bar app color="#44D0CD" dark>
   <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
   <v-toolbar-title>Application</v-toolbar-title>
   <v-btn @click="functionOne" light style="">
        <v-icon left>mdi-plus</v-icon>
        Do something
   </v-btn>
   <v-btn @click="functionTwo" light content="Save">
        Do something else
   </v-btn>
</v-app-bar>

I want it to return to the inherit state after a click. Now it stays active on click.

Upvotes: 9

Views: 9280

Answers (4)

saeede work
saeede work

Reputation: 11

im my case this code:

.myClass:focus::before {
  opacity: 0 !important;
}

does not work, but thank you it was inspiring then i made a little change like this :

.myClass:focus::after {
  opacity: 0 !important;
}

and it works

Upvotes: 1

Filipe Rodrigues
Filipe Rodrigues

Reputation: 11

Try this:

<template>
 <v-btn class="buttonOne" @click="functionOne">
  Do Something
 </v-btn>
</template>

<script>
 .buttonOne.v-btn:focus::before {
  opacity: 0 !important;
 }
</script>

Upvotes: 1

Matteljay
Matteljay

Reputation: 720

Template:

<v-btn class="yourButton" @click="yourFunction">
  Do Something
</v-btn>

Style:

.yourButton.v-btn--active::before {
  opacity: 0;
}

Upvotes: 2

Abdelillah Aissani
Abdelillah Aissani

Reputation: 3108

Turns out that the ::before pseudo element was being set to a higher opacity when the button component was focused ... a simple solution to this is to give the button a custom class and force the pseudo opacity ... here is a demo :

Vue.config.devtools = false
Vue.config.productionTip = false
new Vue({
    el: '#app',
    vuetify: new Vuetify(),
})
.myClass:focus::before {
  opacity: 0 !important;
}
<html>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<body>
  <div id="app">
     <v-app>
     <v-content>
        <span>with the focus effect:</span> 
        <v-btn>Button</v-btn>
     </v-content>
     <v-content>
        <span>without the focus effect:</span> 
        <v-btn class="myClass">Button</v-btn>
     </v-content>
     </v-app>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
</body>
</html>

Upvotes: 6

Related Questions