如何使用 Vuetify 网格系统同时创建侧边栏和导航栏？答案

【问题标题】：How to use Vuetify grid system to create both a sidebar and a navbar?如何使用 Vuetify 网格系统同时创建侧边栏和导航栏？
【发布时间】：2020-08-21 09:40:36
【问题描述】：

我正在尝试使用同时具有侧边栏和导航栏的 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 会使页面的角落出现空白，看起来不太好

【问题讨论】：

在 v-navigation-drawer 下方，目前它只是一个简单的 v-card，标题为 'Name' - 像这样写 v-card 不是应该这样写，而是使用v-row 和 v-col 使页面周围出现空白，看起来不太好

标签： vue.js navbar vuetify.js sidebar grid-system

【解决方案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
>
...

如果您希望 app-bar 出现在 navigation-drawer 后面而不是旁边，则可以将 clipped-left 属性添加到 app-bar。

【讨论】：

有没有办法把它放在导航抽屉后面？还是旁边？目前它跨越整个页面，但也涵盖了导航抽屉的内容
@Beginner_Hello 您是否完全按照我的建议进行操作？它应该在导航抽屉旁边。查看演示
有效！我之前没有将 prop 应用应用到 v-navigation-drawer，这就是它没有显示的原因

【解决方案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

【讨论】：