CODEWITHSUNDEEP
vuejs2vuetify.js
FledglingDeveloper
FledglingDeveloper

Reputation: 421

How to style the background color and size of a v-list in Vuetify?

enter image description here

I'm new to Vuetify and would like to make something like this. Basically I have a navigation drawer as a side bar and I want to be able to change the background-color of one of the list on hover as well when selected. Vuetify documentation doesn't seem to discuss this. And I've been looking everywhere, any help will be appreciated.

Upvotes: 8

Views: 34301

Answers (1)

Andrew1325
Andrew1325

Reputation: 3579

You can assign the "v-list-tile", which is the bit you want to style, a class and include your css in that. So your v-navigation-drawer html will look like this:

<v-navigation-drawer
      dark
      permanent
    >
      <v-list>
        <v-list-tile
          class="tile"
          v-for="item in items"
          :key="item.title"
          @click=""
        > 
          <v-list-tile-action>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-tile-action> //etc....

As you can see I have added the class="tile" to the "v-list-tile".

Now just add a .tile class to your pages css:

<style scoped>
  .tile {
    margin: 5px;
    border-radius: 4px;
  }
  .tile:hover {
    background: green;
  }
  .tile:active {
    background: yellow;
  }
</style>

and that should do the job.

Upvotes: 14

Related Questions