VsudPagination

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

Demo

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

<script>
import VsudPagination from "@/components/VsudPagination.vue";
import VsudPaginationItem from "@/components/VsudPaginationItem.vue";

export default {
 components: {
   VsudPagination,
   VsudPaginationItem,
   },
 };
</script>

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

Props Information

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

Sizes

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

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

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

<script>
import VsudPagination from "@/components/VsudPagination.vue";
import VsudPaginationItem from "@/components/VsudPaginationItem.vue";

export default {
 components: {
   VsudPagination,
   VsudPaginationItem,
   },
 };
</script>

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