Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
2.0k views
in Technique[技术] by (71.8m points)

nuxt.js - How do I center vertically a v-list in v-navigation-drawer mini-variant in vuetify?

I have a navigation drawer with mini-variant and expand-on-hover-option

I want to center my v-list vertically in the drawer

enter image description here

This is my code :

<v-navigation-drawer permanent color="primary" dark app expand-on-hover>
  <v-list-item link :to="'/'" class="mx-n2">
    <v-list-item-avatar>
      <v-img :src="require(`@/assets/icons/logo-mini.svg`)"/>
    </v-list-item-avatar>
    <v-list-item-title>{{title}}</v-list-item-title>
  </v-list-item>
  <v-list
    nav
    style="padding: 0"
    class="d-flex flex-column align-self-center"
  >
    <v-list-item
      v-for="page in pages"
      :key="page.label"
      link
      :to="page.link"
    >
      <v-list-item-avatar class="mr-4">
        <v-img :src="require(`@/assets/icons/${page.icon}`)"/>
      </v-list-item-avatar>
      <v-list-item-title class="text-no-wrap">
        {{ page.label }}
      </v-list-item-title>
    </v-list-item>
  </v-list>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

I've had this problem too. I solved this problem. I'm typing the height value and I use align-center, justify-center and fill-height* classes in <v-list-item>

<v-list height="..vh">
    <v-list-item class="px-0 align-center justify-center fill-height">

I use it in my project as follows:

<v-navigation-drawer permanent expand-on-hover>
            <v-list height="90vh">
                <v-list-item class="px-0 align-center justify-center fill-height">
                    <v-list-item-content>
                        <v-list-item link>
                            <v-list-item-icon>
                                <v-icon>mdi-home</v-icon>
                            </v-list-item-icon>
                            <v-list-item-title>Lorem ipsum</v-list-item-title>
                        </v-list-item>
                        <v-list-item link>
                            <v-list-item-icon>
                                <v-icon>mdi-home</v-icon>
                            </v-list-item-icon>
                            <v-list-item-title>Lorem ipsum</v-list-item-title>
                        </v-list-item>
                        <v-list-item link>
                            <v-list-item-icon>
                                <v-icon>mdi-home</v-icon>
                            </v-list-item-icon>
                            <v-list-item-title>Lorem ipsum</v-list-item-title>
                        </v-list-item>
                    </v-list-item-content>
                </v-list-item>
            </v-list>
        </v-navigation-drawer>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...