J'essaie de créer une barre latérale, en utilisant Vuetify, où il y aura des actions communes en haut et l'avatar de l'utilisateur en bas.
J'utilise v-navigation-drawer et jusqu'à présent, j'ai trouvé ceci:
<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-->
Donc, comme vous pouvez le voir après ma v-list j'ai utilisé un v-divider et placé l'icône (ou l'avatar) ci-dessous.
Le problème est que je ne peux pas déplacer tout cela vers le bas du v-navigation-drawer . J'ai essayé d'utiliser v-flex autour de la v-list et du v-btn final, mais en vain.
Qu'est-ce que j'oublie ici?
4 Réponses :
L'ajout de justify-end au bouton et à la liste de wrapping et btn dans v-layout avec column et fill-height devrait faire le travail pour vous: https://codepen.io/anon/pen/daMXqp?editors=1000
<v-layout align-center justify-space-between column fill-height>
<v-list>
...
</v-list>
<v-btn
justify-end
flat
exact
icon
color="green"
><v-icon>dashboard</v-icon></v-btn>
</v-layout>
Merci pour votre réponse, mais cela ne fait pas descendre l'icône complètement. Vous pouvez vous voir si vous développez le panneau de sortie de votre codepen.
Oui, tu as raison. J'essaye de trouver une autre solution.
Cela m'a aidé à trouver une solution de travail. J'ai mis à jour la réponse.
Enveloppez votre liste de navigation et votre avatar dans une v-layout en v-layout en v-layout avec les accessoires justify-space-between , column et fill-height :
<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.22/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
<v-app id="app">
<v-navigation-drawer v-model="drawer" fixed app>
<v-layout fill-height column justify-space-between>
<v-list dense>
<v-list-tile @click="">
<v-list-tile-action>
<v-icon>home</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>Home</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
<v-list-tile @click="">
<v-list-tile-action>
<v-icon>contact_mail</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>Contact</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
<v-avatar color="red">
<v-icon dark>account_circle</v-icon>
</v-avatar>
</v-layout>
</v-navigation-drawer>
<v-toolbar color="indigo" dark fixed app>
<v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
<v-toolbar-title>Application</v-toolbar-title>
</v-toolbar>
<v-content>
<v-container fluid fill-height>
<v-layout justify-center align-center>
<v-flex text-xs-center>
</v-flex>
</v-layout>
</v-container>
</v-content>
</v-app>Vue.use(Vuetify)
new Vue({
el: '#app',
data: () => ({
drawer: true
})
})Il semble que le simple ajout de fill-height à la v-layout remplira la hauteur de l'élément, donc tout autre élément que vous ajouterez ensuite sera forcé d'être en bas.
Vous pouvez utiliser un emplacement à l'intérieur de votre composant de tiroir de navigation comme ceci:
<template v-slot:append>
<div class="pa-2">
<v-btn block>Logout</v-btn>
</div>
</template>
Merci pour cela! Ils devraient rendre cela plus clair dans la documentation.
Très bonne réponse. Et c'est maintenant dans la documentation ici . N'oubliez pas que vous pouvez modifier cette page Github