Independent sigpro vs sigpro-ui
All checks were successful
Deploy Docs to Synology / deploy (push) Successful in 3s
All checks were successful
Deploy Docs to Synology / deploy (push) Successful in 3s
This commit is contained in:
31
Readme.md
31
Readme.md
@@ -14,7 +14,7 @@ Based in SigPro Core
|
||||
|
||||
**SigPro UI** is a lightweight, ultra-fast, and reactive component library built for the **SigPro** reactivity core. It provides a set of high-quality, accessible, and themeable UI components with **zero external dependencies** - everything is included.
|
||||
|
||||
**SigPro UI** is a complete, full self-contained UI library + reactive core in under **35KB gzip** (< 13KB JS + < 22KB CSS). 🎉
|
||||
**SigPro UI** is a complete, full self-contained UI library in under **35KB gzip** (JS + CSS). 🎉
|
||||
|
||||
Unlike heavy frameworks, SigPro UI focuses on a **"Zero-Build"** philosophy, allowing you to build complex reactive interfaces with a functional, declarative syntax that runs natively in the browser.
|
||||
|
||||
@@ -36,19 +36,20 @@ Unlike heavy frameworks, SigPro UI focuses on a **"Zero-Build"** philosophy, all
|
||||
### ESM / Bundler
|
||||
|
||||
```bash
|
||||
npm install sigpro-ui
|
||||
npm install sigpro sigpro-ui
|
||||
# or
|
||||
bun add sigpro-ui
|
||||
bun add sigpro sigpro-ui
|
||||
```
|
||||
|
||||
### CDN (Browser - All-in-One)
|
||||
|
||||
```html
|
||||
<script src="https://unpkg.com/sigpro-ui@latest/dist/sigpro-ui.min.js"></script>
|
||||
<link href="https://unpkg.com/sigpro-ui@latest/dist/sigpro-ui.min.css" rel="stylesheet">
|
||||
<script src="https://unpkg.com/sigpro-ui@latest/dist/sigpro.min.js"></script>
|
||||
<script src="https://unpkg.com/sigpro-ui@latest/dist/sigpro-ui.min.js"></script>
|
||||
```
|
||||
|
||||
**That's it!** The CDN version includes SigPro core internally - no additional scripts needed.
|
||||
**That's it!** no additional scripts needed.
|
||||
|
||||
---
|
||||
|
||||
@@ -57,8 +58,9 @@ bun add sigpro-ui
|
||||
### ESM / Modular (Tree Shaking)
|
||||
|
||||
```javascript
|
||||
import { $, mount, watch, h, Button, Modal, Input, Alert } from "sigpro-ui";
|
||||
import "sigpro-ui/css";
|
||||
import { $, mount, watch, h } from "sigpro"; // Core functions
|
||||
import { Button, Modal, Input, Alert } from "sigpro-ui"; // Components
|
||||
import "sigpro-ui/css"; // CSS
|
||||
|
||||
const App = () => {
|
||||
const show = $(false);
|
||||
@@ -111,6 +113,7 @@ mount(App, "#app");
|
||||
- `when()` - Conditional rendering
|
||||
- `each()` - List rendering
|
||||
- `mount()` - Mount components to DOM
|
||||
- `batch()` - Batch multiple reactive updates into a single flush
|
||||
|
||||
> [SigPro Core Docs](https://sigpro.natxocc.com/#/)
|
||||
|
||||
@@ -124,23 +127,23 @@ mount(App, "#app");
|
||||
- And 30+ more!
|
||||
|
||||
### Utilities
|
||||
- `tt()` - i18n translation function (ES/EN)
|
||||
- `Locale()` - Set global language
|
||||
- `t()` - i18n translation function
|
||||
- `setLocale()` - Set global language
|
||||
|
||||
---
|
||||
|
||||
## Language Support
|
||||
|
||||
Built-in i18n with Spanish and English:
|
||||
Built-in i18n with custom language:
|
||||
|
||||
```javascript
|
||||
import { tt, Locale } from "sigpro-ui";
|
||||
import { tt, setLocale } from "sigpro-ui";
|
||||
|
||||
// Change locale (default is 'es')
|
||||
Locale('en');
|
||||
// Change locale
|
||||
setLocale('en');
|
||||
|
||||
// Use translations
|
||||
Button({}, tt('close'));
|
||||
Button({}, t('close'));
|
||||
Input({ placeholder: tt('search') });
|
||||
```
|
||||
|
||||
|
||||
Reference in New Issue
Block a user