Vuetify is a popular UI framework for Vue apps.
In this article, we’ll look at how to work with the Vuetify framework.
Paginations
We can add pagination links with the v-pagination component.
The component is controlled by the v-model directive.
For example, we can write:
<template>
<div class="text-center">
<v-container>
<v-row justify="center">
<v-col cols="8">
<v-container class="max-width">
<v-pagination v-model="page" class="my-4" :length="15"></v-pagination>
</v-container>
</v-col>
</v-row>
</v-container>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
page: 1,
}),
};
</script>
to add the pagination links.
The v-pagination component has the length prop to set how many buttons to show.
v-model has the model to get and set the state of the page .
Limit Number of Links
We can set the maximum number of visible pages with the total-visible prop.
For example, we can write:
<template>
<div class="text-center">
<v-container>
<v-row justify="center">
<v-col cols="8">
<v-container class="max-width">
<v-pagination v-model="page" class="my-4" :length="15" :total-visible="8"></v-pagination>
</v-container>
</v-col>
</v-row>
</v-container>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
page: 1,
}),
};
</script>
We have the total-visible prop to set the max number of buttons to show.
Circle Buttons
The circle prop turns the buttons into circles.
For example, we can write:
<template>
<div class="text-center">
<v-container>
<v-row justify="center">
<v-col cols="8">
<v-pagination v-model="page" :length="5" circle></v-pagination>
</v-col>
</v-row>
</v-container>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
page: 1,
}),
};
</script>
to make the buttons circles.
Icons
The prev-icon and next-icon props let us change the previous and next button icons:
<template>
<div class="text-center">
<v-pagination v-model="page" :length="4" prev-icon="mdi-menu-left" next-icon="mdi-menu-right"></v-pagination>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
page: 1,
}),
};
</script>
Disabled
We can disable pagination buttons with the disabled prop:
<template>
<div class="text-center">
<v-pagination :length="3" disabled></v-pagination>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
page: 1,
}),
};
</script>
Parallax
The v-parallax component lets us create a 3D effect that makes an image appear to scroll slower than the window.
For example, we can use it by writing:
<template>
<v-parallax dark src="https://cdn.vuetifyjs.com/images/backgrounds/vbanner.jpg">
<v-row align="center" justify="center">
<v-col class="text-center" cols="12">
<h1 class="display-1 font-weight-thin mb-4">Hello world</h1>
<h4 class="subheading">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h4>
</v-col>
</v-row>
</v-parallax>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
page: 1,
}),
};
</script>
It takes the src prop to set the URL of the background image.
The default slot has the foreground content.
Conclusion
We have the v-pagination component to add the pagination buttons.
And we have the v-parallax component to add a parallax scrolling effect.
