Question

我找到了这个密码笔：https://codepen.io/carl_/pen/QWwgqBa，它与我想要的功能非常接近。但是右侧没有内容/文本。而且我不知道如何在右侧添加内容。

我试图通过Google搜索该问题，并找到了“添加v内容”，“它必须在v-app内”之类的解决方案。但是，这些内容实际上都没有放在右边。它结束于卡下方或导航抽屉内部。

如何在菜单右侧获取内容？

<div id="app">
  <v-app id="inspire">
    <v-card style="width:800px;margin:40px auto">
      <v-navigation-drawer
        expand-on-hover
        permanent
      >
        <template v-slot:prepend>
          <v-list>
            <v-list-item>
              <v-list-item-avatar>
                <v-img src="https://randomuser.me/api/portraits/women/85.jpg"></v-img>
              </v-list-item-avatar>
            </v-list-item>

            <v-list-item
              link
              two-line
            >
              <v-list-item-content>
                <v-list-item-title class="title">Sandra Adams</v-list-item-title>
                <v-list-item-subtitle>sandra_a88@gmail.com</v-list-item-subtitle>
              </v-list-item-content>
              <v-list-item-action>
                <v-icon>mdi-menu-down</v-icon>
              </v-list-item-action>
            </v-list-item>
          </v-list>
        </template>

        <v-divider></v-divider>

        <v-list
          nav
          dense
        >
          <v-list-item link>
            <v-list-item-icon>
              <v-icon>mdi-folder</v-icon>
            </v-list-item-icon>
            <v-list-item-title>My Files</v-list-item-title>
          </v-list-item>
          <v-list-item link>
            <v-list-item-icon>
              <v-icon>mdi-account-multiple</v-icon>
            </v-list-item-icon>
            <v-list-item-title>Shared with me</v-list-item-title>
          </v-list-item>
          <v-list-item link>
            <v-list-item-icon>
              <v-icon>mdi-star</v-icon>
            </v-list-item-icon>
            <v-list-item-title>Starred</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-navigation-drawer>
    </v-card>
  </v-app>
</div>

Answer 1

<v-layout>是我需要添加的属性。

如何将内容添加到Vuetify（v-navigation-drawer）

1 个答案: