web-dev-qa-db-fra.com

Comment supprimer le fond V-BTN dans Vuetify?

Comment puis-je retirer le fond derrière le bouton lorsque je vols ou en cliquant sur le V-BTN?

J'essaie de mettre l'ondulation à la false, mais j'ai toujours de l'arrière-plan. Je ne trouve pas que le CSS fait ce fond.

enter image description here

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>



<div id="app">
  <v-app id="inspire">
    <v-card flat>
      <v-card-text>
        <v-container fluid class="pa-0">
          <v-row>
            <v-col cols="12">
              <p>Normal</p>
            </v-col>
  
            <v-col cols="12" sm="3">
              <v-btn ripple="false" icon color="pink">
                <v-icon>mdi-heart</v-icon>
              </v-btn>
            </v-col>
  
          </v-row>
        </v-container>
      </v-card-text>
    </v-card>
  </v-app>
</div>
vue.jsvuetify.js
5
Jon Sud

Pour l'arrière-plan lorsque vous cliquez sur (Fonctions d'ondulation), vous manquez l'annotation de liaison, vous passez la touche chaîne au lieu de false Valeur. Alors, mettez le ":" avant ondulation fera le travail.

Cependant, à faire avec les choses de fond du planer, vous devez faire du piratage en CSS. J'écris ceci en SCSS, vous pouvez suivre l'idée

<v-btn :ripple="false" icon color="pink" id="no-background-hover">
  <v-icon>mdi-heart</v-icon>
 </v-btn>


<style lang="scss">
#no-background-hover::before {
   background-color: transparent !important; <= can set to any color you want
}
</style>

le code ci-dessus n'est défini que sur ce bouton spécifique avec ID "no-background-hover" Seulement, si vous voulez que cela arrive à tous les autres boutons. Ensuite, voici la classe de ce bouton, vous pouvez modifier votre sélecteur de requête CSS au niveau de la classe dont vous avez besoin.

<button type="button" class="v-btn v-btn--flat v-btn--icon v-btn--round theme--light v-size--default pink--text" id="no-background"><span class="v-btn__content"><i aria-hidden="true" class="v-icon notranslate mdi mdi-heart theme--light"></i></span></button>
3
Jake Lam