Vuetify对齐工具栏

时间:2018-08-14 05:28:26

标签: vuejs2 vuetify.js

enter image description here

我想要实现类似此工具栏按钮(或其他工具栏)的功能,这些按钮应与网站的内容部分保持一致。也就是说,主页按钮和Java休息室文本应对齐同一行。它有点类似于v-container fluid

这是我的代码。

<template>
    <v-app>
        <v-navigation-drawer v-model="drawer"
        temporary
        app>

            <v-list>
                <v-list-tile v-for="(n,index) in pages" :key="index" @click="onClick(n.path)">
                    <v-list-tile-content>{{n.text}}</v-list-tile-content>
                </v-list-tile>
            </v-list>
        
        </v-navigation-drawer>
        <v-toolbar  class="primary">
            <v-toolbar-side-icon @click.native.stop="drawer = !drawer" class="hidden-sm-and-up"></v-toolbar-side-icon>
            <v-toolbar-items class="hidden-xs-only">
                <v-btn dark class="primary" v-for="n in pages" :key="n"
                @click="onClick(n.path)">{{n.text}}</v-btn>
                
            </v-toolbar-items>
            <v-spacer></v-spacer>
                <v-btn
                @click="onClick('/')">
                    logout
                </v-btn>
        </v-toolbar>
    
        <main>
        <router-view></router-view>                
        </main>
    </v-app> 
</template>

任何帮助,谢谢高级!

0 个答案:

没有答案