Update Readme.md

This commit is contained in:
Natxo
2026-04-04 14:43:22 +02:00
committed by GitHub
parent a677f5d00b
commit 7d2af57ac1

View File

@@ -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**