natxocc/sigpro-ui
1
1
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

adapt new Input
All checks were successful
Deploy Docs to Synology / deploy (push) Successful in 3s
Details

Browse Source
This commit is contained in:
Natxo
2026-04-23 13:22:49 +02:00
parent 59e6d972a8
commit e842ed8041
61 changed files with 2553 additions and 2758 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
docs/components/button.md
View File

@@ -31,7 +31,7 @@
### Example
```javascript
Button({ class: "btn-primary btn-lg btn-circle gap-4" }, "Click Me");
button({ class: "btn-primary btn-lg btn-circle gap-4" }, "Click Me");
// Applies: primary color, large size, circular shape
// class is any css class from pure css or favorite framework
```
@@ -46,7 +46,7 @@ Button({ class: "btn-primary btn-lg btn-circle gap-4" }, "Click Me");
```javascript
const BasicDemo = () => {
return Button({ class: "btn-primary" }, "Click Me");
return button({ class: "btn-primary" }, "Click Me");
};
mount(BasicDemo, "#demo-basic");
```
@@ -59,7 +59,7 @@ mount(BasicDemo, "#demo-basic");
const LoadingDemo = () => {
const isSaving = $(false);
return Button(
return button(
{
class: "btn-success",
disabled: isSaving,
@@ -81,8 +81,8 @@ mount(LoadingDemo, "#demo-loading");
```javascript
const IconDemo = () => {
return Div({ class: "flex flex-wrap gap-2 justify-center" }, [
Button({ class: "btn-primary" }, [Icon("icon-[lucide--x]"), "Favorite"]),
return div({ class: "flex flex-wrap gap-2 justify-center" }, [
button({ class: "btn-primary" }, [Icon("icon-[lucide--x]"), "Favorite"]),
]);
};
mount(IconDemo, "#demo-icon");
@@ -96,7 +96,7 @@ mount(IconDemo, "#demo-icon");
const BadgeDemo = () => {
return Indicator(
{ value: "3", class: "badge-accent" },
Button({ class: "btn-outline" }, "Notifications"),
button({ class: "btn-outline" }, "Notifications"),
);
};
mount(BadgeDemo, "#demo-badge");
@@ -110,7 +110,7 @@ mount(BadgeDemo, "#demo-badge");
const TooltipDemo = () => {
return Tooltip(
{ tip: "Delete item" },
Button({ class: "btn-ghost" }, "Delete"),
button({ class: "btn-ghost" }, "Delete"),
);
};
mount(TooltipDemo, "#demo-tooltip");
@@ -127,7 +127,7 @@ const CombinedDemo = () => {
{ tip: () => `${count()} likes` },
Indicator(
{ value: count, class: "badge-accent" },
Button(
button(
{
class: "btn-primary btn-lg",
onclick: () => count(count() + 1),
@@ -146,13 +146,13 @@ mount(CombinedDemo, "#demo-combined");
```javascript
const VariantsDemo = () => {
return Div({ class: "flex flex-wrap gap-2 justify-center" }, [
Button({ class: "btn-primary" }, "Primary"),
Button({ class: "btn-secondary" }, "Secondary"),
Button({ class: "btn-accent" }, "Accent"),
Button({ class: "btn-ghost" }, "Ghost"),
Button({ class: "btn-outline" }, "Outline"),
Button({ class: "btn-disabled" }, "Disabled"),
return div({ class: "flex flex-wrap gap-2 justify-center" }, [
button({ class: "btn-primary" }, "Primary"),
button({ class: "btn-secondary" }, "Secondary"),
button({ class: "btn-accent" }, "Accent"),
button({ class: "btn-ghost" }, "Ghost"),
button({ class: "btn-outline" }, "Outline"),
button({ class: "btn-disabled" }, "Disabled"),
]);
};
mount(VariantsDemo, "#demo-variants");