如何使用 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-card 不应该这样写，但是使用 v-row 和 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-leftprop添加到 。app-barnavigation-drawer