![](/img/trans.png)
[英]How to add a gradient to an image in a v-navigation-drawer in Vuetify 3, Vue 3?
[英]How to add content to Vuetify (v-navigation-drawer)
我找到了這個代碼筆: 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>
<v-layout>
是我需要添加的屬性。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.