Pagination
Pages for tables and lists: numbered keys in a tray with the current page latched down, seven slots so the row never changes width. Compact, it is a transport with a track counter.
Kit part · Navigation · Paginations
Page wheel
Pagination as a thumbwheel. A knurled wheel stands in a recess with a window in its face, and the page number rolls past it on a paper tape. A key either side steps by one. The keys are plain links, so it pages without any script; the wheel is what a script adds.
- Element
- nav.tui-page-wheel
- Needs
- kit.css + kit.mjs
- Rules
- page-wheel.rules.md · 5
- Finishes
- Aluminium · Graphite · Porcelain · Black
- Volumes
- Tactile · Quiet
Variants
Every state, at once
Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.
Aluminium
| Part | First page | Middle | Last page | Focus |
|---|---|---|---|---|
| Page wheel |
Graphite
| Part | First page | Middle | Last page | Focus |
|---|---|---|---|---|
| Page wheel |
API
| Name | Kind | Values | What it does |
|---|---|---|---|
| nav.tui-page-wheel | element | aria-label | The tray. Name what is paged: “Circuits, pages”. |
| a[rel="prev"] · a[rel="next"] | element | href | The keys either side, real links. At an end the link has no href and carries aria-disabled="true". Script keeps them pointing at the neighbours as the wheel turns. |
| <tui-page-wheel> | element | page · pages · href | The wheel. page: the current page. pages: how many. href: a template such as "?page={page}". |
| href | attribute | “?page={page}” | With it a turn ends in going to that page, half a second after the last movement or at once on Enter. Without it the page changes in place. |
| .tui-page-wheel__window · __tape | class | the tape | The window and the list of numbers behind it. Without script the tape holds the current page alone. |
| .tui-page-wheel__of | class | “of 12” | The printed count. Hidden from assistive technology: the wheel’s value says it. |
| role="spinbutton" | attribute | set by script | On the wheel, with aria-valuemin, aria-valuemax, aria-valuenow and aria-valuetext “Page 3 of 12”. |
| page | property | number | Read or set the page. Setting it turns the wheel. |
| tui-page | event | detail.page · pages | Each time the number in the window changes. Bubbles. |
| --pos | custom property | number | The turn in pages, fractional while moving, set by script. The ridges travel with it. |
| pageWheelHTML · pageWheelClamp · pageWheelHref · pageWheelTurn | function | kit.mjs | The markup for a server; the nearest page that exists; a template filled in; and a drag turned into pages. |
| drag · scroll | pointer | on the wheel | Drag up or right to go on, 24px to a page; scroll over it, a page a notch. At either end the scroll goes on to the page. |
| ↑ → · ↓ ← | keyboard | on the wheel | One page on or back. |
| PageUp · PageDown | keyboard | on the wheel | Ten pages. |
| Home · End · Enter | keyboard | on the wheel | The first page, the last page, and go to the page now. |
Markup
<nav class="tui-page-wheel" aria-label="Circuits, pages">
<a class="tui-key tui-key--icon" rel="prev" href="?page=2" aria-label="Previous page">…</a>
<tui-page-wheel page="3" pages="12" href="?page={page}">
<span class="tui-page-wheel__window">
<ol class="tui-page-wheel__tape"><li aria-current="page">3</li></ol>
</span>
</tui-page-wheel>
<span class="tui-page-wheel__of">of 12</span>
<a class="tui-key tui-key--icon" rel="next" href="?page=4" aria-label="Next page">…</a>
</nav>import { pageWheelHTML } from '/kit/kit.mjs'; // also defines <tui-page-wheel>
// The same markup, from a server or a script. With href the keys are real links.
el.innerHTML = pageWheelHTML({ page: 3, pages: 12, href: '?page={page}', label: 'Circuits, pages' });
// Without href the page changes in place:
const wheel = document.querySelector('tui-page-wheel');
wheel.page; // 3
wheel.addEventListener('tui-page', (e) => draw(e.detail.page));Needs kit.css and kit.mjs. How to install the kit.
Accessibility
- The two keys are links to real pages, named “Previous page” and “Next page”. With no script they are the whole control, and the window still says which page you are on.
- The wheel is a
spinbuttonwith a name, a minimum, a maximum and a value in words, so a screen reader says “Circuits, Page 3 of 12”, and the new value is spoken as it changes. - The window and the printed “of 12” are hidden from assistive technology, because the value already says both.
- Every way of turning it (drag, scroll, keys) lands on whole page numbers and passes through none it should not; PageUp and PageDown are ten.
- Scrolling over the wheel turns it only while there is a page to turn to. At either end the scroll goes through to the page, so the wheel never traps it.
- With reduced motion the wheel jumps to the page: the tape and the ridges do not glide, and everything is still said.
How it’s built
A wheel is a cylinder seen from the side, so it is three shadings on a face: dark at the top, light through the middle and dark below, with ridges across it that shrink no further than the eye needs. The ridges move with a custom property, --pos, the turn in pages, so the same number that rolls the tape turns the wheel. The window is cut into its face with the tape behind it: five numbers, the current one in the middle, each a row tall, shifted by the fraction of a turn so the neighbours slide into view. A 5px gap round the 10px wheel makes the tray’s 15px corner. The element adds the behaviour and nothing else: drag, wheel, keys, the spinbutton semantics, and the two keys’ addresses; the markup underneath is what a server sends.
Rules
page-wheel.rules.mdIn the brain
A known, modest number of pages, turned by hand and still reachable by link.
5 rules in this file, with the foundations they rest on and the anti-patterns that break them. Full rules ship in the brain with the Pass.