作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我正在尝试使用 Vuetify 创建一个侧边栏,顶部会有一些常用操作,用户头像会在底部。
我正在使用 v-navigation-drawer
到目前为止,我已经想出了这个:
<template>
<v-navigation-drawer
app
permanent
mini-variant="true"
class="cyan lighten-3"
>
<v-list>
<!-- Timeline action -->
<v-list-tile>
<v-list-tile-action>
<v-btn
flat
exact
icon
color="white"
>
<v-icon>timeline</v-icon>
</v-btn>
</v-list-tile-action>
</v-list-tile>
<!-- Sms action -->
<v-list-tile>
<v-list-tile-action>
<v-btn
flat
exact
icon
color="white"
>
<v-icon>sms</v-icon>
</v-btn>
</v-list-tile-action>
</v-list-tile>
<!-- Calendar action -->
<v-list-tile>
<v-list-tile-action>
<v-btn
flat
exact
icon
color="white"
>
<v-icon>calendar_today</v-icon>
</v-btn>
</v-list-tile-action>
</v-list-tile>
<!-- Settings Action -->
<v-list-tile>
<v-list-tile-action>
<v-btn
flat
exact
icon
color="white"
>
<v-icon>settings</v-icon>
</v-btn>
</v-list-tile-action>
</v-list-tile>
</v-list>
<v-divider></v-divider>
<!--This should be the avatar but I used a btn for demo purposes-->
<v-btn
flat
exact
icon
bottom
color="red"
>
<v-icon>timeline</v-icon>
</v-btn>
</v-navigation-drawer>
</template>
<!-- <script> and <style> follow after this-->
所以你可以在我的 v-list
之后看到我使用了 v-divider
并将图标(或头像)放在下方。
问题是我无法将它一直移动到 v-navigation-drawer
的底部.我尝试使用 v-flex
v-list
周围和最后的 v-btn
但无济于事。
我在这里错过了什么?
最佳答案
您可以像这样在抽屉式导航组件中使用插槽:
<template v-slot:append>
<div class="pa-2">
<v-btn block>Logout</v-btn>
</div>
</template>
关于vue.js - 验证 : How to add an avatar or an icon to the bottom of a navigation drawer,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54383867/
我是一名优秀的程序员,十分优秀!