问题描述
我正在尝试实现以下目标:
I'm trying to achieve something like this :
实际上我有这个:
我的问题是,当前我无法将第一个工具栏放在导航抽屉上方.
My problem is that currently I can not put the first toolbar above the navigation drawer.
<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>
推荐答案
我首先将 clipped-left
添加到第一个工具栏,然后将其移动到 navigation-drawer
下像这样.
I would first add clipped-left
to the first toolbar and move it under the navigation-drawer
like so.
<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文档中的可用道具(关于这两个组件)
Though, I strongly advice you to get familiar with the available props on the Vuetify documentation (regarding those 2 components) to be able to get exactly what you want
更新
我对先前的答案做了一些丑陋的修复,以处理响应性并清理代码.
I did some ugly fixes to the previous answer to handle the responsiveness and clean the code a bit.
<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>
这篇关于Vuetify 2个工具栏和1个导航抽屉,其中1个工具栏位于导航抽屉上方的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!