Pagination The Quasar Pagination component is available for whenever a pagination system is required. It offers the user a simple UI to help you in moving between pages/items.
There are two modes in which QPagination operates: with buttons only or with an inputbox. The latter mode allows the user to go to a specific page by clicking/tapping on the inputbox, typing the page number then hitting Enter key and if the new page number is within valid limits, the model will be changed accordingly.
Installation Edit /quasar.conf.js:framework: { components: ['QPagination' ] }
Basic Usage <q-pagination v-model ="page" :max ="17" />
Vue Properties Supports v-model.
Vue Property Type Description minNumber Number of the first page; Default: 1 maxNumber (Required ) Number of last page colorString One from Quasar Color Palette text-colorString Text color of current selection button, one from Quasar Color Palette sizeString Button size (check “size” prop from Buttons) inputBoolean Use inputbox mode instead of buttons boundary-linksBoolean Show boundary button links boundary-numbersBoolean Show boundary number buttons direction-linksBoolean Show direction buttons ellipsesBoolean Show ellipses when pages available > “max-pages” prop. max-pagesNumber Maximum number of page links to display at a time. disableBoolean If no value is provided (empty attribute), then it’s considered as set to true.
If you’d like to set the minimum starting page or the max number of pages, you can do so, as in the example below.<template > <q-pagination v-model ="page" :min ="minPages" :max ="maxPages" /> </template > <script > export default { data () { return { page: 4, minPages: 4, maxPages: 27 } } } </script >
This will cause the pagination to initially render to page 4 and not allow the user to go below page 4.
Vue Events Vue Event Description @input(newVal)Triggered immediately on model value change. @change(newVal)Triggered on lazy model value change.
Examples <q-pagination v-model ="page" :min ="1" :max ="6" />
<q-pagination input v-model ="page" :min ="1" :max ="6" />
With maximum number of links & custom color <q-pagination v-model ="page2" color ="secondary" :min ="1" :max ="15" :max-pages ="6" />
With no ellipses <q-pagination v-model ="page2" color ="amber" text-color ="black" :min ="1" :max ="15" :max-pages ="6" :ellipses ="false" />
With boundary links <q-pagination v-model ="page2" color ="purple" :min ="1" :max ="15" :max-pages ="6" boundary-links />
With direction links <q-pagination v-model ="page2" color ="teal" :min ="1" :max ="15" :max-pages ="6" direction-links />
With custom interval <q-pagination v-model ="page3" :min ="5" :max ="10" />
Mix and match <q-pagination v-model ="page4" color ="tertiary" :min ="7" :max ="18" :max-pages ="8" boundary-links direction-links />
Quasar 
