natxocc/sigpro-ui
1
1
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

adapt new Input
All checks were successful
Deploy Docs to Synology / deploy (push) Successful in 3s
Details

Browse Source
This commit is contained in:
Natxo
2026-04-23 13:22:49 +02:00
parent 59e6d972a8
commit e842ed8041
61 changed files with 2553 additions and 2758 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
docs/components/timeline.md
View File

@@ -176,15 +176,15 @@ const ReactiveDemo = () => {
Toast('Order tracking reset', 'alert-warning', 1500);
};
return Div({ class: 'flex flex-col gap-4' }, [
return div({ class: 'flex flex-col gap-4' }, [
Timeline({ items: items }),
Div({ class: 'flex gap-2 justify-center mt-4' }, [
Button({
div({ class: 'flex gap-2 justify-center mt-4' }, [
button({
class: 'btn btn-primary btn-sm',
onclick: nextStep,
disabled: () => currentStep() >= steps.length
}, 'Next Step'),
Button({
button({
class: 'btn btn-ghost btn-sm',
onclick: reset,
disabled: () => currentStep() === 0
@@ -224,10 +224,10 @@ const OrderDemo = () => {
completed: idx < currentIndex()
}));
return Div({ class: 'flex flex-col gap-4' }, [
return div({ class: 'flex flex-col gap-4' }, [
Timeline({ items, compact: true }),
Div({ class: 'flex gap-2 justify-center flex-wrap mt-4' }, statusOrder.map(s =>
Button({
div({ class: 'flex gap-2 justify-center flex-wrap mt-4' }, statusOrder.map(s =>
button({
class: () => `btn btn-xs ${status() === s ? 'btn-primary' : 'btn-ghost'}`,
onclick: () => status(s)
}, statusMap[s].title)
@@ -279,14 +279,14 @@ const VariantsDemo = () => {
{ title: 'Event 3', detail: 'Description here', type: 'info', completed: false }
];
return Div({ class: 'flex flex-col gap-8' }, [
Div({ class: 'text-sm font-bold' }, 'Vertical Timeline'),
return div({ class: 'flex flex-col gap-8' }, [
div({ class: 'text-sm font-bold' }, 'Vertical Timeline'),
Timeline({ items: sampleItems }),
Div({ class: 'text-sm font-bold mt-4' }, 'Horizontal Timeline'),
div({ class: 'text-sm font-bold mt-4' }, 'Horizontal Timeline'),
Timeline({ items: sampleItems, vertical: false, class: 'min-w-[500px]' }),
Div({ class: 'text-sm font-bold mt-4' }, 'Compact Timeline'),
div({ class: 'text-sm font-bold mt-4' }, 'Compact Timeline'),
Timeline({ items: sampleItems, compact: true })
]);
};