#135
More siblings
Pagination for 200 items at 10 per page with two sibling pages shown on each side of the current page.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "More siblings" pattern (@codeatlasdev/ui demo #135, display/pagination) in my app.
Call get_demo({ ids: ["#135"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Long result sets where users need to jump a few pages around the current one.
Keep these library parts, with the props and tokens the demo uses:
- Pagination from "@codeatlasdev/ui"
Behaviour to keep:
- `<Pagination count={200} perPage={10} siblingCount={2} />`
- `siblingCount={2}` sets how many pages show on each side of the current page
- Only `count`, `perPage` and `siblingCount` are set, nothing is bound
Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- Pagination
@codeatlasdev/ui
How it is built
- `<Pagination count={200} perPage={10} siblingCount={2} />`
- `siblingCount={2}` sets how many pages show on each side of the current page
- Only `count`, `perPage` and `siblingCount` are set, nothing is bound
Related
Loading source.