natxocc
953fae7bbc
All checks were successful
Deploy Docs to Synology / deploy (push) Successful in 3s
155 lines
3.2 KiB
Markdown
155 lines
3.2 KiB
Markdown
# Display
|
|
|
|
## Card
|
|
<div id="demo-card"></div>
|
|
|
|
```js
|
|
mount(
|
|
Card({ class: 'bg-base-100 w-96 shadow-xl' }, [
|
|
figure(img({ src: 'https://picsum.photos/400/200', alt: 'Imagen' })),
|
|
CardBody({}, [
|
|
CardTitle({}, '¡Nuevo producto!'),
|
|
p('Esta tarjeta muestra la composición flexible. Puedes añadir imágenes, texto, badges y más.'),
|
|
div({ class: 'flex gap-2 mt-2' }, [
|
|
Badge({ class: 'badge-primary' }, 'Nuevo'),
|
|
Badge({ class: 'badge-outline' }, 'En stock')
|
|
])
|
|
]),
|
|
CardActions({ class: 'justify-end m-4 gap-4' }, [
|
|
Button({ class: 'btn-ghost btn-sm' }, 'Cancelar'),
|
|
Button({ class: 'btn-primary btn-sm' }, 'Comprar')
|
|
])
|
|
]),
|
|
'#demo-card'
|
|
);
|
|
```
|
|
## 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'
|
|
);
|
|
```
|
|
## List
|
|
<div id="demo-list"></div>
|
|
|
|
```js
|
|
const items = $(['Dashboard', 'Settings', 'Help'])
|
|
|
|
mount(
|
|
List({ class: 'bg-base-200 rounded-box p-2' },
|
|
ListRows({
|
|
items,
|
|
render: (item) => span({ class: 'font-bold' }, item)
|
|
})
|
|
),
|
|
'#demo-list'
|
|
)
|
|
```
|
|
## 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
|
|
mount(
|
|
Stats({},
|
|
Stat({
|
|
title: 'Total Downloads',
|
|
value: '12.5K',
|
|
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({ class: 'table-zebra' },
|
|
TableItems({ items: users, columns: [{ key: 'name', label: 'Name' }, { key: 'role', label: 'Role' }] })
|
|
),
|
|
Table({ class: 'table-zebra' }, [
|
|
h('thead', {}, h('tr', {}, [h('th', {}, 'Nombre'), h('th', {}, 'Acción')])),
|
|
h('tbody', {},
|
|
users.map( user => h('tr', {}, [
|
|
h('td', {}, user.name),
|
|
h('td', {}, Button({ class: 'btn-xs' }, 'Editar'))
|
|
]))
|
|
)
|
|
])
|
|
],
|
|
'#demo-table'
|
|
)
|
|
```
|
|
## Textrotate
|
|
<div id="demo-textrotate"></div>
|
|
|
|
```js
|
|
mount(
|
|
Textrotate({ class: 'text-2xl font-bold' },
|
|
span({class:"bg-base-200"},[
|
|
span({}, 'Reactivo'),
|
|
span({}, 'Simple'),
|
|
span({}, 'Rápido'),
|
|
span({}, 'SigPro')
|
|
])),
|
|
'#demo-textrotate'
|
|
)
|
|
```
|
|
|
|
|
|
## 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'
|
|
);
|
|
``` |