无法更改 vuetify 卡/导航抽屉高度和颜色

Question

我很难设置高度以匹配浏览器窗口的大小并设置 vuetify 卡片的颜色。

我从 vuetiy 复制了示例代码，如下所示：

<template>
  <v-card
    class="mx-auto"
    height="400"
    width="256"
  >
    <v-navigation-drawer
      class="deep-purple accent-4"
      dark
      permanent
    >
      <v-list>
        <v-list-item
          v-for="item in items"
          :key="item.title"
          link
        >
          <v-list-item-icon>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-item-icon>

          <v-list-item-content>
            <v-list-item-title>{{ item.title }}</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>

      <template v-slot:append>
        <div class="pa-2">
          <v-btn block>
            Logout
          </v-btn>
        </div>
      </template>
    </v-navigation-drawer>
  </v-card>
</template>

<script>
  export default {
    data () {
      return {
        items: [
          { title: 'Dashboard', icon: 'mdi-view-dashboard' },
          { title: 'Account', icon: 'mdi-account-box' },
          { title: 'Admin', icon: 'mdi-gavel' },
        ],
      }
    },
  }
</script>

但颜色不会显示为紫色。相反，它显示为深灰色。如果我删除 v-navigation-drawer 中的 dark 属性，那么它只会显示为白色。

将v-card 的height 更改为100% 似乎只是将卡片的高度更改为100 而不是100%。我真的很困惑，从我在这里看到的How to set the height of vuetify card，有

<v-card
   height=100%
>

会解决这个问题，但它没有。我一定是遗漏了一些简单的东西？

Answer 1

所以我最终能够修改更改高度和颜色，尽管我不确定为什么不能在卡片标签内完成。

在导航抽屉中，我进行了一些更改，如下所示，颜色和高度都发生了变化。

<v-navigation-drawer
      class="accent-4"
      width="200"
      height="100vh"
      color="rgba(56, 95, 115,0.5)"
      permanent
    >

我还完全删除了v-card 标签。