@starasia/progress 1.0.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 +57 -0
- package/dist/Progress.d.ts +3 -0
- package/dist/index.d.ts +2 -0
- package/dist/progress.es.js +1174 -0
- package/dist/progress.umd.js +400 -0
- package/dist/types.d.ts +34 -0
- package/package.json +44 -0
package/README.md
ADDED
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
# starasia progress
|
|
2
|
+
|
|
3
|
+
starasia progress is a strict and customizable progress component for web development projects, designed for simplicity and adherence to strict design guidelines.
|
|
4
|
+
|
|
5
|
+
## Screenshots
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
## Package instalation
|
|
10
|
+
|
|
11
|
+
Instal package using pnpm
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
pnpm add @starasia/progress
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
Instal package using yarn
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
yarn add @starasia/progress
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
Instal package using npm
|
|
24
|
+
|
|
25
|
+
```bash
|
|
26
|
+
npm i @starasia/progress
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
## Usage/Examples (you can combine using icon package starasia)
|
|
30
|
+
|
|
31
|
+
```javascript
|
|
32
|
+
import React from "react";
|
|
33
|
+
import {Progress} from "@starasia/progress";
|
|
34
|
+
import ReactDOM from "react-dom/client";
|
|
35
|
+
|
|
36
|
+
const App = () => (
|
|
37
|
+
<div>
|
|
38
|
+
<h1>Testing Progress Component</h1>
|
|
39
|
+
<Progress value="100%" labelPosition="left" label="100%" color="blue-400" />
|
|
40
|
+
</div>
|
|
41
|
+
);
|
|
42
|
+
|
|
43
|
+
ReactDOM.createRoot(document.getElementById("app")!).render(<App />);
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
## Props @starasia/pagination
|
|
49
|
+
|
|
50
|
+
#### Props that you can pass to <Pagination {...props} />
|
|
51
|
+
|
|
52
|
+
| Prop Name | Value | required |
|
|
53
|
+
| :------------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------- |
|
|
54
|
+
| labelPosition | "left" / "center" / "right" | false |
|
|
55
|
+
| label | string | false |
|
|
56
|
+
| color | "gray-50","gray-100","gray-200","gray-300","gray-400","gray-500","gray-600","gray-700","gray-800","gray-900","gray-950","red-50","red-100","red-200","red-300","red-400","red-500","red-600","red-700","red-800","red-900","red-950", "orange-50","orange-100","orange-200","orange-300","orange-400","orange-500","orange-600","orange-700","orange-800","orange-900","orange-950","yellow-50","yellow-100","yellow-200","yellow-300","yellow-400","yellow-500","yellow-600","yellow-700","yellow-800","yellow-900","yellow-950","green-50","green-100","green-200","green-300","green-400","green-500","green-600","green-700","green-800","green-900","green-950", "blue-50""blue-100","blue-200","blue-300","blue-400","blue-500","blue-600","blue-700","blue-800","blue-900","blue-950","purple-50","purple-100", "purple-200", "purple-300", "purple-400", "purple-500", "purple-600", "purple-700", "purple-800", "purple-900", "purple-950", | false |
|
|
57
|
+
| value | "1%","2%","3%","4%","5%","6%","7%","8%","9%","10%","11%","12%","13%","14%","15%","16%","17%","18%","19%","20%","21%","22%","23%","24%","25%","26%","27%","28%","29%","30%","31%","32%","33%","34%","35%","36%","37%","38%","39%","40%","41%","42%","43%","44%","45%","46%","47%","48%","49%","50%","51%","52%","53%","54%","55%","56%","57%","58%","59%","60%","61%","62%","63%","64%","65%","66%","67%","68%","69%","70%","71%","72%","73%","74%","75%","76%","77%","78%","79%","80%","81%","82%","83%","84%","85%","86%","87%","88%","89%","90%","91%","92%","93%","94%","95%","96%","97%","98%","99%","100%" | false |
|
package/dist/index.d.ts
ADDED