natxocc
910c6ab3c7
All checks were successful
Deploy Docs to Synology / deploy (push) Successful in 4s
100 lines
2.0 KiB
Markdown
100 lines
2.0 KiB
Markdown
# Display
|
|
|
|
## Badge
|
|
<div id="demo-badge"></div>
|
|
|
|
```js
|
|
mount(
|
|
Badge({ class: 'badge-primary' }, 'New'),
|
|
'#demo-badge'
|
|
);
|
|
```
|
|
|
|
## Indicator
|
|
<div id="demo-indicator"></div>
|
|
|
|
```js
|
|
mount(
|
|
Indicator({ value: '5' },
|
|
Button({ class: 'btn btn-sm' }, 'Notifications')
|
|
),
|
|
'#demo-indicator'
|
|
);
|
|
```
|
|
|
|
## Stack
|
|
<div id="demo-stack"></div>
|
|
|
|
```js
|
|
mount(
|
|
Stack({ class: 'w-32 h-20' }, [
|
|
div({ class: 'bg-primary text-primary-content p-2' }, 'Top'),
|
|
div({ class: 'bg-secondary text-secondary-content p-2' }, 'Bottom')
|
|
]),
|
|
'#demo-stack'
|
|
);
|
|
```
|
|
|
|
## Stat
|
|
<div id="demo-stat"></div>
|
|
|
|
```js
|
|
// Stat is a simple wrapper for the DaisyUI stat component
|
|
const Stat = (p, c) => div({ ...p, class: cls('stat', p.class) }, c)
|
|
|
|
mount(
|
|
div({ class: 'stats shadow' },
|
|
Stat({ class: 'stat' }, [
|
|
div({ class: 'stat-title' }, 'Total Downloads'),
|
|
div({ class: 'stat-value' }, '12.5K'),
|
|
div({ class: 'stat-desc' }, '21% more than last month')
|
|
])
|
|
),
|
|
'#demo-stat'
|
|
)
|
|
```
|
|
|
|
## Table
|
|
<div id="demo-table"></div>
|
|
|
|
```js
|
|
const users = [
|
|
{ id: 1, name: 'Alice', role: 'Admin' },
|
|
{ id: 2, name: 'Bob', role: 'Editor' },
|
|
{ id: 3, name: 'Charlie', role: 'Viewer' }
|
|
];
|
|
|
|
mount(
|
|
Table({
|
|
items: users,
|
|
columns: [
|
|
{ key: 'name', label: 'Name' },
|
|
{ key: 'role', label: 'Role' },
|
|
{ render: (it) => Button({ class: 'btn-xs' }, 'Edit') }
|
|
],
|
|
class: 'table-zebra'
|
|
}),
|
|
'#demo-table'
|
|
);
|
|
```
|
|
|
|
## Timeline
|
|
<div id="demo-timeline"></div>
|
|
|
|
```js
|
|
mount(
|
|
Timeline({ vertical: true }, [
|
|
li({}, [
|
|
div({ class: 'timeline-start' }, '2024'),
|
|
div({ class: 'timeline-middle' }, span({ class: 'icon-[lucide--check]' })),
|
|
div({ class: 'timeline-end timeline-box' }, 'Project started')
|
|
]),
|
|
li({}, [
|
|
div({ class: 'timeline-start' }, '2025'),
|
|
div({ class: 'timeline-middle' }, span({ class: 'icon-[lucide--clock]' })),
|
|
div({ class: 'timeline-end timeline-box' }, 'First prototype')
|
|
])
|
|
]),
|
|
'#demo-timeline'
|
|
);
|
|
``` |