Вертикальный интервал Vuetify - PullRequest
Новая
       6

Вертикальный интервал Vuetify

1 голос
/ 18 июня 2020

11/10 Скорее всего, уже слишком поздно, и я нахожусь в режиме идиота, но здесь мы go ...

У меня есть список навигационных ссылок (v-list-item в v-list) ...

Я пытаюсь заставить одну из ссылок располагаться внизу ящика. Почему-то даже custom CSS не двигает, так что я застрял.

Вот что у меня, любая помощь приветствуется: 

 <v-navigation-drawer v-model="drawer" app clipped>
  <v-list>
    <!-- Navbar is displayed with for loop -->
    <v-list-item
      link
      v-for="(link, index) in links"
      :key="index"
      router
      :to="link.route"
    >
      <v-list-item-action>
        <v-icon>mdi-{{ link.icon }}</v-icon>
      </v-list-item-action>
      <v-list-item-content>
        <v-list-item-title>{{ link.name }}</v-list-item-title>
      </v-list-item-content>
    </v-list-item>

    <v-list-item
      link
      router
      :to="'/feature-request'"
      class="text--disabled"
      :align-self="end"
    >
      <v-list-item-action>
        <v-icon class="text--secondary">mdi-star-circle-outline</v-icon>
      </v-list-item-action>
      <v-list-item-content>
        <v-list-item-title class="text--secondary"
          >Feature Request</v-list-item-title
        >
      </v-list-item-content>
    </v-list-item>
  </v-list>
</v-navigation-drawer>

1 Ответ

1 голос
/ 19 июня 2020

Вы можете использовать гибкость для достижения желаемого. Для последнего элемента установите class mt-auto, который помещает последний элемент внизу. Здесь все еще есть gotcha , v-list-item имеет встроенное свойство flex class, поэтому вам нужно переопределить это: 

.v-list-item {
  flex: 0;
}

Итак, установите список на полную высоту и поместите flex : 

<v-list class="d-flex flex-column" height="100%">

Итерируйте первые элементы, как и у вас, и для последнего элемента поместите вышеупомянутые mt-auto: 

<v-list-item class="mt-auto">

A CODEPEN для справки.

...