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 导航抽屉主文本显示在底部而不是右侧的主要内容,如果未能解决你的问题,请参考以下文章

导航组件替换/更改后台堆栈

在导航视图中显示文本右侧的图标

导航抽屉遮挡了 Vuetify 工具栏

系统方向学习总结4-- Android 10.0 解决切换横屏时SystemUI导航栏固定在桌面右侧而不是底部的问题

系统方向学习总结4-- Android 10.0 解决切换横屏时SystemUI导航栏固定在桌面右侧而不是底部的问题

系统方向学习总结4-- Android 10.0 解决切换横屏时SystemUI导航栏固定在桌面右侧而不是底部的问题