@xsolla/xui-progress-bar 0.148.0 → 0.148.1
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 +79 -0
- package/package.json +4 -4
package/README.md
ADDED
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
# Progress Bar
|
|
2
|
+
|
|
3
|
+
A cross-platform React circular progress bar component for displaying completion status. Useful for showing task progress or loading states with percentage.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @xsolla/xui-progress-bar
|
|
9
|
+
# or
|
|
10
|
+
yarn add @xsolla/xui-progress-bar
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Demo
|
|
14
|
+
|
|
15
|
+
### Basic Progress Bar
|
|
16
|
+
|
|
17
|
+
```tsx
|
|
18
|
+
import * as React from 'react';
|
|
19
|
+
import { ProgressBar } from '@xsolla/xui-progress-bar';
|
|
20
|
+
|
|
21
|
+
export default function BasicProgressBar() {
|
|
22
|
+
return <ProgressBar value={75} />;
|
|
23
|
+
}
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
### Progress Bar Sizes
|
|
27
|
+
|
|
28
|
+
```tsx
|
|
29
|
+
import * as React from 'react';
|
|
30
|
+
import { ProgressBar } from '@xsolla/xui-progress-bar';
|
|
31
|
+
|
|
32
|
+
export default function ProgressBarSizes() {
|
|
33
|
+
return (
|
|
34
|
+
<div style={{ display: 'flex', gap: 24, alignItems: 'center' }}>
|
|
35
|
+
<ProgressBar value={60} size="sm" />
|
|
36
|
+
<ProgressBar value={60} size="md" />
|
|
37
|
+
<ProgressBar value={60} size="lg" />
|
|
38
|
+
</div>
|
|
39
|
+
);
|
|
40
|
+
}
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
### Animated Progress
|
|
44
|
+
|
|
45
|
+
```tsx
|
|
46
|
+
import * as React from 'react';
|
|
47
|
+
import { ProgressBar } from '@xsolla/xui-progress-bar';
|
|
48
|
+
|
|
49
|
+
export default function AnimatedProgress() {
|
|
50
|
+
const [progress, setProgress] = React.useState(0);
|
|
51
|
+
|
|
52
|
+
React.useEffect(() => {
|
|
53
|
+
const timer = setInterval(() => {
|
|
54
|
+
setProgress((prev) => (prev >= 100 ? 0 : prev + 10));
|
|
55
|
+
}, 500);
|
|
56
|
+
return () => clearInterval(timer);
|
|
57
|
+
}, []);
|
|
58
|
+
|
|
59
|
+
return <ProgressBar value={progress} />;
|
|
60
|
+
}
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
## API Reference
|
|
64
|
+
|
|
65
|
+
### ProgressBar
|
|
66
|
+
|
|
67
|
+
**ProgressBar Props:**
|
|
68
|
+
|
|
69
|
+
| Prop | Type | Default | Description |
|
|
70
|
+
| :--- | :--- | :------ | :---------- |
|
|
71
|
+
| value | `number` | `0` | Progress value (0-100). |
|
|
72
|
+
| size | `"sm" \| "md" \| "lg"` | `"md"` | Size of the progress bar. |
|
|
73
|
+
|
|
74
|
+
## Theming
|
|
75
|
+
|
|
76
|
+
```typescript
|
|
77
|
+
theme.colors.background.brand.primary // Progress fill color
|
|
78
|
+
theme.colors.border.secondary // Track color
|
|
79
|
+
```
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-progress-bar",
|
|
3
|
-
"version": "0.148.
|
|
3
|
+
"version": "0.148.1",
|
|
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-core": "0.148.
|
|
14
|
-
"@xsolla/xui-icons": "0.148.
|
|
15
|
-
"@xsolla/xui-primitives-core": "0.148.
|
|
13
|
+
"@xsolla/xui-core": "0.148.1",
|
|
14
|
+
"@xsolla/xui-icons": "0.148.1",
|
|
15
|
+
"@xsolla/xui-primitives-core": "0.148.1"
|
|
16
16
|
},
|
|
17
17
|
"peerDependencies": {
|
|
18
18
|
"react": ">=16.8.0",
|