free-astro-components 1.0.0 → 1.0.2
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 +62 -4
- package/package.json +1 -1
- package/src/index.js +1 -1
package/README.md
CHANGED
|
@@ -27,6 +27,11 @@ Explore and utilize a variety of components that can help you build your web pro
|
|
|
27
27
|
- **Tab**
|
|
28
28
|
- A tab component for organizing content into tabs.
|
|
29
29
|
- **TabItem**: A subcomponent for individual tab items.
|
|
30
|
+
- **Modal**
|
|
31
|
+
- A modal component for displaying content in a dialog.
|
|
32
|
+
- **ModalHeader**: The header section of the modal, usually containing a title.
|
|
33
|
+
- **ModalBody**: The main content area of the modal.
|
|
34
|
+
- **ModalFooter**: The footer section of the modal, typically containing action buttons.
|
|
30
35
|
|
|
31
36
|
## Getting Started
|
|
32
37
|
|
|
@@ -36,14 +41,67 @@ Explore and utilize a variety of components that can help you build your web pro
|
|
|
36
41
|
|
|
37
42
|
2. **Installation:**
|
|
38
43
|
|
|
39
|
-
- To use these components in your Astro.js project,
|
|
44
|
+
- To use these components in your Astro.js project, you can install the package via npm:
|
|
45
|
+
|
|
46
|
+
```bash
|
|
47
|
+
npm install free-astro-components
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
- Follow the [installation instructions](https://free-astro-components.vercel.app/guide/installation) for more details on setting up and using the components in your project.
|
|
40
51
|
|
|
41
52
|
3. **Usage:**
|
|
42
|
-
- Detailed documentation and code examples are available on the website to help you integrate and customize each component.
|
|
43
53
|
|
|
44
|
-
|
|
54
|
+
### Example Usage
|
|
55
|
+
|
|
56
|
+
Here’s how you can use some of the components in your Astro.js project:
|
|
57
|
+
|
|
58
|
+
**Button Component:**
|
|
59
|
+
|
|
60
|
+
```jsx
|
|
61
|
+
// src/pages/index.astro
|
|
62
|
+
---
|
|
63
|
+
import { Button } from 'free-astro-components';
|
|
64
|
+
---
|
|
65
|
+
|
|
66
|
+
<Button label="Click me" />
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
**Select Component:**
|
|
70
|
+
|
|
71
|
+
```jsx
|
|
72
|
+
// src/pages/index.astro
|
|
73
|
+
---
|
|
74
|
+
import { Select } from 'free-astro-components';
|
|
75
|
+
---
|
|
76
|
+
|
|
77
|
+
<Select placeholder="Select an option" options={[{label: 'option 1'}, {label: 'option 2'}]} />
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
**Select Component:**
|
|
81
|
+
|
|
82
|
+
```jsx
|
|
83
|
+
// src/pages/index.astro
|
|
84
|
+
---
|
|
85
|
+
import { Modal, ModalHeader, ModalBody, ModalFooter } from 'free-astro-components';
|
|
86
|
+
---
|
|
87
|
+
|
|
88
|
+
<Button label="Click me" data-modal-trigger="modal-id" />
|
|
89
|
+
|
|
90
|
+
<Modal id="modal-id">
|
|
91
|
+
<ModalHeader>
|
|
92
|
+
<h2>Modal Title</h2>
|
|
93
|
+
</ModalHeader>
|
|
94
|
+
<ModalBody>
|
|
95
|
+
<p>This is the modal body content.</p>
|
|
96
|
+
</ModalBody>
|
|
97
|
+
<ModalFooter>
|
|
98
|
+
<Button variant="secondary" label="Close" data-modal-close>
|
|
99
|
+
<Button variant="primary" label="Confirm">
|
|
100
|
+
</ModalFooter>
|
|
101
|
+
</Modal>
|
|
102
|
+
```
|
|
45
103
|
|
|
46
|
-
|
|
104
|
+
Detailed documentation and code examples for each component are available on the website to help you integrate and customize them.
|
|
47
105
|
|
|
48
106
|
## Credits
|
|
49
107
|
|
package/package.json
CHANGED
package/src/index.js
CHANGED
|
@@ -10,6 +10,6 @@ export { default as Tab } from './components/Tab.astro'
|
|
|
10
10
|
export { default as TabItem } from './components/TabItem.astro'
|
|
11
11
|
export { default as ThemeSwitch } from './components/ThemeSwitch.astro'
|
|
12
12
|
export { default as Modal } from './components/Modal.astro'
|
|
13
|
-
export { default as
|
|
13
|
+
export { default as ModalHeader } from './components/ModalHeader.astro'
|
|
14
14
|
export { default as ModalBody } from './components/ModalBody.astro'
|
|
15
15
|
export { default as ModalFooter } from './components/ModalFooter.astro'
|