Question

我正在尝试实现以下目标：

实际上我有这个：

我的问题是，当前我无法将第一个工具栏放在导航抽屉上方。

<template>
  <v-app>
    <v-toolbar app class="elevation-1">
        <span>Toolbar1</span>
    </v-toolbar>

    <v-toolbar app class="mt-5 elevation-1" style="top: 16px">
      <span>Toolbar2</span>
    </v-toolbar>

    <v-navigation-drawer app fixed permanent>
      <v-toolbar></v-toolbar>
      <v-toolbar flat>
        <v-list>
          <v-list-tile>
            <v-list-tile-title class="title">Filter</v-list-tile-title>
          </v-list-tile>
        </v-list>
      </v-toolbar>
    </v-navigation-drawer>

    <v-content class="mt-5">
      <HomePage/>
    </v-content>
  </v-app>
</template>

Answer 1

我首先将clipped-left添加到第一个工具栏，然后将其移动到navigation-drawer下。

<template>
  <v-app>
    <v-navigation-drawer app fixed permanent>
      <v-toolbar></v-toolbar>
      <v-toolbar flat>
        <v-list>
          <v-list-tile>
            <v-list-tile-title class="title">Filter</v-list-tile-title>
          </v-list-tile>
        </v-list>
      </v-toolbar>
    </v-navigation-drawer>

    <v-toolbar app clipped-left class="elevation-1">
      <span>Toolbar1</span>
    </v-toolbar>

    <v-toolbar app class="mt-5 elevation-1" style="top: 16px">
      <span>Toolbar2</span>
    </v-toolbar>

    <v-content class="mt-5">
      <HomePage/>
    </v-content>
  </v-app>
</template>

尽管如此，我强烈建议您熟悉Vuetify文档中的可用道具（关于这两个组件），以便能够准确地获取所需的东西

更新

我对先前的答案做了一些丑陋的修复，以处理响应性并清理代码。

<template>
  <v-app>
    <v-navigation-drawer clipped permanent app>
      <v-list>
        <v-list-tile>
          <v-list-tile-title class="title">Menu Item #1</v-list-tile-title>
        </v-list-tile>
      </v-list>
    </v-navigation-drawer>

    <v-toolbar clipped-left app>
      <span>Toolbar</span>
    </v-toolbar>

    <v-toolbar class="mt-5" :style="$vuetify.breakpoint.smAndDown ? 'top: 8px' : 'top: 16px'" app>
      <span>SubToolbar</span>
    </v-toolbar>

    <v-content :style="$vuetify.breakpoint.smAndDown ? 'padding-top: 112px' : 'padding-top: 128px'">
      <v-container fluid>
        Content
        <!-- <router-view></router-view> -->
      </v-container>
    </v-content>
  </v-app>
</template>

Answer 2

我刚刚回答了另一个类似的问题，尽管我第一次做错了，但我认为自己在修改中here

无论如何，我想做同样的事情，所以我将实际内容的v-content更改为v-main。另外，使用该应用程序时，永久性和裁剪式，没有固定的道具。应用程序导航栏在您的情况下也应正确剪切。那对我来说很成功

<v-app-bar
app
clipped-left
color="#c4161c"
dark
>
...
</v-app-bar>

...

<v-navigation-drawer
app
permanent        
clipped
class="mt-100"        
>
...
</v-navigation-drawer>

Vuetify 2个工具栏和1个导航抽屉，其中1个工具栏位于导航抽屉上方

2 个答案: