我正在尝试构建这样的布局:
https://i.stack.imgur.com/AFKyR.png
但是现在 v-main 不能保持在 v-navigation-drawer 旁边的左侧。它出现在 v-navigation-drawer 下方(现在看起来像 this)。
这是我的代码:
https://codepen.io/magooo/pen/mdRKaVQ?editors=1010
<div id="app">
<v-app id="inspire">
<div>
<v-app-bar color="deep-purple accent-4" dark>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>App Bar</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>mdi-heart</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-magnify</v-icon>
</v-btn>
</v-app-bar>
<!-- tool-bar -->
<v-toolbar>
<v-btn depressed class="mr-2">
<v-icon class="mr-2">fas fa-database</v-icon>
<span>Add</span>
</v-btn>
<v-menu offset-y>
<template v-slot:activator="{ on, attrs }">
<v-btn depressed v-bind="attrs" v-on="on">
<v-icon class="mr-2">fas fa-chart-bar</v-icon>
<span>Add</span>
</v-btn>
</template>
<v-container fluid>
<v-row dense>
<v-col v-for="card in cards" :key="card.title" :cols="card.flex">
<v-card>
<v-img :src="card.src" class="white--text align-end" gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)" height="200px">
<v-card-title v-text="card.title"></v-card-title>
</v-img>
</v-card>
</v-col>
</v-row>
</v-container>
</v-menu>
<v-spacer></v-spacer>
<v-btn depressed class="mr-2" color="primary">
<v-icon class="mr-2">fas fa-search</v-icon>
<span>Search</span>
</v-btn>
<v-btn depressed class="mr-2">
<v-icon class="mr-2">fas fa-download</v-icon>
<span>download</span>
</v-btn>
<v-btn depressed>
<v-icon class="mr-2">fas fa-cog</v-icon>
<span>settings</span>
</v-btn>
</v-toolbar>
<v-navigation-drawer permanent left width="320" height="100vh" hide-overlay>
<v-list-item>
<v-list-item-content>
<v-list-item-title class="title">
<v-icon class="mr-2">fas fa-chart-bar</v-icon>
navigation drawer
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-divider></v-divider>
<v-card elevation="0">
<v-tabs v-model="tab" background-color="transparent" grow>
<v-tab key="k1" href="#k1">Tab1</v-tab>
<v-tab key="k3" href="#k3">Tab3</v-tab>
</v-tabs>
<v-tabs-items v-model="tab">
<v-tab-item key='k1' value='k1'>Data 1</v-tab-item>
<v-tab-item key='k3' value='k3'>Data 3</v-tab-item>
</v-tabs-items>
</v-card>
</v-navigation-drawer>
<v-main>
<h1>hi</h1>
</v-main>
</div>
</v-app>
</div>
有人可以帮我解决问题吗?提前致谢:)