component

TuxPagination

Page-number controls for result lists. Used by Landscape result tables, news collections, publication catalogs, any surface where N items spread across multiple pages. Native Vue (not UPagination) so the visual rhythm — square corners, maroon active page, tabular numerals — matches the system exactly.

canonical

Landscape-style results page

With status line. v-model'd to page1, current page 1. 

<TuxPagination
  v-model="page"
  :total="412"
  :page-size="20"
  show-status
  noun="result"
/>

middle of long range

Ellipsis truncation

When the page count is too long to show every number, the component shows the first/last page, ellipses for the gap, and sibling pages around the current. Currently on page 7 of 50.

small range

All numbers visible

Under ~7 pages, every number shows — no ellipses needed.

end of range

Last page state

Next button disables on the last page. Currently on 43 of 43.

props

Props + events

  • v-model — current page (1-indexed). Required.
  • total — total items across all pages. Required.
  • pageSize — items per page. Defaults to 20.
  • siblingCount — pages to show on each side of current. Defaults to 1.
  • boundaryCount — pages always shown at start/end. Defaults to 1.
  • showStatus — show "Showing X–Y of Z" line. Defaults to false.
  • noun — singular item name for the status line. Defaults to "result".