@xsolla/xui-tab-bar 0.99.0 → 0.100.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 +226 -16
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -1,47 +1,257 @@
|
|
|
1
|
-
|
|
1
|
+
---
|
|
2
|
+
title: Tab Bar
|
|
3
|
+
subtitle: Bottom navigation bar.
|
|
4
|
+
description: A cross-platform React tab bar component for mobile-style bottom navigation with icons, labels, and badges.
|
|
5
|
+
---
|
|
2
6
|
|
|
3
|
-
|
|
7
|
+
# Tab Bar
|
|
8
|
+
|
|
9
|
+
A cross-platform React tab bar component implementing mobile-style bottom navigation, typically used with React Navigation. Follows WAI-ARIA Tabs pattern with proper keyboard navigation.
|
|
4
10
|
|
|
5
11
|
## Installation
|
|
6
12
|
|
|
7
13
|
```bash
|
|
14
|
+
npm install @xsolla/xui-tab-bar
|
|
15
|
+
# or
|
|
8
16
|
yarn add @xsolla/xui-tab-bar
|
|
9
17
|
```
|
|
10
18
|
|
|
11
|
-
##
|
|
19
|
+
## Demo
|
|
20
|
+
|
|
21
|
+
### Basic Tab Bar
|
|
12
22
|
|
|
13
23
|
```tsx
|
|
24
|
+
import * as React from 'react';
|
|
14
25
|
import { TabBar } from '@xsolla/xui-tab-bar';
|
|
26
|
+
import { Home, Search, User, Settings } from '@xsolla/xui-icons-base';
|
|
27
|
+
|
|
28
|
+
export default function BasicTabBar() {
|
|
29
|
+
// Simulated React Navigation state
|
|
30
|
+
const state = {
|
|
31
|
+
index: 0,
|
|
32
|
+
routes: [
|
|
33
|
+
{ key: 'home', name: 'Home' },
|
|
34
|
+
{ key: 'search', name: 'Search' },
|
|
35
|
+
{ key: 'profile', name: 'Profile' },
|
|
36
|
+
{ key: 'settings', name: 'Settings' },
|
|
37
|
+
],
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
const descriptors = {
|
|
41
|
+
home: { options: { tabBarIcon: ({ size }) => <Home size={size} />, title: 'Home' } },
|
|
42
|
+
search: { options: { tabBarIcon: ({ size }) => <Search size={size} />, title: 'Search' } },
|
|
43
|
+
profile: { options: { tabBarIcon: ({ size }) => <User size={size} />, title: 'Profile' } },
|
|
44
|
+
settings: { options: { tabBarIcon: ({ size }) => <Settings size={size} />, title: 'Settings' } },
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
return (
|
|
48
|
+
<TabBar
|
|
49
|
+
state={state}
|
|
50
|
+
descriptors={descriptors}
|
|
51
|
+
navigation={{ emit: () => ({}), navigate: () => {} }}
|
|
52
|
+
/>
|
|
53
|
+
);
|
|
54
|
+
}
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
## Anatomy
|
|
58
|
+
|
|
59
|
+
```jsx
|
|
60
|
+
import { TabBar } from '@xsolla/xui-tab-bar';
|
|
61
|
+
|
|
62
|
+
<TabBar
|
|
63
|
+
state={navigationState} // React Navigation state
|
|
64
|
+
descriptors={descriptors} // Route descriptors
|
|
65
|
+
navigation={navigation} // Navigation object
|
|
66
|
+
labelPosition="below-icon" // below-icon or beside-icon
|
|
67
|
+
backgroundColor={color} // Custom background
|
|
68
|
+
activateOnFocus={true} // Activate tab on focus
|
|
69
|
+
aria-label="Main navigation" // Accessible label
|
|
70
|
+
id="main-tabs" // Element ID
|
|
71
|
+
/>
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
## Examples
|
|
75
|
+
|
|
76
|
+
### With React Navigation
|
|
77
|
+
|
|
78
|
+
```tsx
|
|
79
|
+
import * as React from 'react';
|
|
15
80
|
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
|
|
81
|
+
import { TabBar } from '@xsolla/xui-tab-bar';
|
|
82
|
+
import { Home, User, Settings } from '@xsolla/xui-icons-base';
|
|
16
83
|
|
|
17
84
|
const Tab = createBottomTabNavigator();
|
|
18
85
|
|
|
19
|
-
function
|
|
86
|
+
export default function AppNavigator() {
|
|
20
87
|
return (
|
|
21
|
-
<Tab.Navigator
|
|
88
|
+
<Tab.Navigator
|
|
89
|
+
tabBar={(props) => <TabBar {...props} />}
|
|
90
|
+
>
|
|
22
91
|
<Tab.Screen
|
|
23
92
|
name="Home"
|
|
24
93
|
component={HomeScreen}
|
|
25
94
|
options={{
|
|
26
|
-
tabBarIcon: ({
|
|
27
|
-
|
|
95
|
+
tabBarIcon: ({ size, color }) => <Home size={size} color={color} />,
|
|
96
|
+
}}
|
|
97
|
+
/>
|
|
98
|
+
<Tab.Screen
|
|
99
|
+
name="Profile"
|
|
100
|
+
component={ProfileScreen}
|
|
101
|
+
options={{
|
|
102
|
+
tabBarIcon: ({ size, color }) => <User size={size} color={color} />,
|
|
103
|
+
}}
|
|
104
|
+
/>
|
|
105
|
+
<Tab.Screen
|
|
106
|
+
name="Settings"
|
|
107
|
+
component={SettingsScreen}
|
|
108
|
+
options={{
|
|
109
|
+
tabBarIcon: ({ size, color }) => <Settings size={size} color={color} />,
|
|
28
110
|
}}
|
|
29
111
|
/>
|
|
30
|
-
<Tab.Screen name="Settings" component={SettingsScreen} />
|
|
31
112
|
</Tab.Navigator>
|
|
32
113
|
);
|
|
33
114
|
}
|
|
34
115
|
```
|
|
35
116
|
|
|
36
|
-
|
|
117
|
+
### With Badges
|
|
118
|
+
|
|
119
|
+
```tsx
|
|
120
|
+
import * as React from 'react';
|
|
121
|
+
import { TabBar } from '@xsolla/xui-tab-bar';
|
|
122
|
+
import { Home, Bell, ShoppingCart, User } from '@xsolla/xui-icons-base';
|
|
123
|
+
|
|
124
|
+
export default function TabBarWithBadges() {
|
|
125
|
+
const state = {
|
|
126
|
+
index: 0,
|
|
127
|
+
routes: [
|
|
128
|
+
{ key: 'home', name: 'Home' },
|
|
129
|
+
{ key: 'notifications', name: 'Notifications' },
|
|
130
|
+
{ key: 'cart', name: 'Cart' },
|
|
131
|
+
{ key: 'profile', name: 'Profile' },
|
|
132
|
+
],
|
|
133
|
+
};
|
|
134
|
+
|
|
135
|
+
const descriptors = {
|
|
136
|
+
home: { options: { tabBarIcon: ({ size }) => <Home size={size} />, title: 'Home' } },
|
|
137
|
+
notifications: {
|
|
138
|
+
options: {
|
|
139
|
+
tabBarIcon: ({ size }) => <Bell size={size} />,
|
|
140
|
+
title: 'Notifications',
|
|
141
|
+
tabBarBadge: 3, // Shows badge with count
|
|
142
|
+
},
|
|
143
|
+
},
|
|
144
|
+
cart: {
|
|
145
|
+
options: {
|
|
146
|
+
tabBarIcon: ({ size }) => <ShoppingCart size={size} />,
|
|
147
|
+
title: 'Cart',
|
|
148
|
+
tabBarBadge: '!', // Shows badge with text
|
|
149
|
+
},
|
|
150
|
+
},
|
|
151
|
+
profile: { options: { tabBarIcon: ({ size }) => <User size={size} />, title: 'Profile' } },
|
|
152
|
+
};
|
|
153
|
+
|
|
154
|
+
return (
|
|
155
|
+
<TabBar
|
|
156
|
+
state={state}
|
|
157
|
+
descriptors={descriptors}
|
|
158
|
+
navigation={{ emit: () => ({}), navigate: () => {} }}
|
|
159
|
+
/>
|
|
160
|
+
);
|
|
161
|
+
}
|
|
162
|
+
```
|
|
163
|
+
|
|
164
|
+
### Custom Styling
|
|
165
|
+
|
|
166
|
+
```tsx
|
|
167
|
+
import * as React from 'react';
|
|
168
|
+
import { TabBar } from '@xsolla/xui-tab-bar';
|
|
169
|
+
import { Home, Search, User } from '@xsolla/xui-icons-base';
|
|
170
|
+
|
|
171
|
+
export default function CustomStyledTabBar() {
|
|
172
|
+
const state = {
|
|
173
|
+
index: 0,
|
|
174
|
+
routes: [
|
|
175
|
+
{ key: 'home', name: 'Home' },
|
|
176
|
+
{ key: 'search', name: 'Search' },
|
|
177
|
+
{ key: 'profile', name: 'Profile' },
|
|
178
|
+
],
|
|
179
|
+
};
|
|
180
|
+
|
|
181
|
+
const descriptors = {
|
|
182
|
+
home: { options: { tabBarIcon: ({ size }) => <Home size={size} />, title: 'Home' } },
|
|
183
|
+
search: { options: { tabBarIcon: ({ size }) => <Search size={size} />, title: 'Search' } },
|
|
184
|
+
profile: { options: { tabBarIcon: ({ size }) => <User size={size} />, title: 'Profile' } },
|
|
185
|
+
};
|
|
186
|
+
|
|
187
|
+
return (
|
|
188
|
+
<TabBar
|
|
189
|
+
state={state}
|
|
190
|
+
descriptors={descriptors}
|
|
191
|
+
navigation={{ emit: () => ({}), navigate: () => {} }}
|
|
192
|
+
backgroundColor="#1a1a1a"
|
|
193
|
+
labelPosition="below-icon"
|
|
194
|
+
/>
|
|
195
|
+
);
|
|
196
|
+
}
|
|
197
|
+
```
|
|
198
|
+
|
|
199
|
+
## API Reference
|
|
37
200
|
|
|
38
201
|
### TabBar
|
|
39
202
|
|
|
203
|
+
**TabBarProps:**
|
|
204
|
+
|
|
40
205
|
| Prop | Type | Default | Description |
|
|
41
|
-
|
|
42
|
-
|
|
|
43
|
-
|
|
|
44
|
-
|
|
|
45
|
-
|
|
|
46
|
-
|
|
|
47
|
-
|
|
|
206
|
+
| :--- | :--- | :------ | :---------- |
|
|
207
|
+
| state | `NavigationState` | - | React Navigation state object. |
|
|
208
|
+
| descriptors | `Descriptors` | - | Route descriptor objects. |
|
|
209
|
+
| navigation | `Navigation` | - | Navigation object with emit/navigate. |
|
|
210
|
+
| labelPosition | `"below-icon" \| "beside-icon"` | `"below-icon"` | Label position relative to icon. |
|
|
211
|
+
| backgroundColor | `string` | theme background | Custom background color. |
|
|
212
|
+
| activateOnFocus | `boolean` | `true` | Navigate on focus (keyboard). |
|
|
213
|
+
| aria-label | `string` | `"Tab navigation"` | Accessible label. |
|
|
214
|
+
| aria-labelledby | `string` | - | ID of labelling element. |
|
|
215
|
+
| id | `string` | - | Element ID for accessibility. |
|
|
216
|
+
| testID | `string` | - | Test identifier. |
|
|
217
|
+
|
|
218
|
+
### Route Options
|
|
219
|
+
|
|
220
|
+
Each route in descriptors can have these options:
|
|
221
|
+
|
|
222
|
+
| Option | Type | Description |
|
|
223
|
+
| :----- | :--- | :---------- |
|
|
224
|
+
| tabBarIcon | `(props) => ReactNode` | Icon render function. |
|
|
225
|
+
| tabBarLabel | `string \| (props) => ReactNode` | Tab label. |
|
|
226
|
+
| title | `string` | Fallback label if tabBarLabel not set. |
|
|
227
|
+
| tabBarBadge | `string \| number` | Badge content. |
|
|
228
|
+
| tabBarShowLabel | `boolean` | Show/hide label. |
|
|
229
|
+
| tabBarAccessibilityLabel | `string` | Custom accessible label. |
|
|
230
|
+
| tabBarTestID | `string` | Test ID for individual tab. |
|
|
231
|
+
|
|
232
|
+
## Keyboard Navigation
|
|
233
|
+
|
|
234
|
+
| Key | Action |
|
|
235
|
+
| :-- | :----- |
|
|
236
|
+
| `ArrowRight` / `ArrowDown` | Move to next tab |
|
|
237
|
+
| `ArrowLeft` / `ArrowUp` | Move to previous tab |
|
|
238
|
+
| `Home` | Jump to first tab |
|
|
239
|
+
| `End` | Jump to last tab |
|
|
240
|
+
| `Enter` / `Space` | Activate focused tab |
|
|
241
|
+
|
|
242
|
+
## Specifications
|
|
243
|
+
|
|
244
|
+
| Property | Value |
|
|
245
|
+
| :------- | :---- |
|
|
246
|
+
| Height | 60px |
|
|
247
|
+
| Width | 100% |
|
|
248
|
+
| Border | 1px top border |
|
|
249
|
+
|
|
250
|
+
## Accessibility
|
|
251
|
+
|
|
252
|
+
- Uses `role="tablist"` with `aria-orientation="horizontal"`
|
|
253
|
+
- Individual tabs have `role="tab"` with proper `aria-selected`
|
|
254
|
+
- Keyboard navigation follows WAI-ARIA Tabs pattern
|
|
255
|
+
- Focus management between tabs
|
|
256
|
+
- Badge content is announced to screen readers
|
|
257
|
+
- Custom accessibility labels supported per tab
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-tab-bar",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.100.0",
|
|
4
4
|
"main": "./web/index.js",
|
|
5
5
|
"module": "./web/index.mjs",
|
|
6
6
|
"types": "./web/index.d.ts",
|
|
@@ -13,9 +13,9 @@
|
|
|
13
13
|
"test:coverage": "vitest run --coverage"
|
|
14
14
|
},
|
|
15
15
|
"dependencies": {
|
|
16
|
-
"@xsolla/xui-badge": "0.
|
|
17
|
-
"@xsolla/xui-core": "0.
|
|
18
|
-
"@xsolla/xui-primitives-core": "0.
|
|
16
|
+
"@xsolla/xui-badge": "0.100.0",
|
|
17
|
+
"@xsolla/xui-core": "0.100.0",
|
|
18
|
+
"@xsolla/xui-primitives-core": "0.100.0"
|
|
19
19
|
},
|
|
20
20
|
"peerDependencies": {
|
|
21
21
|
"react": ">=16.8.0"
|