我只是检查了vuetify,我想添加一个包含v-navigation-drawer的对话框。
如何在对话框中构建布局以在对话框中实现相同的效果,例如v-navigation-drawer(左侧菜单,右侧内容)。
现在就是我的标记:
v-app
v-dialog
v-toolbar
v-navigation-drawer
v-list
.. menuitems
v-content
(content here is under the left menu not on the right side as on my screenshot)
v-content
v-container
答案 0 :(得分:0)
这可能不是最干净的解决方案,但它可能是这样的:
new Vue({
el: '#app',
data () {
return {
dialog: null,
notifications: false,
sound: true,
widgets: false
}
}
})
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script>
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons" />
<div id="app">
<v-app id="inspire">
<v-btn primary dark v-on:click.stop="dialog = true">Open Dialog</v-btn>
<v-dialog v-model="dialog" transition="dialog-bottom-transition" width="80%" fullscreen hide-overlay >
<v-card>
<v-toolbar dark class="primary">
<v-btn icon @click.native="dialog = false" dark>
<v-icon>close</v-icon>
</v-btn>
<v-toolbar-title>Settings</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items>
<v-btn dark flat @click.native="dialog = false">Save</v-btn>
</v-toolbar-items>
</v-toolbar>
<v-navigation-drawer
permanent
absolute
left
width="250"
class='mt-5'
height=""
>
<v-list light one-line class="grey pa-1">
<v-list-tile>
<v-list-tile-content>
<v-list-tile-title class="white--text subheading">
HEADER
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
<v-list class="pt-0" dense>
<v-divider></v-divider>
<v-list-tile >
Lorem ipsum lorem ipsum
</v-list-tile>
</v-list>
</v-navigation-drawer>
<v-flex class="text-xs-center">
<h3 class="headline mb-0">Kangaroo Valley Safari</h3>
<div>Located two hours south of Sydney in the <br>Southern Highlands of New South Wales, ...</div>
</v-flex>
</v-card>
</v-dialog>
</v-app>
</div>