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>