Прокручиваемое содержимое карточки с помощью Vuetify

#css #vuejs2 #flexbox #vuetify.js

Вопрос:

Здравствуйте, я пытаюсь создать прокручиваемое содержимое в card с помощью гибких классов утилит и компонентов Vuetify, но безуспешно. Это моя последняя версия кода, которую я пробовал:

https://codesandbox.io/embed/sharp-kilby-g3e4t?fontsize=14amp;hidenavigation=1amp;theme=dark

Я ожидаю, что это:

Я нашел несколько образцов с чистым flex, но я не могу сделать это с помощью Vuetify? Можете ли вы помочь мне отредактировать codesandbox, чтобы заставить его работать? Спасибо.

1. элементы в вашем codesandbox являются строками или предназначены для прокручиваемого содержимого?

2. @Mech спасибо за усилия, это должно быть как в sketch, чтобы карточка помещалась в контейнер страницы под панелью приложения, а в карточке был какой-нибудь заголовок или поисковый ввод, а под прокручиваемым содержимым. Это будет компонент списка vuetify, как в демо-версии в codesandbox.

3. @DenisStephanov давайте исправим это, вы можете связаться со мной по skype: syed_haroon

Ответ №1:

Одним из решений будет использование компонента, v-virtual-scroll встроенного в Vuetify.

например:

         <v-card class="flex-grow-0">
          <v-virtual-scroll
            :items="Array.from({length: 100}).map((_, index) => index)"
            :item-height="50"
            height="300"
          >
            <template v-slot="{ item }">
              <v-list-item>
                <v-list-item-content>
                  <v-list-item-title>Item {{ item }}</v-list-item-title>
                </v-list-item-content>
              </v-list-item>
            </template>
          </v-virtual-scroll>
        </v-card>

Обновленный CodeSandbox

Ответ №2:

Этот вопрос больше связан с CSS, чем Vuetify , поэтому позвольте мне объяснить вам, как вы можете это исправить. Допустим, что ваши разметки отображаются в браузере, как показано ниже html , либо оформите v-card__text , либо добавьте свой пользовательский класс my-list , если вы используете v-card__text для оформления, то обязательно добавьте в свой компонент тег scoped to style , иначе это повлияет на весь проект.

 <div class="v-card v-sheet theme--light">
  <div class="v-card__title">You Title goes here</div>
  <div class="v-card__text my-list">
    <ul>
      <li>Text</li>
      ...
    </ul>
  </div>
</div>

<style scoped>
  .my-list {
    // For eg. here 200px is MainNavBar   TitleBar and some padding/margins
    // keep on increasing height if you have more items placed above the v-card
    height: calc(100vh - 200px);
    overflow-y: auto;
  }
</style>

Ответ №3:

Вы можете установить высоту на v-list , а затем сделать ее прокручиваемой с помощью overflow-y: scroll;

 <!-- Set height to your `<v-list>` and add `overflow-y: scroll` -->
<v-list style="height: 250px; overflow-y: scroll">
  <v-list-item-group color="primary">
    <v-list-item v-for="(n) in 100" :key="n">
      <v-list-item-content>
        <v-list-item-title>Item {{ n }}</v-list-item-title>
      </v-list-item-content>
    </v-list-item>
  </v-list-item-group>
</v-list>

Я отредактировал ваш код, и вот рабочий пример в codesandbox.

Вот пример вывода того, что вы хотите, на основе вашего эскиза.