Vuetify 导航抽屉主文本显示在底部而不是右侧
Posted
技术标签:
【中文标题】Vuetify 导航抽屉主文本显示在底部而不是右侧【英文标题】:Vuetify nagviation drawer main text displays on bottom instead of the right side 【发布时间】:2019-01-11 22:00:21 【问题描述】:我是 Vue 和 Vuetify 框架的新手。 我直接从 Vuetify 复制这些代码。 https://vuetifyjs.com/en/components/navigation-drawers
这里是代码。 https://codepen.io/kellymei/pen/NBzBEG
Output of the code below
然后 Vuetify 导航抽屉主文本 (hi) 显示在底部而不是右侧 我希望它位于导航抽屉的右侧。 请帮忙,非常感谢!!!!!!
<div id="app">
<v-app id="inspire">
<v-navigation-drawer
stateless
value="true"
>
<v-list>
<v-list-tile>
<v-list-tile-action>
<v-icon>home</v-icon>
</v-list-tile-action>
<v-list-tile-title>Home</v-list-tile-title>
</v-list-tile>
<v-list-group
prepend-icon="account_circle"
value="true"
>
<v-list-tile slot="activator">
<v-list-tile-title>Users</v-list-tile-title>
</v-list-tile>
<v-list-group
no-action
sub-group
value="true"
>
<v-list-tile slot="activator">
<v-list-tile-title>Admin</v-list-tile-title>
</v-list-tile>
<v-list-tile
v-for="(admin, i) in admins"
:key="i"
@click=""
>
<v-list-tile-title v-text="admin[0]"></v-list-tile-title>
<v-list-tile-action>
<v-icon v-text="admin[1]"></v-icon>
</v-list-tile-action>
</v-list-tile>
</v-list-group>
<v-list-group
sub-group
no-action
>
<v-list-tile slot="activator">
<v-list-tile-title>Actions</v-list-tile-title>
</v-list-tile>
<v-list-tile
v-for="(crud, i) in cruds"
:key="i"
@click=""
>
<v-list-tile-title v-text="crud[0]"></v-list-tile-title>
<v-list-tile-action>
<v-icon v-text="crud[1]"></v-icon>
</v-list-tile-action>
</v-list-tile>
</v-list-group>
</v-list-group>
</v-list>
</v-navigation-drawer>
</v-app>
我想在导航抽屉的右侧插入一些文本。 然后我写了
<main>
<p>Hi</p>
</main>
在 /v-navigation-drawer 之后。
在 /v-app 之前
【问题讨论】:
【参考方案1】:您需要将 app
属性添加到您的 v-navigation-drawer
以将其用作应用程序布局的一部分。它正在动态调整您的v-navigation-drawer
的内容大小。
并且您需要将您的 Hi 包装成 v-content
。
CodePen
【讨论】:
以上是关于Vuetify 导航抽屉主文本显示在底部而不是右侧的主要内容,如果未能解决你的问题,请参考以下文章
系统方向学习总结4-- Android 10.0 解决切换横屏时SystemUI导航栏固定在桌面右侧而不是底部的问题