[英]Vuetify: how to place v-navigation-drawer below v-app-bar
The docs at https://vuetifyjs.com/en/components/application/#application-components mention that v-navigation-drawer can be configured to appear below (instead of next to) v-app-bar but they don't seem to explain how to actually do that. https://vuetifyjs.com/en/components/application/#application-components的文档提到可以将 v-navigation-drawer 配置为显示在 v-app-bar 下方(而不是旁边),但它们不会似乎解释了如何实际做到这一点。
Here's the layout I'm looking for (v-app-bar spanning the whole width of the window, and v-navigation-drawer sitting below v-app-bar):这是我正在寻找的布局(v-app-bar 跨越 window 的整个宽度,v-navigation-drawer 位于 v-app-bar 下方):
How do I configure v-navigation-bar to render like that?如何将 v-navigation-bar 配置为这样呈现?
My current code looks like this:我当前的代码如下所示:
<v-app>
<v-system-bar app height="30" color="primary">The system bar</v-system-bar>
<v-app-bar app color="secondary" dense dark>
The application bar
</v-app-bar>
<v-navigation-drawer app>
<p>Navigation drawer</p>
</v-navigation-drawer>
<v-main>
<v-container>
<router-view></router-view>
</v-container>
</v-main>
<v-footer app>The footer</v-footer>
<v-bottom-navigation app color="secondary">The bottom navigation</v-bottom-navigation>
</v-app>
And it renders like this (note the navigation-drawer being next to, instead of below the application bar)它像这样呈现(注意导航抽屉在旁边,而不是在应用程序栏下方)
You need to add clipped-left
prop to your v-app-bar
and clipped
prop to your v-navigation-drawer
.您需要将
clipped-left
道具添加到您的v-app-bar
并将clipped
道具添加到您的v-navigation-drawer
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.