Vue Pagination - Material

The MaterialPagination helps you to create a beautiful pagination list with its items.

Demo

<script setup>
// Vue Material Kit 2 components
import MaterialPagination from "@/components/MaterialPagination.vue";
import MaterialPaginationItem from "@/components/MaterialPaginationItem.vue";
</script>
<template>
 <MaterialPagination>
  <MaterialPaginationItem prev />
  <MaterialPaginationItem label="1" />
  <MaterialPaginationItem label="2" active />
  <MaterialPaginationItem label="3" />
  <MaterialPaginationItem label="4" />
  <MaterialPaginationItem label="5" disabled />
  <MaterialPaginationItem next />
 </MaterialPagination>
</template>

1<script setup>
2// Vue Material Kit 2 components
3import MaterialPagination from "@/components/MaterialPagination.vue";
4import MaterialPaginationItem from "@/components/MaterialPaginationItem.vue";
5</script>
6<template>
7 <MaterialPagination>
8  <MaterialPaginationItem prev />
9  <MaterialPaginationItem label="1" />
10  <MaterialPaginationItem label="2" active />
11  <MaterialPaginationItem label="3" />
12  <MaterialPaginationItem label="4" />
13  <MaterialPaginationItem label="5" disabled />
14  <MaterialPaginationItem next />
15 </MaterialPagination>
16</template>

Props Information

Name	Type	Default	Description
slot	node		The `MaterialPagination` has a default slot that receives `MaterialPaginationItem` as node.
color	'primary''secondary''info''success''warning''danger''error''light''dark'	success	Used to set the background of the `MaterialPagination`.
size	'sm''md''lg'	md	Used to set the size of the `MaterialPagination`.
label	string		Used to set `label` of the `MaterialPaginationItem`.
active	bool	false	Used to mark the `MaterialPaginationItem` as active.
disabled	bool	false	Used to mark the `MaterialPaginationItem` as disabled.
prev	bool	false	Used to add left-arrow to the `MaterialPaginationItem`. Avoid using it with the `label`.
next	bool	false	Used to add right-arrow to the `MaterialPaginationItem`. Avoid using it with the `label`.

Sizes

<script setup>
// Vue Material Kit 2 components
import MaterialPagination from "@/components/MaterialPagination.vue";
import MaterialPaginationItem from "@/components/MaterialPaginationItem.vue";
</script>
<template>
 <MaterialPagination size="sm">
  <MaterialPaginationItem prev />
  <MaterialPaginationItem label="1" />
  <MaterialPaginationItem label="2" active />
  <MaterialPaginationItem label="3" />
  <MaterialPaginationItem next />
 </MaterialPagination>

 <MaterialPagination size="md" color="primary">
  <MaterialPaginationItem prev />
  <MaterialPaginationItem label="1" />
  <MaterialPaginationItem label="2" active />
  <MaterialPaginationItem label="3" />
  <MaterialPaginationItem next />
 </MaterialPagination>

 <MaterialPagination size="lg" color="info">
  <MaterialPaginationItem prev />
  <MaterialPaginationItem label="1" />
  <MaterialPaginationItem label="2" active />
  <MaterialPaginationItem label="3" />
  <MaterialPaginationItem next />
 </MaterialPagination>
</template>

1<script setup>
2// Vue Material Kit 2 components
3import MaterialPagination from "@/components/MaterialPagination.vue";
4import MaterialPaginationItem from "@/components/MaterialPaginationItem.vue";
5</script>
6<template>
7 <MaterialPagination size="sm">
8  <MaterialPaginationItem prev />
9  <MaterialPaginationItem label="1" />
10  <MaterialPaginationItem label="2" active />
11  <MaterialPaginationItem label="3" />
12  <MaterialPaginationItem next />
13 </MaterialPagination>
14
15 <MaterialPagination size="md" color="primary">
16  <MaterialPaginationItem prev />
17  <MaterialPaginationItem label="1" />
18  <MaterialPaginationItem label="2" active />
19  <MaterialPaginationItem label="3" />
20  <MaterialPaginationItem next />
21 </MaterialPagination>
22
23 <MaterialPagination size="lg" color="info">
24  <MaterialPaginationItem prev />
25  <MaterialPaginationItem label="1" />
26  <MaterialPaginationItem label="2" active />
27  <MaterialPaginationItem label="3" />
28  <MaterialPaginationItem next />
29 </MaterialPagination>
30</template>