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)
|
||||
|
||||
```html
|
||||
<!-- SigPro core + UI with styles included -->
|
||||
<script src="https://unpkg.com/sigpro"></script>
|
||||
<!-- SigPro UI with styles included -->
|
||||
<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
|
||||
import { $, $mount, Button, Modal, Input, Alert } from "sigpro-ui";
|
||||
import "sigpro-ui/css";
|
||||
|
||||
const App = () => {
|
||||
const show = $(false);
|
||||
@@ -68,12 +69,12 @@ $mount(App, "#app");
|
||||
Inject all components into the `window` object:
|
||||
|
||||
```javascript
|
||||
import SigproUI from "sigpro-ui";
|
||||
import "sigpro-ui";
|
||||
import "sigpro-ui/css";
|
||||
|
||||
// Injects Button, Table, Input, Alert, etc. into window
|
||||
SigproUI.install();
|
||||
// All components (Button, Table, Input, Alert, etc.) are now globally available.
|
||||
// No need to import anything else!
|
||||
|
||||
// Now you can use them directly anywhere:
|
||||
const myApp = () => Table({ items: [], columns: [] });
|
||||
```
|
||||
|
||||
@@ -82,7 +83,8 @@ const myApp = () => Table({ items: [], columns: [] });
|
||||
## Basic Example
|
||||
|
||||
```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 count = $(0);
|
||||
@@ -103,6 +105,50 @@ const 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
|
||||
|
||||
MIT © 2026 **SigPro Team**
|
||||
|
||||
Reference in New Issue
Block a user