Je souhaite changer la couleur de l'extension v-app-bar afin qu'elle soit d'une couleur différente de celle de la v-app-bar. Il semble qu'il n'y ait rien dans la documentation mais j'imagine qu'un changement aussi simple ne peut pas être si difficile et beaucoup de gens voudraient faire ce changement. J'ai essayé de le changer avec CSS en vain.

  <v-app-bar
    app
    extensionHeight="35px"
    class="light-blue darken-4 px-2"
  >

    // This is the part I want to appear a separate color.
    <template 
      v-slot:extension
      class="extension-style"
    >
      <v-tabs align-with-title>
        <v-tab>Browsing History</v-tab>
        <v-tab>Todays Deals</v-tab>
        <v-tab>Your Store</v-tab>
        <v-tab>Gift Cards</v-tab>
        <v-tab>Registry</v-tab>
        <v-tab>Sell</v-tab>
      </v-tabs>
    </template>

  </v-app-bar>
2
newprogrammer 16 févr. 2020 à 23:15

1 réponse

Meilleure réponse

J'ai eu du mal avec cela pendant un certain temps, mais j'ai finalement réussi à faire le changement via CSS car je n'ai trouvé aucune aide dans Vuetify Docs

Dans mon fichier .vue où la v-app-bar est définie, j'ai ajouté les lignes suivantes :

<style>
div.v-toolbar__extension {
  background-color: green;
}
</style>

J'ai déterminé que "div.v-toolbar__extension" était le bon élément en inspectant la page via chrome, si vous avez défini une classe ou un identifiant, le nom peut être différent.

Remarque : Mon éditeur a automatiquement appliqué « scoped » à la section « style ». Cela m'a fait trébucher pendant un certain temps car le CSS n'avait aucun effet jusqu'à ce que je supprime le mot-clé scoped.

Edit : Si vous souhaitez conserver le style « scoped », l'alternative serait d'utiliser :

<style scoped>
/deep/ div.v-toolbar__extension {
  background-color: green;
}
</style>
2
Andrew D 19 févr. 2020 à 18:45