natxocc
910c6ab3c7
All checks were successful
Deploy Docs to Synology / deploy (push) Successful in 4s
84 lines
1.8 KiB
Markdown
84 lines
1.8 KiB
Markdown
# Overlays
|
|
|
|
## Alert
|
|
<div id="demo-alert"></div>
|
|
|
|
```js
|
|
mount(
|
|
Alert({ class: 'alert-success' }, [
|
|
span({}, 'Operation completed successfully!'),
|
|
Button({ class: 'btn-sm' }, 'Undo')
|
|
]),
|
|
'#demo-alert'
|
|
);
|
|
```
|
|
|
|
## Modal
|
|
<div id="demo-modal"></div>
|
|
|
|
```js
|
|
const modalOpen = $(false);
|
|
|
|
mount(
|
|
div({ class: 'flex flex-col items-start gap-2' }, [
|
|
Button({
|
|
class: 'btn',
|
|
onclick: () => modalOpen(true)
|
|
}, 'Abrir modal'),
|
|
Modal({
|
|
open: modalOpen,
|
|
title: 'Congratulations!',
|
|
backdrop: true,
|
|
actions: [
|
|
form({ method: 'dialog' },
|
|
Button({ class: 'btn', onclick: () => modalOpen(false) }, 'Close')
|
|
)
|
|
]
|
|
}, [
|
|
p({}, 'You have successfully created a reactive DaisyUI modal with SigPro.')
|
|
])
|
|
]),
|
|
'#demo-modal'
|
|
);
|
|
```
|
|
|
|
## Toast
|
|
<div id="demo-toast"></div>
|
|
|
|
```js
|
|
mount(
|
|
div({ class: 'flex flex-wrap gap-2' }, [
|
|
Button({ class: 'btn', onclick: () => Toast('File saved!') }, 'Simple'),
|
|
Button({ class: 'btn', onclick: () => Toast('Error', 'alert-error', 5000) }, 'Error (5s)'),
|
|
Button({ class: 'btn', onclick: () => Toast(
|
|
div({ class: 'flex items-center gap-2' }, [
|
|
span({ class: 'icon-[lucide--check] text-lg' }),
|
|
span({}, 'Report generated successfully')
|
|
]),
|
|
'alert-success'
|
|
) }, 'With icon'),
|
|
Button({ class: 'btn', onclick: () => Toast(
|
|
h('div', { class: 'flex flex-col' }, [
|
|
h('strong', {}, '¡ATTENTION!'),
|
|
h('span', {}, 'Error saving!'),
|
|
h('button', { class: 'btn btn-xs mt-1', onclick: () => console.log('retry') }, 'Retry')
|
|
]),
|
|
'alert-warning',
|
|
7000
|
|
) }, 'Complex')
|
|
]),
|
|
'#demo-toast'
|
|
);
|
|
```
|
|
|
|
## Tooltip
|
|
<div id="demo-tooltip"></div>
|
|
|
|
```js
|
|
mount(
|
|
Tooltip({ tip: 'Click to save', class: 'tooltip-right' },
|
|
Button({ class: 'btn' }, 'Save')
|
|
),
|
|
'#demo-tooltip'
|
|
);
|
|
``` |