Vue Pagination - Argon

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

Demo

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

<script>
import ArgonPagination from "@/components/ArgonPagination.vue";
import ArgonPaginationItem from "@/components/ArgonPaginationItem.vue";

export default {
 components: {
   ArgonPagination,
   ArgonPaginationItem,
   },
 };
</script>

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

Props Information

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

Sizes

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

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

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

<script>
import ArgonPagination from "@/components/ArgonPagination.vue";
import ArgonPaginationItem from "@/components/ArgonPaginationItem.vue";

export default {
 components: {
   ArgonPagination,
   ArgonPaginationItem,
   },
 };
</script>

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