@rogieking/figui3 1.0.0 → 1.0.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 +89 -0
- package/fig.css +802 -320
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
# Figma UI3 Web Components
|
|
2
|
+
|
|
3
|
+
figUI3 is a collection of custom web components that provide various UI elements and functionality for web applications. These components are designed to be easily integrated into your projects, offering a set of reusable and customizable UI elements.
|
|
4
|
+
|
|
5
|
+
## Table of Contents
|
|
6
|
+
|
|
7
|
+
- [Components](#components)
|
|
8
|
+
- [Installation](#installation)
|
|
9
|
+
- [Usage](#usage)
|
|
10
|
+
- [Contributing](#contributing)
|
|
11
|
+
- [License](#license)
|
|
12
|
+
|
|
13
|
+
## Components
|
|
14
|
+
|
|
15
|
+
The Fig Components library includes the following custom elements:
|
|
16
|
+
|
|
17
|
+
1. `<fig-button>`: A customizable button component.
|
|
18
|
+
2. `<fig-dropdown>`: A dropdown select component.
|
|
19
|
+
3. `<fig-tooltip>`: A tooltip component that can be triggered by hover or click.
|
|
20
|
+
4. `<fig-popover>`: A popover component similar to tooltip but with more flexibility.
|
|
21
|
+
5. `<fig-dialog>`: A dialog/modal component.
|
|
22
|
+
6. `<fig-tabs>`: A tabbed interface component.
|
|
23
|
+
7. `<fig-segmented-control>`: A segmented control component for mutually exclusive options.
|
|
24
|
+
8. `<fig-slider>`: A slider input component with optional text input.
|
|
25
|
+
9. `<fig-input-text>`: A text input component with optional append and prepend slots.
|
|
26
|
+
10. `<fig-field>`: A form field wrapper component.
|
|
27
|
+
11. `<fig-input-color>`: A color input component with optional text and alpha inputs.
|
|
28
|
+
12. `<fig-checkbox>`: A checkbox input component.
|
|
29
|
+
13. `<fig-switch>`: A switch/toggle input component.
|
|
30
|
+
|
|
31
|
+
## Installation
|
|
32
|
+
|
|
33
|
+
To use Fig Components in your project, include the JavaScript file in your HTML:
|
|
34
|
+
|
|
35
|
+
```html
|
|
36
|
+
<script src="path/to/fig-components.js"></script>
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
Make sure to replace `path/to/fig-components.js` with the actual path to the JavaScript file containing the component definitions.
|
|
40
|
+
|
|
41
|
+
## Usage
|
|
42
|
+
|
|
43
|
+
After including the Fig Components script in your HTML, you can use the custom elements in your markup. Here are some examples:
|
|
44
|
+
|
|
45
|
+
### Button
|
|
46
|
+
|
|
47
|
+
```html
|
|
48
|
+
<fig-button>Click me</fig-button>
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
### Dropdown
|
|
52
|
+
|
|
53
|
+
```html
|
|
54
|
+
<fig-dropdown>
|
|
55
|
+
<option value="1">Option 1</option>
|
|
56
|
+
<option value="2">Option 2</option>
|
|
57
|
+
<option value="3">Option 3</option>
|
|
58
|
+
</fig-dropdown>
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
### Tooltip
|
|
62
|
+
|
|
63
|
+
```html
|
|
64
|
+
<fig-tooltip text="This is a tooltip" action="hover">
|
|
65
|
+
Hover over me
|
|
66
|
+
</fig-tooltip>
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
### Slider
|
|
70
|
+
|
|
71
|
+
```html
|
|
72
|
+
<fig-slider min="0" max="100" value="50" text></fig-slider>
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
### Color Input
|
|
76
|
+
|
|
77
|
+
```html
|
|
78
|
+
<fig-input-color value="#ff0000" text alpha></fig-input-color>
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
For more detailed usage instructions and examples for each component, please refer to the individual component documentation.
|
|
82
|
+
|
|
83
|
+
## Contributing
|
|
84
|
+
|
|
85
|
+
Contributions to Fig Components are welcome! Please feel free to submit a Pull Request.
|
|
86
|
+
|
|
87
|
+
## License
|
|
88
|
+
|
|
89
|
+
[MIT License](LICENSE)
|