如何在Vuetify中设置v列表的背景颜色和大小？

Question

我是Vuetify的新手，想做这样的事情。基本上，我有一个导航抽屉作为侧边栏，并且我希望能够在选中时更改悬停列表之一的背景颜色。 Vuetify文档似乎没有对此进行讨论。而且我一直到处寻找，任何帮助将不胜感激。

Answer 1

您可以分配“ v-list-tile”（这是您要样式化的位），一个类，并在其中包含css。因此，您的v-navigation-抽屉html如下所示：

<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....

如您所见，我已将class="tile"添加到“ v-list-tile”中。

现在只需将.tile类添加到页面CSS：

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

这应该可以完成工作。