vueda

Appearance

View Markdown

Pagination ​

This page shows the Visual Contract of the pagination controls: page primitives, the footer bar and its label, and the footer that list views render. Components describes the rules every component page shares. Breadcrumb, NavigationMenu, and Menubar are on Navigation.

Primitives ​

Pagination renders a <nav> landmark, and PaginationContent lays its controls out in one row. A re-skin keeps these parts distinct:

  • Page items: PaginationItem renders one numbered page as a button. Inactive pages gain a fill and edge on hover. The current page keeps a foreground-colored edge at rest, so it stands apart from the navigation buttons. Its size prop takes sm, default, lg, icon-sm, icon, or icon-lg, the size tiers of Button, and defaults to icon.
  • Navigation buttons: PaginationFirst, PaginationPrevious, PaginationNext, and PaginationLast are icon-only outline squares on the compact control tier. First and Last use double-angle glyphs; Previous and Next use single chevrons. Each carries a screen-reader label.
  • Ellipsis: PaginationEllipsis marks omitted pages and carries a "More pages" screen-reader label.
  • Disabled: a disabled control takes no pointer input. A disabled outline control keeps only its glyph or number.

Theme keys: Pagination, PaginationContent, PaginationItem, NavigationPaginationNavButton, PaginationEllipsis. Control heights: --vueda-control-height and --vueda-control-height-sm.

PaginationBar is the footer row that sits against the bottom of a data surface, such as a grid or table. It draws a Hairline top edge, the card surface, and bottom corners that match the card above it. It spreads its contents to both ends of the row. You compose those contents in its default slot.

PaginationMeta is the count or page summary label. It renders mono supporting text in the muted color.

Theme keys: NavigationPaginationBar, PaginationMeta.

PaginationFooter is the footer that ViewList and ViewHistoryList render. It fills a PaginationBar with two groups:

  • Start: the "Showing X to Y of N" range read-out, with the figures emphasized against the muted label, then the rows-per-page selector.
  • End: the navigation cluster: First, Previous, a mono "Page N of M" indicator, Next, and Last.

On a narrow viewport the groups wrap and center, with the read-out and selector above the navigation cluster.

The All entry, last in the default options, loads every page. Choosing it hides the navigation cluster, and the read-out changes to "All N results". List Preferences describes how a list saves the chosen page size.

While loading is true, the read-out is blank and the indicator shows "Page N of ?". The navigation controls show their disabled state.

To replace the read-out or the selector, fill the meta or rows-per-page slot. Setting showTotalRecordNum to false hides the default read-out.

Theme key: PaginationFooter.