Vuetify: как добавить аватар или значок в нижнюю часть навигационного ящика


Vuetify: как добавить аватар или значок в нижнюю часть навигационного ящика

27.01.2019 02:45:20 Просмотров 60 Источник

Я пытаюсь создать боковую панель, используя 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, но безрезультатно.

Что я здесь упускаю?

У вопроса есть решение - Посмотреть?

Ответы - Vuetify: как добавить аватар или значок в нижнюю часть навигационного ящика / Vuetify: How to add an avatar or an icon to the bottom of a navigation drawer

Является ответом!
Beniamin H

27.01.2019 02:54:18

Добавление justify-end к кнопке и списку обертывания и btn в v-layout с column и fill-height должно сделать эту работу за вас: 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>
DigitalDrifter

27.01.2019 03:29:41

Оберните свой навигационный список и аватар в v-layout с реквизитами justify-space-between, column и fill-height:

Vue.use(Vuetify)

new Vue({
  el: '#app',
  data: () => ({
    drawer: true
  })
})
<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>

Ruben Serrano

30.07.2019 02:41:47

Кажется, что просто добавление fill-height к v-layout заполнит высоту элемента, поэтому любой другой элемент, который вы добавите следующим, будет вынужден находиться внизу.

jcoleau

11.06.2020 05:39:45

Вы можете использовать слот внутри компонента навигационного ящика следующим образом :

<template v-slot:append>
    <div class="pa-2">
       <v-btn block>Logout</v-btn>
    </div>
 </template>
Помочь в развитии проекта:
Закрыть X