@xsolla/xui-breadcrumbs 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 +186 -17
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,37 +1,206 @@
|
|
|
1
|
-
|
|
1
|
+
---
|
|
2
|
+
title: Breadcrumbs
|
|
3
|
+
subtitle: A navigation component showing hierarchy.
|
|
4
|
+
description: A cross-platform React breadcrumbs component for displaying navigation hierarchy with customizable separators.
|
|
5
|
+
---
|
|
2
6
|
|
|
3
|
-
|
|
7
|
+
# Breadcrumbs
|
|
8
|
+
|
|
9
|
+
A cross-platform React breadcrumbs navigation component that displays the current page location within a hierarchical structure. Supports custom separators and click handlers.
|
|
4
10
|
|
|
5
11
|
## Installation
|
|
6
12
|
|
|
7
13
|
```bash
|
|
14
|
+
npm install @xsolla/xui-breadcrumbs
|
|
15
|
+
# or
|
|
8
16
|
yarn add @xsolla/xui-breadcrumbs
|
|
9
17
|
```
|
|
10
18
|
|
|
11
|
-
##
|
|
19
|
+
## Demo
|
|
20
|
+
|
|
21
|
+
### Basic Breadcrumbs
|
|
22
|
+
|
|
23
|
+
```tsx
|
|
24
|
+
import * as React from 'react';
|
|
25
|
+
import { Breadcrumbs } from '@xsolla/xui-breadcrumbs';
|
|
26
|
+
|
|
27
|
+
export default function BasicBreadcrumbs() {
|
|
28
|
+
return (
|
|
29
|
+
<Breadcrumbs
|
|
30
|
+
items={[
|
|
31
|
+
{ label: 'Home', href: '/' },
|
|
32
|
+
{ label: 'Products', href: '/products' },
|
|
33
|
+
{ label: 'Category', href: '/products/category' },
|
|
34
|
+
{ label: 'Current Page' },
|
|
35
|
+
]}
|
|
36
|
+
/>
|
|
37
|
+
);
|
|
38
|
+
}
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
### With Click Handlers
|
|
12
42
|
|
|
13
43
|
```tsx
|
|
44
|
+
import * as React from 'react';
|
|
14
45
|
import { Breadcrumbs } from '@xsolla/xui-breadcrumbs';
|
|
15
46
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
];
|
|
47
|
+
export default function ClickableBreadcrumbs() {
|
|
48
|
+
const handleNavigate = (path: string) => {
|
|
49
|
+
console.log('Navigate to:', path);
|
|
50
|
+
};
|
|
21
51
|
|
|
22
|
-
|
|
23
|
-
|
|
52
|
+
return (
|
|
53
|
+
<Breadcrumbs
|
|
54
|
+
items={[
|
|
55
|
+
{ label: 'Home', onClick: () => handleNavigate('/') },
|
|
56
|
+
{ label: 'Settings', onClick: () => handleNavigate('/settings') },
|
|
57
|
+
{ label: 'Profile' },
|
|
58
|
+
]}
|
|
59
|
+
/>
|
|
60
|
+
);
|
|
24
61
|
}
|
|
25
62
|
```
|
|
26
63
|
|
|
27
|
-
|
|
64
|
+
### Stretched Layout
|
|
65
|
+
|
|
66
|
+
```tsx
|
|
67
|
+
import * as React from 'react';
|
|
68
|
+
import { Breadcrumbs } from '@xsolla/xui-breadcrumbs';
|
|
69
|
+
|
|
70
|
+
export default function StretchedBreadcrumbs() {
|
|
71
|
+
return (
|
|
72
|
+
<div style={{ width: '100%' }}>
|
|
73
|
+
<Breadcrumbs
|
|
74
|
+
stretched={true}
|
|
75
|
+
items={[
|
|
76
|
+
{ label: 'Home', href: '/' },
|
|
77
|
+
{ label: 'Dashboard', href: '/dashboard' },
|
|
78
|
+
{ label: 'Reports' },
|
|
79
|
+
]}
|
|
80
|
+
/>
|
|
81
|
+
</div>
|
|
82
|
+
);
|
|
83
|
+
}
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
## Anatomy
|
|
87
|
+
|
|
88
|
+
```jsx
|
|
89
|
+
import { Breadcrumbs } from '@xsolla/xui-breadcrumbs';
|
|
90
|
+
|
|
91
|
+
<Breadcrumbs
|
|
92
|
+
items={[ // Array of breadcrumb items
|
|
93
|
+
{ label: 'Home', href: '/' },
|
|
94
|
+
{ label: 'Current' },
|
|
95
|
+
]}
|
|
96
|
+
size="md" // Size variant
|
|
97
|
+
stretched={false} // Center and stretch to full width
|
|
98
|
+
separator={<CustomIcon />} // Custom separator element
|
|
99
|
+
backgroundColor="transparent" // Background color
|
|
100
|
+
/>
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
## Examples
|
|
104
|
+
|
|
105
|
+
### Breadcrumbs Sizes
|
|
106
|
+
|
|
107
|
+
```tsx
|
|
108
|
+
import * as React from 'react';
|
|
109
|
+
import { Breadcrumbs } from '@xsolla/xui-breadcrumbs';
|
|
110
|
+
|
|
111
|
+
export default function BreadcrumbsSizes() {
|
|
112
|
+
const items = [
|
|
113
|
+
{ label: 'Home', href: '/' },
|
|
114
|
+
{ label: 'Products', href: '/products' },
|
|
115
|
+
{ label: 'Details' },
|
|
116
|
+
];
|
|
117
|
+
|
|
118
|
+
return (
|
|
119
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
|
|
120
|
+
<Breadcrumbs size="sm" items={items} />
|
|
121
|
+
<Breadcrumbs size="md" items={items} />
|
|
122
|
+
<Breadcrumbs size="lg" items={items} />
|
|
123
|
+
</div>
|
|
124
|
+
);
|
|
125
|
+
}
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
### Custom Separator
|
|
129
|
+
|
|
130
|
+
```tsx
|
|
131
|
+
import * as React from 'react';
|
|
132
|
+
import { Breadcrumbs } from '@xsolla/xui-breadcrumbs';
|
|
133
|
+
|
|
134
|
+
export default function CustomSeparator() {
|
|
135
|
+
return (
|
|
136
|
+
<Breadcrumbs
|
|
137
|
+
separator={<span style={{ margin: '0 8px' }}>/</span>}
|
|
138
|
+
items={[
|
|
139
|
+
{ label: 'Home', href: '/' },
|
|
140
|
+
{ label: 'Category', href: '/category' },
|
|
141
|
+
{ label: 'Item' },
|
|
142
|
+
]}
|
|
143
|
+
/>
|
|
144
|
+
);
|
|
145
|
+
}
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
### With Disabled Items
|
|
149
|
+
|
|
150
|
+
```tsx
|
|
151
|
+
import * as React from 'react';
|
|
152
|
+
import { Breadcrumbs } from '@xsolla/xui-breadcrumbs';
|
|
153
|
+
|
|
154
|
+
export default function DisabledBreadcrumbs() {
|
|
155
|
+
return (
|
|
156
|
+
<Breadcrumbs
|
|
157
|
+
items={[
|
|
158
|
+
{ label: 'Home', href: '/' },
|
|
159
|
+
{ label: 'Restricted', disabled: true },
|
|
160
|
+
{ label: 'Current Page' },
|
|
161
|
+
]}
|
|
162
|
+
/>
|
|
163
|
+
);
|
|
164
|
+
}
|
|
165
|
+
```
|
|
166
|
+
|
|
167
|
+
## API Reference
|
|
28
168
|
|
|
29
169
|
### Breadcrumbs
|
|
30
170
|
|
|
171
|
+
**Breadcrumbs Props:**
|
|
172
|
+
|
|
31
173
|
| Prop | Type | Default | Description |
|
|
32
|
-
|
|
33
|
-
|
|
|
34
|
-
|
|
|
35
|
-
|
|
|
36
|
-
|
|
|
37
|
-
|
|
|
174
|
+
| :--- | :--- | :------ | :---------- |
|
|
175
|
+
| items | `BreadcrumbItem[]` | - | **Required.** Array of breadcrumb items. |
|
|
176
|
+
| size | `"sm" \| "md" \| "lg"` | `"md"` | Size variant. |
|
|
177
|
+
| stretched | `boolean` | `false` | Center content and stretch to full width. |
|
|
178
|
+
| separator | `ReactNode` | Chevron icon | Custom separator element. |
|
|
179
|
+
| backgroundColor | `string` | - | Background color. |
|
|
180
|
+
| testID | `string` | - | Test identifier. |
|
|
181
|
+
|
|
182
|
+
**BreadcrumbItem Interface:**
|
|
183
|
+
|
|
184
|
+
```typescript
|
|
185
|
+
interface BreadcrumbItem {
|
|
186
|
+
label: string; // Display text
|
|
187
|
+
href?: string; // Link URL
|
|
188
|
+
onClick?: () => void; // Click handler
|
|
189
|
+
disabled?: boolean; // Disabled state
|
|
190
|
+
}
|
|
191
|
+
```
|
|
192
|
+
|
|
193
|
+
## Behavior
|
|
194
|
+
|
|
195
|
+
- Last item is always displayed as active/current page
|
|
196
|
+
- Non-last items are clickable (via href or onClick)
|
|
197
|
+
- Disabled items show reduced opacity and aren't clickable
|
|
198
|
+
- Separator appears between each item
|
|
199
|
+
|
|
200
|
+
## Accessibility
|
|
201
|
+
|
|
202
|
+
- Uses `<nav>` element with `aria-label="Breadcrumb"`
|
|
203
|
+
- Uses `<ol>` for semantic list structure
|
|
204
|
+
- Current page has `aria-current="page"`
|
|
205
|
+
- Non-active items have proper link/button roles
|
|
206
|
+
- Separators are hidden from screen readers
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-breadcrumbs",
|
|
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",
|
|
@@ -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.100.0",
|
|
14
|
+
"@xsolla/xui-primitives-core": "0.100.0"
|
|
15
15
|
},
|
|
16
16
|
"peerDependencies": {
|
|
17
17
|
"react": ">=16.8.0"
|