时间戳

首页 > 解决方案 > 如何将内容添加到 Vuetify (v-navigation-drawer)

vue.js - 如何将内容添加到 Vuetify (v-navigation-drawer)

问题描述

我找到了这个codepen：https ://codepen.io/carl_/pen/QWwgqBa ，它非常符合我的要求。但是右侧没有内容/文本。而且我不知道如何在右侧添加内容。

我试图用谷歌搜索这个问题，并找到了像“添加 v-content”、“它需要在 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>

标签： vue.jsvuetify.js

解决方案

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

推荐阅读