294 lines
10 KiB
Markdown
294 lines
10 KiB
Markdown
# Timeline
|
||
|
||
Timeline component for displaying chronological events, steps, or progress with customizable icons and content.
|
||
|
||
## Tag
|
||
|
||
`Timeline`
|
||
|
||
## Props
|
||
|
||
| Prop | Type | Default | Description |
|
||
| :--- | :--- | :--- | :--- |
|
||
| `items` | `Array<TimelineItem> \| Signal` | `[]` | Timeline items to display |
|
||
| `vertical` | `boolean \| Signal<boolean>` | `true` | Vertical or horizontal orientation |
|
||
| `compact` | `boolean \| Signal<boolean>` | `false` | Compact mode with less padding |
|
||
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
|
||
|
||
### TimelineItem Structure
|
||
|
||
| Property | Type | Description |
|
||
| :--- | :--- | :--- |
|
||
| `title` | `string \| VNode \| Signal` | Event title or main text |
|
||
| `detail` | `string \| VNode \| Signal` | Additional details or description |
|
||
| `icon` | `string \| VNode` | Custom icon (overrides type) |
|
||
| `type` | `string` | Type: `'success'`, `'warning'`, `'error'`, `'info'` |
|
||
| `completed` | `boolean` | Whether event is completed (affects connector) |
|
||
|
||
## Styling
|
||
|
||
Timeline supports all **daisyUI Timeline classes**:
|
||
|
||
| Category | Keywords | Description |
|
||
| :--- | :--- | :--- |
|
||
| Base | `timeline`, `timeline-vertical`, `timeline-horizontal` | Timeline orientation |
|
||
| Size | `timeline-compact` | Compact spacing variant |
|
||
| Color | `bg-primary`, `bg-success`, `bg-warning`, `bg-error`, `bg-info` | Icon background colors |
|
||
|
||
> For further details, check the [daisyUI Timeline Documentation](https://daisyui.com/components/timeline) – Full reference for CSS classes.
|
||
|
||
## Live Examples
|
||
|
||
### Basic Timeline
|
||
|
||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||
<div class="card-body">
|
||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||
<div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||
</div>
|
||
</div>
|
||
|
||
```javascript
|
||
const BasicDemo = () => {
|
||
const events = [
|
||
{ title: 'Project Started', detail: 'Initial planning and setup', type: 'info', completed: true },
|
||
{ title: 'Design Phase', detail: 'UI/UX design completed', type: 'success', completed: true },
|
||
{ title: 'Development', detail: 'Core features implemented', type: 'warning', completed: false },
|
||
{ title: 'Testing', detail: 'Quality assurance', type: 'info', completed: false },
|
||
{ title: 'Launch', detail: 'Production deployment', type: 'success', completed: false }
|
||
];
|
||
|
||
return Timeline({ items: events });
|
||
};
|
||
$mount(BasicDemo, '#demo-basic');
|
||
```
|
||
|
||
### Horizontal Timeline
|
||
|
||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||
<div class="card-body">
|
||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||
<div id="demo-horizontal" class="bg-base-100 p-6 rounded-xl border border-base-300 overflow-x-auto"></div>
|
||
</div>
|
||
</div>
|
||
|
||
```javascript
|
||
const HorizontalDemo = () => {
|
||
const steps = [
|
||
{ title: 'Step 1', detail: 'Requirements', type: 'success', completed: true },
|
||
{ title: 'Step 2', detail: 'Design', type: 'success', completed: true },
|
||
{ title: 'Step 3', detail: 'Development', type: 'warning', completed: false },
|
||
{ title: 'Step 4', detail: 'Testing', type: 'info', completed: false },
|
||
{ title: 'Step 5', detail: 'Deploy', type: 'info', completed: false }
|
||
];
|
||
|
||
return Timeline({
|
||
items: steps,
|
||
vertical: false,
|
||
class: 'min-w-[600px]'
|
||
});
|
||
};
|
||
$mount(HorizontalDemo, '#demo-horizontal');
|
||
```
|
||
|
||
### Compact Timeline
|
||
|
||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||
<div class="card-body">
|
||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||
<div id="demo-compact" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||
</div>
|
||
</div>
|
||
|
||
```javascript
|
||
const CompactDemo = () => {
|
||
const activities = [
|
||
{ title: 'User login', detail: '10:30 AM', type: 'success', completed: true },
|
||
{ title: 'Viewed dashboard', detail: '10:32 AM', type: 'info', completed: true },
|
||
{ title: 'Updated profile', detail: '10:45 AM', type: 'success', completed: true },
|
||
{ title: 'Made purchase', detail: '11:00 AM', type: 'warning', completed: false }
|
||
];
|
||
|
||
return Timeline({
|
||
items: activities,
|
||
compact: true
|
||
});
|
||
};
|
||
$mount(CompactDemo, '#demo-compact');
|
||
```
|
||
|
||
### Custom Icons
|
||
|
||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||
<div class="card-body">
|
||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||
<div id="demo-icons" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||
</div>
|
||
</div>
|
||
|
||
```javascript
|
||
const IconsDemo = () => {
|
||
const milestones = [
|
||
{ title: 'Kickoff', detail: 'Project kickoff meeting', icon: '🚀', completed: true },
|
||
{ title: 'MVP', detail: 'Minimum viable product', icon: '💡', completed: true },
|
||
{ title: 'Beta', detail: 'Beta release', icon: '⚙️', completed: false },
|
||
{ title: 'Launch', detail: 'Public launch', icon: '🎉', completed: false }
|
||
];
|
||
|
||
return Timeline({ items: milestones });
|
||
};
|
||
$mount(IconsDemo, '#demo-icons');
|
||
```
|
||
|
||
### Reactive Timeline
|
||
|
||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||
<div class="card-body">
|
||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||
<div id="demo-reactive" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||
</div>
|
||
</div>
|
||
|
||
```javascript
|
||
const ReactiveDemo = () => {
|
||
const currentStep = $(0);
|
||
const steps = [
|
||
{ title: 'Order Placed', detail: 'Your order has been confirmed', type: 'success' },
|
||
{ title: 'Processing', detail: 'Payment verified, preparing shipment', type: 'success' },
|
||
{ title: 'Shipped', detail: 'Package on the way', type: 'warning' },
|
||
{ title: 'Delivered', detail: 'Arriving soon', type: 'info' }
|
||
];
|
||
|
||
const items = () => steps.map((step, idx) => ({
|
||
...step,
|
||
completed: idx < currentStep()
|
||
}));
|
||
|
||
const nextStep = () => {
|
||
if (currentStep() < steps.length) {
|
||
currentStep(currentStep() + 1);
|
||
Toast(`Step ${currentStep()}: ${steps[currentStep() - 1].title}`, 'alert-info', 1500);
|
||
}
|
||
};
|
||
|
||
const reset = () => {
|
||
currentStep(0);
|
||
Toast('Order tracking reset', 'alert-warning', 1500);
|
||
};
|
||
|
||
return Div({ class: 'flex flex-col gap-4' }, [
|
||
Timeline({ items: items }),
|
||
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({
|
||
class: 'btn btn-ghost btn-sm',
|
||
onclick: reset,
|
||
disabled: () => currentStep() === 0
|
||
}, 'Reset')
|
||
])
|
||
]);
|
||
};
|
||
$mount(ReactiveDemo, '#demo-reactive');
|
||
```
|
||
|
||
### Order Status Tracker
|
||
|
||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||
<div class="card-body">
|
||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||
<div id="demo-order" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||
</div>
|
||
</div>
|
||
|
||
```javascript
|
||
const OrderDemo = () => {
|
||
const status = $('pending'); // ← empezar en 'pending'
|
||
|
||
const statusMap = {
|
||
pending: { title: 'Order Pending', detail: 'Awaiting confirmation', type: 'warning' },
|
||
confirmed: { title: 'Order Confirmed', detail: 'Payment received', type: 'info' },
|
||
processing: { title: 'Processing', detail: 'Preparing your order', type: 'info' },
|
||
shipped: { title: 'Shipped', detail: 'Package in transit', type: 'info' },
|
||
delivered: { title: 'Delivered', detail: 'Order completed', type: 'success' }
|
||
};
|
||
|
||
const statusOrder = ['pending', 'confirmed', 'processing', 'shipped', 'delivered'];
|
||
const currentIndex = () => statusOrder.indexOf(status());
|
||
|
||
const items = () => statusOrder.map((key, idx) => ({
|
||
...statusMap[key],
|
||
completed: idx < currentIndex()
|
||
}));
|
||
|
||
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({
|
||
class: () => `btn btn-xs ${status() === s ? 'btn-primary' : 'btn-ghost'}`,
|
||
onclick: () => status(s)
|
||
}, statusMap[s].title)
|
||
))
|
||
]);
|
||
};
|
||
$mount(OrderDemo, '#demo-order');
|
||
```
|
||
|
||
### Company History
|
||
|
||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||
<div class="card-body">
|
||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||
<div id="demo-history" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||
</div>
|
||
</div>
|
||
|
||
```javascript
|
||
const HistoryDemo = () => {
|
||
const milestones = [
|
||
{ title: '2015 - Founded', detail: 'Company started with 3 employees', type: 'success', completed: true },
|
||
{ title: '2017 - First Product', detail: 'Launched first software product', type: 'success', completed: true },
|
||
{ title: '2019 - Series A', detail: 'Raised $5M, expanded to 50 employees', type: 'success', completed: true },
|
||
{ title: '2022 - Global Expansion', detail: 'Opened offices in Europe and Asia', type: 'info', completed: true },
|
||
{ title: '2024 - AI Integration', detail: 'Launched AI-powered features', type: 'warning', completed: false },
|
||
{ title: '2026 - Future Goals', detail: 'Aiming for market leadership', type: 'info', completed: false }
|
||
];
|
||
|
||
return Timeline({ items: milestones });
|
||
};
|
||
$mount(HistoryDemo, '#demo-history');
|
||
```
|
||
|
||
### All Variants
|
||
|
||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||
<div class="card-body">
|
||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||
<div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-8"></div>
|
||
</div>
|
||
</div>
|
||
|
||
```javascript
|
||
const VariantsDemo = () => {
|
||
const sampleItems = [
|
||
{ title: 'Event 1', detail: 'Description here', type: 'success', completed: true },
|
||
{ title: 'Event 2', detail: 'Description here', type: 'warning', completed: false },
|
||
{ 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'),
|
||
Timeline({ items: sampleItems }),
|
||
|
||
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'),
|
||
Timeline({ items: sampleItems, compact: true })
|
||
]);
|
||
};
|
||
$mount(VariantsDemo, '#demo-variants');
|
||
``` |