The QPagination component is available for whenever a pagination system is required. It offers the user a simple UI for moving between items or pages.
There are two modes in which QPagination operates: with buttons only or with an inputbox. The latter allows the user to go to a specific page by clicking/tapping on the inputbox, typing the page number then hitting Enter key. If the new page number is within valid limits, the model will be changed accordingly.
Usage
Design
The following are a few examples, but not an exhaustive list:
Custom icons
With input
Max pages shown
Handling boundary
Accessibility v2.25+
QPagination renders as a navigation landmark. The first/previous/next/last buttons get localized aria-labels from the Quasar Language Pack in use, the numbered buttons are labeled with the page they lead to, and the active page’s button is marked with aria-current="page". The landmark itself is named from the same language pack (pagination.label); pass your own aria-label (it falls through to the root element) to tell several paginations on one page apart. It also carries aria-disabled at all times, reporting true or false according to the disable prop.
In input mode, the typed page number is committed when the user hits Enter or when the field loses focus.