Update Readme.md
This commit is contained in:
62
Readme.md
62
Readme.md
@@ -28,12 +28,12 @@ npm install sigpro-ui
|
|||||||
### Via CDN (Browser)
|
### Via CDN (Browser)
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<!-- SigPro core + UI with styles included -->
|
<!-- SigPro UI with styles included -->
|
||||||
<script src="https://unpkg.com/sigpro"></script>
|
|
||||||
<script src="https://unpkg.com/sigpro-ui"></script>
|
<script src="https://unpkg.com/sigpro-ui"></script>
|
||||||
|
<link href="https://unpkg.com/sigpro-ui/css" rel="stylesheet">
|
||||||
```
|
```
|
||||||
|
|
||||||
**That's it!** No additional CSS files, no configuration, no build step.
|
**That's it!** No additional CSS files, no configuration, no build step. SigPro core is included internally.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -47,6 +47,7 @@ Import only the components you need:
|
|||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
import { $, $mount, Button, Modal, Input, Alert } from "sigpro-ui";
|
import { $, $mount, Button, Modal, Input, Alert } from "sigpro-ui";
|
||||||
|
import "sigpro-ui/css";
|
||||||
|
|
||||||
const App = () => {
|
const App = () => {
|
||||||
const show = $(false);
|
const show = $(false);
|
||||||
@@ -68,12 +69,12 @@ $mount(App, "#app");
|
|||||||
Inject all components into the `window` object:
|
Inject all components into the `window` object:
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
import SigproUI from "sigpro-ui";
|
import "sigpro-ui";
|
||||||
|
import "sigpro-ui/css";
|
||||||
|
|
||||||
// Injects Button, Table, Input, Alert, etc. into window
|
// All components (Button, Table, Input, Alert, etc.) are now globally available.
|
||||||
SigproUI.install();
|
// No need to import anything else!
|
||||||
|
|
||||||
// Now you can use them directly anywhere:
|
|
||||||
const myApp = () => Table({ items: [], columns: [] });
|
const myApp = () => Table({ items: [], columns: [] });
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -82,7 +83,8 @@ const myApp = () => Table({ items: [], columns: [] });
|
|||||||
## Basic Example
|
## Basic Example
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
import { $, Button, Toast, Div, H1 } from "sigpro-ui";
|
import { $, $mount, Button, Toast, Div, H1 } from "sigpro-ui";
|
||||||
|
import "sigpro-ui/css";
|
||||||
|
|
||||||
const App = () => {
|
const App = () => {
|
||||||
const count = $(0);
|
const count = $(0);
|
||||||
@@ -103,6 +105,50 @@ const App = () => {
|
|||||||
$mount(App, "#app");
|
$mount(App, "#app");
|
||||||
```
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## What's Included?
|
||||||
|
|
||||||
|
### Core Functions (from SigPro)
|
||||||
|
- `$()` - Reactive signals
|
||||||
|
- `$watch()` - Watch reactive dependencies
|
||||||
|
- `$html()` - Create HTML elements with reactivity
|
||||||
|
- `$if()` - Conditional rendering
|
||||||
|
- `$for()` - List rendering
|
||||||
|
- `$router()` - Hash-based routing
|
||||||
|
- `$mount()` - Mount components to DOM
|
||||||
|
|
||||||
|
### UI Components
|
||||||
|
- `Button`, `Input`, `Select`, `Checkbox`, `Radio`
|
||||||
|
- `Modal`, `Alert`, `Toast`, `Tooltip`
|
||||||
|
- `Table`, `List`, `Badge`, `Stat`, `Timeline`
|
||||||
|
- `Tabs`, `Accordion`, `Dropdown`, `Drawer`
|
||||||
|
- `Datepicker`, `Colorpicker`, `Autocomplete`, `Rating`
|
||||||
|
- `Fileinput`, `Fab`, `Swap`, `Indicator`
|
||||||
|
- And 30+ more!
|
||||||
|
|
||||||
|
### Utilities
|
||||||
|
- `tt()` - i18n translation function (ES/EN)
|
||||||
|
- `Locale()` - Set global language
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Language Support
|
||||||
|
|
||||||
|
Built-in i18n with Spanish and English:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import { tt, Locale } from "sigpro-ui";
|
||||||
|
|
||||||
|
// Change locale (default is 'es')
|
||||||
|
Locale('en');
|
||||||
|
|
||||||
|
// Use translations
|
||||||
|
const closeButton = Button({}, tt('close')());
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
## License
|
## License
|
||||||
|
|
||||||
MIT © 2026 **SigPro Team**
|
MIT © 2026 **SigPro Team**
|
||||||
|
|||||||
Reference in New Issue
Block a user