components pagination

components/pagination

Import: import { Pagination } from "@tundralibs/ui/pagination"

Rendered in every variant on the catalogue (deno task build:demos, then demo/index.html). Guides: Getting started · rAPId integration · Theming.

Functions

Pagination

Pagination(props: PaginationProps): Html

Types

PaginationProps

Prop	Type	Required	Description
id	string
page	number	yes
totalPages	number	yes
buildHref	(page: number) => string	yes	Build a page's URL — implement with rAPId's withQuery() (§7) so existing query params survive: (p) => withQuery(path, view.query, { page: p }).
siblingCount	number
target	string		Make every link a rAPId swap of target (a selector — the paginated region, e.g. #orders), pushed to history. Without target the runtime would swap the response into the link itself.
swappable	boolean
linkAttrs	Attrs
attrs	Attrs

Usage

Each example as the rAPId call and the HTML it renders — the markup a plain page writes by hand. Icons are inline SVG in the real output; they are shortened to <svg …>…</svg> here.

Pages of a table, swapped in place

target makes every link a rAPId swap of that region with history push; leave it out for plain links.

Pagination({ page: 3, totalPages: 12, buildHref: (p) => `/invoices?page=${p}`, target: "#invoices" })

<nav aria-label="Pagination">
  <ul class="pagination">
    <li>
      <a class="pagination__link" href="/invoices?page=2" aria-label="Previous page" data-action="/invoices?page=2" data-target="#invoices" data-swap="outer" data-push="">&#8249;</a>
    </li>
    <li>
      <a class="pagination__link" href="/invoices?page=1" aria-label="Page 1" data-action="/invoices?page=1" data-target="#invoices" data-swap="outer" data-push="">1</a>
    </li>
    <li>
      <a class="pagination__link" href="/invoices?page=2" aria-label="Page 2" data-action="/invoices?page=2" data-target="#invoices" data-swap="outer" data-push="">2</a>
    </li>
    <li>
      <a class="pagination__link" href="/invoices?page=3" aria-current="page" aria-label="Page 3" data-action="/invoices?page=3" data-target="#invoices" data-swap="outer" data-push="">3</a>
    </li>
    <li>
      <a class="pagination__link" href="/invoices?page=4" aria-label="Page 4" data-action="/invoices?page=4" data-target="#invoices" data-swap="outer" data-push="">4</a>
    </li>
    <li>
      <span class="pagination__ellipsis" aria-hidden="true">&hellip;</span>
    </li>
    <li>
      <a class="pagination__link" href="/invoices?page=12" aria-label="Page 12" data-action="/invoices?page=12" data-target="#invoices" data-swap="outer" data-push="">12</a>
    </li>
    <li>
      <a class="pagination__link" href="/invoices?page=4" aria-label="Next page" data-action="/invoices?page=4" data-target="#invoices" data-swap="outer" data-push="">&#8250;</a>
    </li>
  </ul>
</nav>

CSS hooks

Classes defined by components/pagination/pagination.css — structural, token-driven; override from an unlayered stylesheet (see Theming):

.pagination, .pagination__ellipsis, .pagination__link, .pagination__link--disabled