physical-quantity 1.1.2 → 1.1.3
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 +83 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
# Physical Quantity Web Component
|
|
2
|
+
|
|
3
|
+
`physical-quantity` is a web component that allows you to create and manipulate physical quantities with different units. It provides an input for the value and a dropdown for the unit, automatically converting between units in the same category.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- Create a physical quantity with a value and unit.
|
|
8
|
+
- Automatically convert between units within the same category.
|
|
9
|
+
- Display values with up to 3 decimal places if not an integer; show integers without decimal parts.
|
|
10
|
+
- Easy to integrate into any web project.
|
|
11
|
+
|
|
12
|
+
## Installation
|
|
13
|
+
|
|
14
|
+
You can install the `physical-quantity` component using npm:
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
npm install physical-quantity
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
## Usage
|
|
21
|
+
After installation, you can import and use the physical-quantity component in your project.
|
|
22
|
+
|
|
23
|
+
### Importing the Component
|
|
24
|
+
Include the following script tag in your HTML file:
|
|
25
|
+
```html
|
|
26
|
+
<script src="node_modules/physical-quantity/dist/pq.min.js"></script>
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
### Using the Component
|
|
30
|
+
Add the `physical-quantity` tag to your HTML file:
|
|
31
|
+
```html
|
|
32
|
+
<physical-quantity initial-value="25.4" initial-unit="mm"></physical-quantity>
|
|
33
|
+
```
|
|
34
|
+
### Example - Linking the Code
|
|
35
|
+
Here's an example of how to use the component in an HTML file:
|
|
36
|
+
|
|
37
|
+
```html
|
|
38
|
+
<!DOCTYPE html>
|
|
39
|
+
<html lang="en">
|
|
40
|
+
<head>
|
|
41
|
+
<meta charset="UTF-8">
|
|
42
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
43
|
+
<title>Physical Quantity Component Example</title>
|
|
44
|
+
</head>
|
|
45
|
+
<body>
|
|
46
|
+
<physical-quantity initial-value="25.4" initial-unit="mm"></physical-quantity>
|
|
47
|
+
|
|
48
|
+
<script src="node_modules/physical-quantity/src/qp.min.js"></script>
|
|
49
|
+
</body>
|
|
50
|
+
</html>
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
### Example - HTML File Using CDN
|
|
54
|
+
```html
|
|
55
|
+
<!DOCTYPE html>
|
|
56
|
+
<html lang="en">
|
|
57
|
+
<head>
|
|
58
|
+
<meta charset="UTF-8">
|
|
59
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
60
|
+
<title>Physical Quantity Component Example</title>
|
|
61
|
+
<script src="https://unpkg.com/physical-quantity@1.1.2/dist/pq.min.js"></script>
|
|
62
|
+
</head>
|
|
63
|
+
<body>
|
|
64
|
+
<physical-quantity value="25.4" unit="mm"></physical-quantity>
|
|
65
|
+
</body>
|
|
66
|
+
</html>
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
### Attributes
|
|
70
|
+
initial-value: The initial value of the physical quantity.
|
|
71
|
+
initial-unit: The initial unit of the physical quantity.
|
|
72
|
+
|
|
73
|
+
## License
|
|
74
|
+
This project is licensed under the MIT License. See the LICENSE file for more details.
|
|
75
|
+
|
|
76
|
+
## Contributing
|
|
77
|
+
Contributions are welcome! Please contact the developer for any bugs, features, or improvements.
|
|
78
|
+
|
|
79
|
+
## Contact
|
|
80
|
+
If you have any questions or feedback, feel free to contact me at don.wen@yahoo.com.
|
|
81
|
+
For more info, please visit:
|
|
82
|
+
[AutoCalcs](https://v2.donwen.com/)
|
|
83
|
+
[AutoCalcs Docs and Library](https://v2-docs.donwen.com/)
|