248 lines
7.8 KiB
Markdown
248 lines
7.8 KiB
Markdown
# Button
|
|
|
|
Styled button with full DaisyUI support and reactive states.
|
|
|
|
## Tag
|
|
|
|
`Button`
|
|
|
|
## Props
|
|
|
|
| Prop | Type | Default | Description |
|
|
| :----------- | :--------------------------- | :------------------ | :------------------------------------------ |
|
|
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
|
|
| `disabled` | `boolean \| Signal<boolean>` | `false` | Disabled state |
|
|
| `loading` | `boolean \| Signal<boolean>` | `false` | Shows loading spinner |
|
|
| `badge` | `string \| Signal<string>` | `-` | Badge text displayed on corner |
|
|
| `badgeClass` | `string` | `'badge-secondary'` | Badge styling classes |
|
|
| `tooltip` | `string \| Signal<string>` | `-` | Tooltip text on hover |
|
|
| `icon` | `string \| VNode \| Signal` | `-` | Icon displayed before text |
|
|
| `onclick` | `function` | `-` | Click event handler |
|
|
| `type` | `string` | `'button'` | Native button type |
|
|
|
|
## Live Examples
|
|
|
|
### Basic Button
|
|
|
|
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
|
<div class="card-body">
|
|
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
|
<div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
|
</div>
|
|
</div>
|
|
|
|
```javascript
|
|
const BasicDemo = () => {
|
|
return Button({ class: "btn btn-primary" }, "Click Me");
|
|
};
|
|
$mount(BasicDemo, "#demo-basic");
|
|
```
|
|
|
|
### With Loading State
|
|
|
|
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
|
<div class="card-body">
|
|
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
|
<div id="demo-loading" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
|
</div>
|
|
</div>
|
|
|
|
```javascript
|
|
const LoadingDemo = () => {
|
|
const isSaving = $(false);
|
|
|
|
return Button(
|
|
{
|
|
class: "btn btn-success",
|
|
loading: isSaving,
|
|
onclick: async () => {
|
|
isSaving(true);
|
|
await new Promise((resolve) => setTimeout(resolve, 2000));
|
|
isSaving(false);
|
|
},
|
|
},
|
|
"Save Changes",
|
|
);
|
|
};
|
|
$mount(LoadingDemo, "#demo-loading");
|
|
```
|
|
|
|
### With Badge
|
|
|
|
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
|
<div class="card-body">
|
|
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
|
<div id="demo-badge" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
|
</div>
|
|
</div>
|
|
|
|
```javascript
|
|
const BadgeDemo = () => {
|
|
return Button(
|
|
{
|
|
class: "btn btn-outline",
|
|
badge: "3",
|
|
badgeClass: "badge-accent",
|
|
},
|
|
"Notifications",
|
|
);
|
|
};
|
|
$mount(BadgeDemo, "#demo-badge");
|
|
```
|
|
|
|
### With Tooltip
|
|
|
|
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
|
<div class="card-body">
|
|
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
|
<div id="demo-tooltip" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
|
</div>
|
|
</div>
|
|
|
|
```javascript
|
|
const TooltipDemo = () => {
|
|
return Button(
|
|
{
|
|
class: "btn btn-ghost",
|
|
tooltip: "Delete item",
|
|
},
|
|
"Delete",
|
|
);
|
|
};
|
|
$mount(TooltipDemo, "#demo-tooltip");
|
|
```
|
|
|
|
### Disabled State
|
|
|
|
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
|
<div class="card-body">
|
|
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
|
<div id="demo-disabled" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
|
</div>
|
|
</div>
|
|
|
|
```javascript
|
|
const DisabledDemo = () => {
|
|
const isDisabled = $(true);
|
|
|
|
return Button(
|
|
{
|
|
class: "btn btn-primary",
|
|
disabled: isDisabled,
|
|
},
|
|
"Submit",
|
|
);
|
|
};
|
|
$mount(DisabledDemo, "#demo-disabled");
|
|
```
|
|
|
|
### All Variants
|
|
|
|
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
|
<div class="card-body">
|
|
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
|
<div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
|
</div>
|
|
</div>
|
|
|
|
```javascript
|
|
const VariantsDemo = () => {
|
|
return Div({ class: "flex flex-wrap gap-2 justify-center" }, [
|
|
Button({ class: "btn btn-primary" }, "Primary"),
|
|
Button({ class: "btn btn-secondary" }, "Secondary"),
|
|
Button({ class: "btn btn-accent" }, "Accent"),
|
|
Button({ class: "btn btn-ghost" }, "Ghost"),
|
|
Button({ class: "btn btn-outline" }, "Outline"),
|
|
]);
|
|
};
|
|
$mount(VariantsDemo, "#demo-variants");
|
|
```
|
|
|
|
<script>
|
|
(function() {
|
|
const initButtonExamples = () => {
|
|
|
|
// 1. Basic Button
|
|
const basicTarget = document.querySelector('#demo-basic');
|
|
if (basicTarget && !basicTarget.hasChildNodes()) {
|
|
const BasicDemo = () => Button({ class: "btn btn-primary" }, "Click Me");
|
|
$mount(BasicDemo, basicTarget);
|
|
}
|
|
|
|
// 2. Loading State
|
|
const loadingTarget = document.querySelector('#demo-loading');
|
|
if (loadingTarget && !loadingTarget.hasChildNodes()) {
|
|
const LoadingDemo = () => {
|
|
const isSaving = $(false);
|
|
return Button({
|
|
class: "btn btn-success",
|
|
loading: isSaving,
|
|
onclick: async () => {
|
|
isSaving(true);
|
|
await new Promise(resolve => setTimeout(resolve, 2000));
|
|
isSaving(false);
|
|
}
|
|
}, "Save Changes");
|
|
};
|
|
$mount(LoadingDemo, loadingTarget);
|
|
}
|
|
|
|
// 3. Badge
|
|
const badgeTarget = document.querySelector('#demo-badge');
|
|
if (badgeTarget && !badgeTarget.hasChildNodes()) {
|
|
const BadgeDemo = () => Button({
|
|
class: "btn btn-outline",
|
|
badge: "3",
|
|
badgeClass: "badge-accent"
|
|
}, "Notifications");
|
|
$mount(BadgeDemo, badgeTarget);
|
|
}
|
|
|
|
// 4. Tooltip
|
|
const tooltipTarget = document.querySelector('#demo-tooltip');
|
|
if (tooltipTarget && !tooltipTarget.hasChildNodes()) {
|
|
const TooltipDemo = () => Button({
|
|
class: "btn btn-ghost",
|
|
tooltip: "Delete item"
|
|
}, "Delete");
|
|
$mount(TooltipDemo, tooltipTarget);
|
|
}
|
|
|
|
// 5. Disabled State
|
|
const disabledTarget = document.querySelector('#demo-disabled');
|
|
if (disabledTarget && !disabledTarget.hasChildNodes()) {
|
|
const DisabledDemo = () => {
|
|
const isDisabled = $(true);
|
|
return Button({
|
|
class: "btn btn-primary",
|
|
disabled: isDisabled
|
|
}, "Submit");
|
|
};
|
|
$mount(DisabledDemo, disabledTarget);
|
|
}
|
|
|
|
// 6. All Variants
|
|
const variantsTarget = document.querySelector('#demo-variants');
|
|
if (variantsTarget && !variantsTarget.hasChildNodes()) {
|
|
const VariantsDemo = () => Div({ class: "flex flex-wrap gap-2 justify-center" }, [
|
|
Button({ class: "btn btn-primary" }, "Primary"),
|
|
Button({ class: "btn btn-secondary" }, "Secondary"),
|
|
Button({ class: "btn btn-accent" }, "Accent"),
|
|
Button({ class: "btn btn-ghost" }, "Ghost"),
|
|
Button({ class: "btn btn-outline" }, "Outline")
|
|
]);
|
|
$mount(VariantsDemo, variantsTarget);
|
|
}
|
|
};
|
|
|
|
// Ejecutar la función después de definirla
|
|
initButtonExamples();
|
|
|
|
// Registrar para navegación en Docsify
|
|
if (window.$docsify) {
|
|
window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
|
|
hook.doneEach(initButtonExamples);
|
|
});
|
|
}
|
|
})();
|
|
</script> |