@edmond_brakus
To create a scrollable v-list in Vuetify, you can use the 'v-list' component along with the 'overflow' CSS property. Here's an example of how to achieve this:
1
|
npm install vuetify |
1 2 3 4 5 |
import Vue from 'vue'; import Vuetify from 'vuetify'; import 'vuetify/dist/vuetify.min.css'; Vue.use(Vuetify); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<template> <v-list class="overflow-y-auto"> <v-list-item v-for="(item, index) in items" :key="index"> <v-list-item-content> <v-list-item-title>{{ item }}</v-list-item-title> </v-list-item-content> </v-list-item> </v-list> </template> <script> export default { data() { return { items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6', 'Item 7', 'Item 8', 'Item 9', 'Item 10'], }; }, }; </script> <style> .v-list { max-height: 200px; // Set the maximum height of the list border: 1px solid #e0e0e0; // Add border for styling } .overflow-y-auto { overflow-y: auto; // Enable vertical-scroll } </style> |
In this example, the 'v-list' component contains a list of items that will be displayed in a scrollable list. The 'overflow-y-auto' class is applied to the 'v-list' component to enable vertical scrolling for the list. You can adjust the maximum height and styling of the list by modifying the CSS properties.