Vuetify:为什么侧边栏位于另一个元素上? [英] Vuetify: Why is the sidebar laying over the other element?

问题描述

我的侧边栏位于路由器视图上，但它应该阻塞"了空间.

My sidebar is laying over the router-view but it should be "blocking" the space.

在我的 App.vue 中有以下代码

In my App.vue there is following code

<template>
    <v-app id="app">
        <v-container>
            <sidebar class="d-block"/>

            <router-view class="d-block"></router-view>
        </v-container>
    </v-app>
</template>

由于 Vuetify 的 d-block 类，我希望侧边栏不会覆盖.

Due to the d-block class of Vuetify I'd expect the sidebar to not overlay.

侧边栏基本上是从原来的API复制过来的

The sidebar is basically copied from the original API

<template>
    <v-container>
        <v-navigation-drawer
        v-model="drawer"
        :color="color"
        :permanent="permanent"
        :app="app"
        dark
        >
            <v-list dense nav class="py-0">
                <v-list-item-content>
                    <v-list-item-title>Application</v-list-item-title>
                    <v-list-item-subtitle>Subtext</v-list-item-subtitle>
                </v-list-item-content>

                <v-divider></v-divider>

                <v-list-item v-for="item in items" :key="item.title" link>
                <v-list-item-icon>
                    <v-icon>{{ item.icon }}</v-icon>
                </v-list-item-icon>

                <v-list-item-content>
                    <v-list-item-title>{{ item.title }}</v-list-item-title>
                </v-list-item-content>
                </v-list-item>
            </v-list>
        </v-navigation-drawer>
    </v-container>
</template>

推荐答案

我不熟悉 d-block 类，搜索 Vuetify 文档并没有发现任何东西.我会摆脱它；您不需要 d-block 类来使导航抽屉在打开时将内容推到一边.

I'm not familiar with the d-block class, and a search of the Vuetify docs didn't show me anything. I would get rid of it; you don't need a d-block class to make the navigation drawer push the content aside when it opens.

话虽如此，我不认为您想像正在做的那样将所有内容都包装在 中.尝试像这样构建您的应用代码:

That being said, I don't think you want to wrap everything in <v-container> like you're doing. Try structuring your app code like this:

<template>
  <v-app id="app">
    <sidebar />
    <v-content>
      <router-view />
    </v-content>
  </v-app>
</template>

并且也不要将 包裹在 中.你想要这样:

And don't wrap your <v-navigation-drawer> in <v-container>, either. You want it like this:

<template>
  <v-navigation-drawer
    v-model="drawer"
    permanent
    app
    dark
    color="primary"
  >
    // Contents
  </v-navigation-drawer>
</template>

然后，让您的 使用 显示视图:

Then, have the views displayed by your <router-view> use <v-container>:

<template>
  <v-container class="fill-height" fluid>
    // View content
  </v-container>
</template>

这篇关于Vuetify:为什么侧边栏位于另一个元素上?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！