This commit is contained in:
@@ -15,7 +15,6 @@
|
||||
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
|
||||
|
||||
<style>
|
||||
/* Personaliza los callouts si quieres */
|
||||
.markdown-section .callout {
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
@@ -5,7 +5,7 @@ Follow these steps to integrate **SigPro-UI** into your project.
|
||||
---
|
||||
|
||||
!> **📘 Core Concepts**
|
||||
SigProUI is built on top of the [SigPro](https://sigpro.natxocc.com/#/) reactive core. To learn how to create signals, manage reactivity, and structure your application logic, check out the [SigPro documentation](https://sigpro.natxocc.com/#/).
|
||||
SigProUI is built on top of the `SigPro` reactive core. To learn how to create signals, manage reactivity, and structure your application logic, check out the [SigPro documentation](https://sigpro.natxocc.com/#/).
|
||||
|
||||
---
|
||||
|
||||
@@ -13,19 +13,18 @@ SigProUI is built on top of the [SigPro](https://sigpro.natxocc.com/#/) reactive
|
||||
|
||||
```bash
|
||||
# ESM / Bundler (tree-shaking)
|
||||
npm install sigpro sigpro-ui
|
||||
npm install sigpro-ui
|
||||
|
||||
# Or with bun
|
||||
bun add sigpro sigpro-ui
|
||||
bun add sigpro-ui
|
||||
```
|
||||
|
||||
## 2. Import and use in your app
|
||||
|
||||
### ESM / Module usage (tree-shaking)
|
||||
### ESM / Module usage
|
||||
|
||||
```javascript
|
||||
import { $, watch, h, mount } from "sigpro";
|
||||
import { Button, Input, Alert, Toast, tt } from "sigpro-ui";
|
||||
import "sigpro-ui";
|
||||
import "sigpro-ui/css";
|
||||
|
||||
const App = () => {
|
||||
@@ -110,7 +109,9 @@ mount(App, "#app");
|
||||
- `h()` - Create HTML elements with reactivity
|
||||
- `when()` - Conditional rendering
|
||||
- `each()` - List rendering
|
||||
- `router()` - Hash‑based SPA router.
|
||||
- `mount()` - Mount components to DOM
|
||||
- `batch()` - Batch multiple reactive updates into a single flush
|
||||
|
||||
> For more information about SigPro Core visit official Docs [SigPro Docs](https://sigpro.natxocc.com/#/)
|
||||
|
||||
@@ -122,24 +123,24 @@ mount(App, "#app");
|
||||
- `Table()` - Data tables
|
||||
- `Tabs()` - Tabbed interfaces
|
||||
- `Toast()` - Toast notifications
|
||||
- And 30+ more components!
|
||||
- And 40+ more components!
|
||||
|
||||
### Utilities
|
||||
- `tt()` - i18n translation function
|
||||
- `t()` - i18n translation function
|
||||
|
||||
## Language Support
|
||||
|
||||
SigProUI includes built-in i18n with Spanish and English:
|
||||
|
||||
```javascript
|
||||
import { tt, Locale } from 'sigpro-ui';
|
||||
import { t, Locale } from 'sigpro-ui';
|
||||
|
||||
// Change locale (default is 'es')
|
||||
Locale('en');
|
||||
|
||||
// Use translations
|
||||
Button({}, tt('close'));
|
||||
Input({ placeholder: tt('search') });
|
||||
Button({}, t('close'));
|
||||
Input({ placeholder: t('search') });
|
||||
```
|
||||
|
||||
## TypeScript Support
|
||||
@@ -147,7 +148,6 @@ Input({ placeholder: tt('search') });
|
||||
SigProUI includes TypeScript definitions:
|
||||
|
||||
```typescript
|
||||
import { $ } from 'sigpro';
|
||||
import { Button, Input, Toast } from 'sigpro-ui';
|
||||
import type { ButtonProps, InputProps } from 'sigpro-ui';
|
||||
```
|
||||
@@ -157,9 +157,6 @@ import type { ButtonProps, InputProps } from 'sigpro-ui';
|
||||
| Problem | Solution |
|
||||
| :--- | :--- |
|
||||
| Components don't look styled | Make sure you're loading the CSS (`sigpro-ui.min.css`) |
|
||||
| `$ is not defined` | ESM: import from `sigpro`. CDN: functions are in global scope |
|
||||
| `Button is not defined` | ESM: `import { Button } from 'sigpro-ui'`. CDN: available globally |
|
||||
| Build errors | Install both `sigpro` and `sigpro-ui` |
|
||||
| CDN functions not working | All core functions (`$`, `h`, `watch`, etc.) are available globally |
|
||||
| Locale not working | Set locale with `Locale('en')` before using translations |
|
||||
|
||||
|
||||
Reference in New Issue
Block a user