vue.js - Vuetify 导航抽屉主文本显示在底部而不是右侧
问题描述
我是 Vue 和 Vuetify 框架的新手。我直接从 Vuetify 复制这些代码。https://vuetifyjs.com/en/components/navigation-drawers
这是代码。 https://codepen.io/kellymei/pen/NBzBEG
然后 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 之前
解决方案
您需要向您添加app
道具以将v-navigation-drawer
其用作应用程序布局的一部分。它动态调整你的内容大小v-navigation-drawer
。
你需要把你的Hi包装成v-content
.
推荐阅读
- .htaccess - htaccess 重写从参数重定向到子文件夹
- c# - 在 Xamarin.Forms 中,以纯文本形式显示视图模型中的列表的最简单方法是什么?
- java - 如何在java中制作自定义嵌套布局
- amazon-ecs - 无法将更新的 ECS 映像部署到现有的
- r - 图像到 csv 和 R 中多个图像的数据集
- python - Sqlite3:如何在 Python 中从 SUM() 和 Group By 查询中获取新组
- r - 我可以使用 charToRaw 来识别可以帮助我将字符串分成多变量的特殊空间吗?
- clojure - 为什么 clojure (if-not) 宏调用 (not)?
- python - 无法在 Python 中启动 Redis Queue (RQ) worker
- python - Python重复我的代码很多次我想要