Vuetify 导航抽屉主文本显示在底部而不是右侧 [英] Vuetify nagviation drawer main text displays on bottom instead of the right side
问题描述
我是 Vue 和 Vuetify 框架的新手.我直接从 Vuetify 复制这些代码.https://vuetifyjs.com/en/components/navigation-drawers
这是代码.https://codepen.io/kellymei/pen/NBzBEG
然后 Vuetify nagviation drawer main text (hi) 显示在底部而不是右侧我希望它在导航抽屉的右侧.请帮助非常感谢!!!!!!
<v-app id="inspire"><v-导航抽屉无国籍值=真"><v-list><v-list-tile><v-list-tile-action><v-icon>home</v-icon></v-list-tile-action><v-list-tile-title>首页</v-list-tile-title></v-list-tile><v-list-group前置图标=account_circle"值=真"><v-list-tile slot="activator"><v-list-tile-title>用户</v-list-tile-title></v-list-tile><v-list-group不行动小组值=真"><v-list-tile slot="activator"><v-list-tile-title>管理员</v-list-tile-title></v-list-tile><v-list-tilev-for="(admin, i) 在管理员中":key="我"@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小组不行动><v-list-tile slot="activator"><v-list-tile-title>动作</v-list-tile-title></v-list-tile><v-list-tilev-for="(crud, i) in cruds":key="我"@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>我想在导航抽屉的右侧插入一些文字.然后我写了
<p>Hi</p></main>
在/v-navigation-drawer 之后.
在/v-app 之前
解决方案 您需要将 app
道具添加到您的 v-navigation-drawer
以将其用作应用程序布局.它会动态调整 v-navigation-drawer
的内容大小.
并且您需要将您的 Hi 包装到 v-content
中.
I am new on Vue and Vuetify framework.
and I directly copy these code from Vuetify. https://vuetifyjs.com/en/components/navigation-drawers
Here is the code.
https://codepen.io/kellymei/pen/NBzBEG
then Vuetify nagviation drawer main text (hi) displays on bottom instead of the right side
I want it to be in the right side of the nagviation drawer.
Please help thanks so much!!!!!!
<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>
I want to insert some text on the right side of the nagviation drawer.
then I wrote
<main>
<p>Hi</p>
</main>
After /v-navigation-drawer.
Before /v-app
解决方案 You need to add app
props to your v-navigation-drawer
to use it as part of the application layout. It's dynamically adjusting content sizing of your v-navigation-drawer
.
And you need to wrap your Hi into v-content
.
这篇关于Vuetify 导航抽屉主文本显示在底部而不是右侧的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文