@xsolla/xui-segmented 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 +46 -0
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -1,6 +1,52 @@
|
|
|
1
1
|
# Segmented
|
|
2
2
|
|
|
3
3
|
A cross-platform React segmented control component for switching between related views or filters. Similar to iOS's UISegmentedControl.
|
|
4
|
+
<!-- BEGIN:xui-mcp-instructions:segmented -->
|
|
5
|
+
Segmented is a control that lets users choose one option from a small set of mutually exclusive choices, all shown side by side. It's commonly used to switch between views, modes, or filters, with the selected segment visually highlighted.
|
|
6
|
+
|
|
7
|
+
### When to use
|
|
8
|
+
|
|
9
|
+
- To switch between a few mutually exclusive views, modes, or filters
|
|
10
|
+
- When all options should stay visible and easy to compare
|
|
11
|
+
- For a small set of options (2–7) with short labels
|
|
12
|
+
|
|
13
|
+
### When not to use
|
|
14
|
+
|
|
15
|
+
- For many options or long labels — use a Select or Tabs instead
|
|
16
|
+
- When more than one option can be active — use a group of toggles or checkboxes
|
|
17
|
+
- To trigger actions rather than switch state — use Buttons
|
|
18
|
+
- For a simple on/off — use a Switch
|
|
19
|
+
|
|
20
|
+
### Content guidelines
|
|
21
|
+
|
|
22
|
+
Keep labels short and parallel in structure — one or two words each.
|
|
23
|
+
|
|
24
|
+
Keep the number of segments small (the example tops out around 7) so they all fit without crowding.
|
|
25
|
+
|
|
26
|
+
Always keep exactly one segment selected.
|
|
27
|
+
|
|
28
|
+
Use similar label lengths so segment widths stay balanced.
|
|
29
|
+
|
|
30
|
+
### Behaviour guidelines
|
|
31
|
+
|
|
32
|
+
Exactly one segment is selected at a time; choosing one deselects the rest.
|
|
33
|
+
|
|
34
|
+
Item Count sets how many segments appear; they share the control's width evenly or size to their content.
|
|
35
|
+
|
|
36
|
+
Selecting a segment switches the related view or state immediately.
|
|
37
|
+
|
|
38
|
+
Avoid overflow — if the options no longer fit, switch to a Select or Tabs.
|
|
39
|
+
|
|
40
|
+
### Accessibility
|
|
41
|
+
|
|
42
|
+
Expose it as a single-select group and mark the selected segment programmatically (e.g. aria-checked / aria-selected).
|
|
43
|
+
|
|
44
|
+
Support keyboard operation: move between segments with the arrow keys and select with Enter or Space.
|
|
45
|
+
|
|
46
|
+
Never communicate the selected state through color alone — keep a clear, non-color indicator.
|
|
47
|
+
|
|
48
|
+
Show a visible focus indicator on the focused segment.
|
|
49
|
+
<!-- END:xui-mcp-instructions:segmented -->
|
|
4
50
|
|
|
5
51
|
## Installation
|
|
6
52
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-segmented",
|
|
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,9 +10,9 @@
|
|
|
10
10
|
"build:native": "PLATFORM=native tsup"
|
|
11
11
|
},
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"@xsolla/xui-badge": "0.
|
|
14
|
-
"@xsolla/xui-core": "0.
|
|
15
|
-
"@xsolla/xui-primitives-core": "0.
|
|
13
|
+
"@xsolla/xui-badge": "0.175.0",
|
|
14
|
+
"@xsolla/xui-core": "0.175.0",
|
|
15
|
+
"@xsolla/xui-primitives-core": "0.175.0"
|
|
16
16
|
},
|
|
17
17
|
"peerDependencies": {
|
|
18
18
|
"react": ">=16.8.0",
|