wini-web-components 6.3.1 → 6.3.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.
Files changed (4) hide show
  1. package/README.md +61 -9
  2. package/dist/index.cjs.js +2 -2
  3. package/dist/index.es.js +5 -5
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -1,18 +1,70 @@
1
- # Getting Started with Create React App
1
+ # wini-web-components
2
2
 
3
- This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
3
+ A modern, lightweight, and highly customizable UI component library for ReactJS projects. Built with TSX, JSX, and CSS, `wini-web-components` provides a collection of reusable components to help you create responsive, beautiful, and user-friendly interfaces with ease. Whether you're building a small app or a large-scale project, this library offers the flexibility and tools you need to speed up your development process.
4
4
 
5
- ## Available Scripts
5
+ ## Why Choose wini-web-components?
6
6
 
7
- In the project directory, you can run:
7
+ - **Ready-to-Use Components**: A wide range of pre-built UI components for quick integration.
8
+ - **Responsive Design**: Built-in CSS classes for seamless responsiveness across devices, from mobile to extra-large screens.
9
+ - **Customizable**: Easily style and configure components to match your project's design.
10
+ - **Lightweight**: Minimal overhead to keep your app fast and efficient.
11
+ - **TypeScript Support**: Fully typed with TSX for a better developer experience.
8
12
 
9
- ### `npm i wini-web-components`
13
+ ## Installation
10
14
 
11
- ### Using Skin
15
+ Install the package via npm:
16
+
17
+ ```bash
18
+ npm install wini-web-components
19
+
20
+ ### Using Skin:
12
21
  add this cdn link into your App.css file. \
13
22
  @import url(https://cdn.jsdelivr.net/gh/WiniGit/web-component@latest/src/skin/root.css); \
14
23
  @import url(https://cdn.jsdelivr.net/gh/WiniGit/web-component@latest/src/skin/typography.css); \
15
- @import url(https://cdn.jsdelivr.net/gh/WiniGit/web-component@latest/src/skin/layout.css);
16
-
17
-
24
+ @import url(https://cdn.jsdelivr.net/gh/WiniGit/web-component@latest/src/skin/layout.css); \
25
+ row: for horizontal layout. \
26
+ col: for vertical layout. \
27
+ Responsive Design \
28
+ wini-web-components comes with built-in CSS classes to ensure your UI looks great on all devices. The library supports responsive layouts for:\
29
+ Min Devices (Small phones): < 576px. \
30
+ Small Devices (Phones): Up to 576px. \
31
+ Medium Devices (Tablets): 576px to 768px. \
32
+ Large Devices (Laptops): 768px to 992px. \
33
+ Extra Large Devices (Desktops): 992px to 1200px. \
34
+ Extra Extra Large Devices: > 1200px. \
35
+ Each component is designed to adapt seamlessly to different screen sizes, with CSS classes: \
36
+ Ex: remain, col0, col1, col2, col3, col4, col6, col8, col10, col12, col16, col18, col20, col24, col1-min, col2-min, col3-sm, col6-sm, col8-md, col10-lg, col12-lg, col16-xl, col18-xl, col20-xxl, col24-xxl
18
37
 
38
+ ### Using code features:
39
+ Components
40
+ wini-web-components includes the following UI components, ready to drop into your React project: \
41
+ Button: A versatile button component with multiple styles.\
42
+ support className: \
43
+ Ex: size64, size56, size48, size40, size24, default is size32. button-grey, button-primary, button-neutral, button-black, button-white, button-infor, button-warning, button-error, button-success, button-infor-main, button-warning-main, button-error-main, button-success-main \
44
+ WIcon: A custom icon component for your app.\
45
+ support className: \
46
+ Ex: icon-button, light, size64, size56, size48, size40, size32, size24. \
47
+ Calendar: A date selection component for scheduling and events.
48
+ Carousel: A slideshow component for displaying images or content.
49
+ Checkbox: A customizable checkbox for forms.
50
+ CK-Editor: A rich text editor integration for content creation.
51
+ Date-Time-Picker: A component for selecting dates and times.
52
+ Dialog: A modal dialog for alerts, forms, or custom content.
53
+ Input-File: A file upload input with a clean UI.
54
+ Input-Multi-Select: A multi-select dropdown for forms.
55
+ Input-Text: A styled text input field.
56
+ Input-Textarea: A textarea for longer text input.
57
+ Number-Picker: A component for selecting numerical values.
58
+ Pagination: A pagination component for navigating large datasets.
59
+ Popup: A popup component for notifications or overlays.
60
+ Progress-Bar: A progress bar to show task completion.
61
+ Progress-Circle: A circular progress indicator.
62
+ Radio-Button: A radio button for single-choice selections.
63
+ Rating: A star rating component for reviews or feedback.
64
+ Select: A dropdown select component for forms.
65
+ Slider: A slider for selecting a range of values.
66
+ Switch: A toggle switch for on/off states.
67
+ Table: A responsive table for displaying tabular data.
68
+ Tag: A tag component for categorization or labeling.
69
+ Text-Area: A textarea with additional styling options.
70
+ Text-Field: A general-purpose text input field.