Vue Pagination - Material

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

Demo

<template>
 <material-pagination>
  <material-pagination-item prev />
  <material-pagination-item label="1" active />
  <material-pagination-item label="2" disabled />
  <material-pagination-item label="3" />
  <material-pagination-item next />
 </material-pagination>
</template>

<script>
import MaterialPagination from "@/components/MaterialPagination.vue";
import MaterialPaginationItem from "@/components/MaterialPaginationItem.vue";

export default {
 components: { MaterialPagination, MaterialPaginationItem }, };
</script>

1<template>
2 <material-pagination>
3  <material-pagination-item prev />
4  <material-pagination-item label="1" active />
5  <material-pagination-item label="2" disabled />
6  <material-pagination-item label="3" />
7  <material-pagination-item next />
8 </material-pagination>
9</template>
10
11<script>
12import MaterialPagination from "@/components/MaterialPagination.vue";
13import MaterialPaginationItem from "@/components/MaterialPaginationItem.vue";
14
15export default {
16 components: { MaterialPagination, MaterialPaginationItem }, };
17</script>

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''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

<template>
  <material-pagination color="success" size="sm">
  <material-pagination-item prev />
  <material-pagination-item label="1" active />
  <material-pagination-item label="2" />
  <material-pagination-item label="3" />
  <material-pagination-item next />
</material-pagination>

<material-pagination color="primary" size="md">
  <material-pagination-item prev />
  <material-pagination-item label="1" active />
  <material-pagination-item label="2" />
  <material-pagination-item label="3" />
  <material-pagination-item next />
</material-pagination>

 <material-pagination color="info" size="lg">
  <material-pagination-item prev />
  <material-pagination-item label="1" active />
  <material-pagination-item label="2" />
  <material-pagination-item label="3" />
  <material-pagination-item next />
 </material-pagination>
</template>

<script>
import MaterialPagination from "@/components/MaterialPagination.vue";
import MaterialPaginationItem from "@/components/MaterialPaginationItem.vue";

export default {
 components: { MaterialPagination, MaterialPaginationItem, }, };
</script>

1<template>
2  <material-pagination color="success" size="sm">
3  <material-pagination-item prev />
4  <material-pagination-item label="1" active />
5  <material-pagination-item label="2" />
6  <material-pagination-item label="3" />
7  <material-pagination-item next />
8</material-pagination>
9
10<material-pagination color="primary" size="md">
11  <material-pagination-item prev />
12  <material-pagination-item label="1" active />
13  <material-pagination-item label="2" />
14  <material-pagination-item label="3" />
15  <material-pagination-item next />
16</material-pagination>
17
18 <material-pagination color="info" size="lg">
19  <material-pagination-item prev />
20  <material-pagination-item label="1" active />
21  <material-pagination-item label="2" />
22  <material-pagination-item label="3" />
23  <material-pagination-item next />
24 </material-pagination>
25</template>
26
27<script>
28import MaterialPagination from "@/components/MaterialPagination.vue";
29import MaterialPaginationItem from "@/components/MaterialPaginationItem.vue";
30
31export default {
32 components: { MaterialPagination, MaterialPaginationItem, }, };
33</script>