natxocc
e3e5082247
All checks were successful
Deploy Docs to Synology / deploy (push) Successful in 4s
120 lines
2.8 KiB
Markdown
120 lines
2.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'
|
|
);
|
|
```
|
|
## Chat
|
|
<div id="demo-chat"></div>
|
|
|
|
```js
|
|
mount(
|
|
div({ class: 'flex flex-col gap-4' }, [
|
|
// Mensaje izquierdo (Obi-Wan)
|
|
Chat({ class: 'chat-start' }, [
|
|
ChatImage({}, img({
|
|
src: 'https://img.daisyui.com/images/profile/demo/kenobee@192.webp',
|
|
alt: 'Obi-Wan Kenobi'
|
|
})),
|
|
ChatHeader({}, [
|
|
'Obi-Wan Kenobi',
|
|
time({ class: 'text-xs opacity-50' }, '12:45')
|
|
]),
|
|
ChatBubble({}, 'You were the Chosen One!'),
|
|
ChatFooter({ class: 'opacity-50' }, 'Delivered')
|
|
]),
|
|
// Mensaje derecho (Anakin)
|
|
Chat({ class: 'chat-end' }, [
|
|
ChatImage({}, img({
|
|
src: 'https://img.daisyui.com/images/profile/demo/anakeen@192.webp',
|
|
alt: 'Anakin'
|
|
})),
|
|
ChatHeader({}, [
|
|
'Anakin',
|
|
time({ class: 'text-xs opacity-50' }, '12:46')
|
|
]),
|
|
ChatBubble({}, 'I hate you!'),
|
|
ChatFooter({ class: 'opacity-50' }, 'Seen at 12:46')
|
|
])
|
|
]),
|
|
'#demo-chat'
|
|
);
|
|
```
|
|
|
|
## 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'
|
|
);
|
|
``` |