Use this example to create a simple and versatile pagination list.
1<template>
2 <soft-pagination color="success">
3 <soft-pagination-item prev />
4 <soft-pagination-item label="1" active />
5 <soft-pagination-item label="2" disabled />
6 <soft-pagination-item label="3" />
7 <soft-pagination-item next />
8 </soft-pagination>
9</template>
10
11<script>
12import SoftPagination from "@/components/SoftPagination.vue";
13import SoftPaginationItem from "@/components/SoftPaginationItem.vue";
14export default { components: { SoftPagination, SoftPaginationItem, }, };
15</script>
Props Information
| Name |
Type |
Default |
Description |
| slot |
node |
|
The SoftPagination has a default slot that
receives
SoftPaginationItem as node.
|
| color |
'primary''secondary''info''success''warning''danger''light''dark'
|
success |
Used to set the background of the
SoftPagination.
|
| size |
'sm''md''lg'
|
md |
Used to set the size of the SoftPagination.
|
| label |
string |
|
Used to set label of the
SoftPaginationItem.
|
| active |
bool |
false |
Used to mark the SoftPaginationItem as
active.
|
| disabled |
bool |
false |
Used to mark the SoftPaginationItem as
disabled.
|
| prev |
bool |
false |
Used to add left-arrow to the
SoftPaginationItem. Avoid using it with the
label.
|
| next |
bool |
false |
Used to add right-arrow to the
SoftPaginationItem. Avoid using it with the
label.
|
Use this example to create a pagination component on different
sizes and colors.
1<template>
2 <soft-pagination color="success" size="sm">
3 <soft-pagination-item prev />
4 <soft-pagination-item label="1" active />
5 <soft-pagination-item label="2" />
6 <soft-pagination-item label="3" />
7 <soft-pagination-item next />
8</soft-pagination>
9
10<soft-pagination color="primary" size="md">
11 <soft-pagination-item prev />
12 <soft-pagination-item label="1" active />
13 <soft-pagination-item label="2" />
14 <soft-pagination-item label="3" />
15 <soft-pagination-item next />
16</soft-pagination>
17
18<soft-pagination color="info" size="lg">
19 <soft-pagination-item prev />
20 <soft-pagination-item label="1" active />
21 <soft-pagination-item label="2" />
22 <soft-pagination-item label="3" />
23 <soft-pagination-item next />
24</soft-pagination>
25</template>
26
27<script>
28import SoftPagination from "@/components/SoftPagination.vue";
29import SoftPaginationItem from "@/components/SoftPaginationItem.vue";
30export default { components: { SoftPagination, SoftPaginationItem, }, };
31</script>