@xsolla/xui-pagination 0.174.3 → 0.175.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +42 -0
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,6 +1,48 @@
|
|
|
1
1
|
# Pagination
|
|
2
2
|
|
|
3
3
|
A cross-platform React pagination component that adapts page-button display with ellipses for large page counts.
|
|
4
|
+
<!-- BEGIN:xui-mcp-instructions:pagination -->
|
|
5
|
+
Pagination splits a large set of results into pages and lets users move between them. It shows the current page, nearby pages, and previous/next arrows, collapsing long ranges with an ellipsis.
|
|
6
|
+
|
|
7
|
+
### When to use
|
|
8
|
+
|
|
9
|
+
- To break a long list, table, or set of results into navigable pages
|
|
10
|
+
- When the total number of pages is known and users may jump to a specific one
|
|
11
|
+
|
|
12
|
+
### When not to use
|
|
13
|
+
|
|
14
|
+
- For continuously loading content — use infinite scroll or a *"Load more"* instead
|
|
15
|
+
- For step-by-step flows — use Progress step or a Stepper instead
|
|
16
|
+
- When all results comfortably fit on one page
|
|
17
|
+
|
|
18
|
+
### Content guidelines
|
|
19
|
+
|
|
20
|
+
Always make the current page clearly distinct from the rest.
|
|
21
|
+
|
|
22
|
+
Collapse long ranges with *"…"*, keeping the first, last, current, and neighbouring pages visible.
|
|
23
|
+
|
|
24
|
+
Use page numbers as the main affordance and the arrows for moving one page at a time.
|
|
25
|
+
|
|
26
|
+
### Behaviour guidelines
|
|
27
|
+
|
|
28
|
+
Basic shows a small fixed range of pages with arrows.
|
|
29
|
+
|
|
30
|
+
Advanced-first / -between / -last adapt which numbers and ellipses appear based on whether the current page is near the start, middle, or end.
|
|
31
|
+
|
|
32
|
+
Previous/next move one page and are disabled at the first and last page.
|
|
33
|
+
|
|
34
|
+
Selecting a number jumps to that page; the current page is active and not clickable. Size M and S scale the whole control.
|
|
35
|
+
|
|
36
|
+
### Accessibility
|
|
37
|
+
|
|
38
|
+
Expose pagination as a navigation landmark with an accessible name (e.g. *"Pagination"*).
|
|
39
|
+
|
|
40
|
+
Mark the current page with aria-current=*"page"*.
|
|
41
|
+
|
|
42
|
+
Label the previous/next arrows and disable them at the boundaries; treat the ellipsis as decorative, not a focus stop.
|
|
43
|
+
|
|
44
|
+
Keep it keyboard-operable with a visible focus indicator.
|
|
45
|
+
<!-- END:xui-mcp-instructions:pagination -->
|
|
4
46
|
|
|
5
47
|
## Installation
|
|
6
48
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-pagination",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.175.0",
|
|
4
4
|
"main": "./web/index.js",
|
|
5
5
|
"module": "./web/index.mjs",
|
|
6
6
|
"types": "./web/index.d.ts",
|
|
@@ -10,8 +10,8 @@
|
|
|
10
10
|
"build:native": "PLATFORM=native tsup"
|
|
11
11
|
},
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"@xsolla/xui-core": "0.
|
|
14
|
-
"@xsolla/xui-primitives-core": "0.
|
|
13
|
+
"@xsolla/xui-core": "0.175.0",
|
|
14
|
+
"@xsolla/xui-primitives-core": "0.175.0"
|
|
15
15
|
},
|
|
16
16
|
"peerDependencies": {
|
|
17
17
|
"react": ">=16.8.0"
|