如何使用Vuetify网格系统创建边栏和导航栏？

Question

我正在尝试使用同时具有侧边栏和导航栏的Vuetify创建背景。它应该看起来像这样：

目前，我已经使用v-navigation-drawer创建了侧边栏，但是无法将导航条放到正确的位置。如何将导航栏添加到以下代码中，使其看起来如上图所示？

<template>
<div id="app">
    <v-app id="inspire">
        <v-navigation-drawer
            color="#09151E"
            permanent
            expand-on-hover
        >
            <v-divider></v-divider>
            <v-list nav dense>
                <v-list-item link href="#">
                    <v-list-item-icon>
                        <v-icon color="white" small>mdi-lightbulb</v-icon>
                    </v-list-item-icon>
                    <v-list-item-title class="title">Blue</v-list-item-title>
                </v-list-item>
            </v-list>
        </v-navigation-drawer>
        <v-card>Navbar</v-card>
    </v-app>
</div>

我知道在下面写v卡不是应该怎么写的，但是使用v行和v-col会使空格出现在页面的角落并且看起来并不好

Answer 1

您需要做的是：

• 创建一个v-app-bar或v-toolbar组件

• 将app道具添加到v-navigation-drawer

演示：https://codepen.io/aQW5z9fe/pen/GRpQqpG?editors=1010

<v-app-bar app>
  Title
</v-app-bar>

<v-navigation-drawer
  color="#09151E"
  permanent
  expand-on-hover
  app
>
...

如果希望clipped-left出现在app-bar后面而不是旁边，可以将navigation-drawer道具添加到canShow() { if (!this.scheme) { return; } if (this.scheme.relevant === 'No') { this.$scope["Form_" + this.GroupIx].$setValidity("relevant", false); return true; } if (this.scheme.relevant === 'Yes') { this.$scope["Form_" + this.GroupIx].$setValidity("relevant", true); return false; } return; } 。

Answer 2

您需要在“ v-navigation-drawer”之前使用app道具创建一个“ v-app-bar”。移除permanent道具，然后将app道具添加到导航抽屉中。

   <v-app id="inspire">
      <v-app-bar
          app
          color="yellow"
        >
          <v-toolbar-title>Navbar</v-toolbar-title>
          <v-spacer></v-spacer>
      </v-app-bar>
      <v-navigation-drawer
            app
            color="#09151E"
            expand-on-hover>
            <v-divider></v-divider>
            <v-list nav dense>
                ...
            </v-list>
      </v-navigation-drawer>
      <v-content>
          ...
      </v-content>
   </v-app>

Demo