如何使用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会使空格出现在页面的四角并且看起来不是很好]]

我正在尝试使用同时具有侧边栏和导航栏的Vuetify创建背景。它看起来应该像这样：目前，我已经使用v-navigation-drawer创建了侧边栏，但是我无法获得...

Answer 1

您需要做的就是创建一个v-app-bar组件并将一个app道具添加到v-navigation-drawer：