sigpro-ui/docs/demo_display.md

Display

Card

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

mount(
  Badge({ class: 'badge-primary' }, 'New'),
  '#demo-badge'
);

Indicator

mount(
  Indicator({ value: '5' },
    Button({ class: 'btn btn-sm' }, 'Notifications')
  ),
  '#demo-indicator'
);

List

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

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

mount(
  Stats({},
    Stat({
      title: 'Total Downloads',
      value: '12.5K',
      desc: '21% more than last month'
    })
  ),
  '#demo-stat'
)

Table

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

mount(
  Textrotate({ class: 'text-2xl font-bold' },
  span({class:"bg-base-200"},[
    span({}, 'Reactivo'),
    span({}, 'Simple'),
    span({}, 'Rápido'),
    span({}, 'SigPro')
  ])),
  '#demo-textrotate'
)

Timeline

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'
);