components

1.7 KB

1. # Pagination
3. Page numbers with Previous and Next, like `Previous 1 … 44 45 46 … 89 Next`. The first and the last page are always
4. there, the current page with one neighbour each side; "…" stands for the pages left out (a gap of one page shows that
5. page instead). At the start it shows `1 2 3 4 … 89 Next`, at the end `Previous 1 … 86 87 88 89`. Previous is missing on the
6. first page, Next on the last. The current page is filled with the accent colour (black without a theme).
7. Live demo: https://components.hybriel.worldapi.org/pagination
9. ## Use it in an app
11. Copy the folder `components/pagination/` (`pagination.hl`) (optionally `shared/tokens.hl` for the app's own accent; it carries its own `Style`), then compose it into a
12. page and say how many pages there are:
14. ```
15. import Pagination from './pagination.hl'
17. View {
18. Pagination { pages = 89 }
19. }
20. ```
22. - No script needed. One pagination per page (a composed component's members are the page's state, COMPONENTS.md §12).
23. - `previousLabel` / `nextLabel` are the button texts (default `Previous` / `Next`).
24. - Colours are the semantic tokens only, each with a black/white/grey fallback: the base look is black, white and greys (no frames; root README "Look"); an app that declares the WorldAPI tokens (layouts.worldapi.org's theme) restyles it (the current page: white on black).
26. ## Data out
28. None yet: the page cannot read the page number shown, and `emit` from the component does not reach the host
29. (hybriel#87). The first app that needs it (a ticket list) adds it.
31. ## Markup and states
33. `<pagination>` holds a `<nav>` with `<ol id="pagination-items">`; each entry is an `<li>` with a `<button>`: class `page`
34. (the current one also `current`), `step` (Previous / Next), `gap` (the "…", a click does nothing). Narrow
35. screens: the buttons wrap onto a second line.