How to create scrollable v-list in vuetify?
How to create scrollable v-list in vuetify?
1 answer
by
jasen_gottlieb ,
2 months ago
@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:
- Start by installing Vuetify if you haven't already:
1
|
npm install vuetify |
- Import Vuetify in your main.js file:
1 2 3 4 5 |
import Vue from 'vue'; import Vuetify from 'vuetify'; import 'vuetify/dist/vuetify.min.css'; Vue.use(Vuetify); |
- Use the 'v-list' component in your Vue template and add the 'overflow-y-auto' class to make the list scrollable:
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.