@xsolla/xui-tabs 0.96.0 → 0.97.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 +71 -0
- package/package.json +4 -4
package/README.md
ADDED
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
# @xsolla/xui-tabs
|
|
2
|
+
|
|
3
|
+
Accessible tabbed interface with `line` and `segmented` variants, keyboard navigation, and optional badges.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
yarn add @xsolla/xui-tabs
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
```tsx
|
|
14
|
+
import { Tabs, TabPanel } from '@xsolla/xui-tabs';
|
|
15
|
+
|
|
16
|
+
const tabs = [
|
|
17
|
+
{ id: 'overview', label: 'Overview' },
|
|
18
|
+
{ id: 'details', label: 'Details' },
|
|
19
|
+
{ id: 'history', label: 'History', disabled: true },
|
|
20
|
+
];
|
|
21
|
+
|
|
22
|
+
function App() {
|
|
23
|
+
const [active, setActive] = React.useState('overview');
|
|
24
|
+
|
|
25
|
+
return (
|
|
26
|
+
<>
|
|
27
|
+
<Tabs
|
|
28
|
+
id="main"
|
|
29
|
+
tabs={tabs}
|
|
30
|
+
activeTabId={active}
|
|
31
|
+
onChange={setActive}
|
|
32
|
+
/>
|
|
33
|
+
<TabPanel id="overview" tabsId="main" hidden={active !== 'overview'}>
|
|
34
|
+
Overview content
|
|
35
|
+
</TabPanel>
|
|
36
|
+
<TabPanel id="details" tabsId="main" hidden={active !== 'details'}>
|
|
37
|
+
Details content
|
|
38
|
+
</TabPanel>
|
|
39
|
+
</>
|
|
40
|
+
);
|
|
41
|
+
}
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
## Components
|
|
45
|
+
|
|
46
|
+
- **Tabs** — Tab list with keyboard navigation and active indicator
|
|
47
|
+
- **TabPanel** — Accessible content panel paired with a tab
|
|
48
|
+
|
|
49
|
+
## Props
|
|
50
|
+
|
|
51
|
+
### Tabs
|
|
52
|
+
|
|
53
|
+
| Prop | Type | Default | Description |
|
|
54
|
+
|------|------|---------|-------------|
|
|
55
|
+
| `tabs` | `TabItemType[]` | — | Array of tab items to render |
|
|
56
|
+
| `activeTabId` | `string` | — | ID of the currently active tab |
|
|
57
|
+
| `onChange` | `(id: string) => void` | — | Called when a tab is selected |
|
|
58
|
+
| `variant` | `'line' \| 'segmented'` | `'line'` | Visual style variant |
|
|
59
|
+
| `size` | `'xl' \| 'lg' \| 'md' \| 'sm'` | `'md'` | Size of the tab items |
|
|
60
|
+
| `alignLeft` | `boolean` | `true` | Left-align tabs (line variant only) |
|
|
61
|
+
| `stretched` | `boolean` | `false` | Stretch tabs to fill container width |
|
|
62
|
+
| `activateOnFocus` | `boolean` | `true` | Auto-activate tab on arrow key focus |
|
|
63
|
+
|
|
64
|
+
### TabPanel
|
|
65
|
+
|
|
66
|
+
| Prop | Type | Default | Description |
|
|
67
|
+
|------|------|---------|-------------|
|
|
68
|
+
| `id` | `string` | — | Matching ID of the associated tab |
|
|
69
|
+
| `tabsId` | `string` | — | ID of the parent `Tabs` component |
|
|
70
|
+
| `hidden` | `boolean` | `false` | Whether the panel is hidden |
|
|
71
|
+
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-tabs",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.97.0",
|
|
4
4
|
"main": "./web/index.js",
|
|
5
5
|
"module": "./web/index.mjs",
|
|
6
6
|
"types": "./web/index.d.ts",
|
|
@@ -12,9 +12,9 @@
|
|
|
12
12
|
"test:watch": "vitest"
|
|
13
13
|
},
|
|
14
14
|
"dependencies": {
|
|
15
|
-
"@xsolla/xui-badge": "0.
|
|
16
|
-
"@xsolla/xui-core": "0.
|
|
17
|
-
"@xsolla/xui-primitives-core": "0.
|
|
15
|
+
"@xsolla/xui-badge": "0.97.0",
|
|
16
|
+
"@xsolla/xui-core": "0.97.0",
|
|
17
|
+
"@xsolla/xui-primitives-core": "0.97.0"
|
|
18
18
|
},
|
|
19
19
|
"peerDependencies": {
|
|
20
20
|
"react": ">=16.8.0",
|