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

Posted 2023-02-16

【中文标题】如何在 Vuetify 中设置 v-list 的背景颜色和大小？

【英文标题】：How to style the background color and size of a v-list in Vuetify?

【发布时间】：2019-06-08 01:31:50

【问题描述】：

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

【问题讨论】：

你读到这里了吗vuetifyjs.com/en/framework/colors

更新：我设法通过在

中找到的活动类道具中实现类来找到更简单的方法

@FledglingDeveloper 如果您能详细说明，那就太好了。您能否发布解决问题的更简单方法作为答案？

【参考方案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”中。

现在只需在您的页面 css 中添加一个 .tile 类：

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

这应该可以完成工作。

【讨论】：

非常感谢这对您有很大帮助。