Vue Pagination - Soft UI
Help the user select a specific page from a range of pages with our Pagination component based on Vue.js. See below the examples.
Default Pagination
Use this example to create a simple and versatile pagination list.
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.
|
Pagination Sizes
Use this example to create a pagination component on different sizes and colors.