Pagination

To create full featured pagination element use this component.

Code:

  
    HTML
    
  
  <!-- With total count -->
<fvPagination :value="currentPage" :total="total" @input="currentPage = $event" />


<!-- Without total count -->
<fvPagination :value="currentPage2" :next="true" @input="currentPage2 = $event" />

  
    
    
  
  export default {
    data () {
        return {
            currentPage: 1,
            currentPage2: 1,
            total: 22
        }
    }
}

Examples:

View Source

With Total Count

…

Without Total Count

Custom Size (prop)

…

Sizes

…

Live Example

Total

Size

Navigation Buttons

Next Button

Prev Button

…

Notes:

If you click on selected page button in run-time, you can change current page by custom number.

API:

Name	Type	Default	Description
value	Number	1	Selected page number.
total	Number	1	Total pages count. if you havn't, you can play with the navigation, next and prev props and leave it.
size	Number	5	Length of pages appear to pagination. if you dont set total, it's not affect.
navigation	Boolean	true	Visibility of next/prev buttons.
next	Boolean	true	Handle disabled state of next button. If you dont set navigation. It's not usable. Also if you set the total and navigation props together, component consider this as false if value equal to total.
prev	Boolean	true	Handle disabled state of prev button. If you dont set navigation. It's not usable. Also if you set the total and navigation props together, component consider this as false if value equal to 1.

Name	Params	Description
input	newValue	Fired when component request to change value (when user try to change the current page).

Name	Description
.fv-size-xs	XSmall size
.fv-size-sm	Small size
.fv-size-md	Medium size (actived by default)
.fv-size-lg	Large size
.fv-size-xl	XLarge size