Vuetify nagviation drawer main text displays on bottom instead of the right side

问题

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

Output of the code below

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

回答1:

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.

CodePen

来源：https://stackoverflow.com/questions/51682277/vuetify-nagviation-drawer-main-text-displays-on-bottom-instead-of-the-right-side

标签

Vue.js

vuetify.js