vuejs2 - 如何在 Vuetify 中设置 v-list 的背景颜色和大小？

Question

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

标签： vuejs2vuetify.js

Answer 1

您可以分配“v-list-tile”，这是您想要设置样式的位，一个类并将您的 css 包含在其中。因此，您的 v-navigation-drawer 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>

那应该可以完成工作。