- 1.5.0

Timeline

Order placed
2024-01-01
Order confirmed
Processing
2024-01-02
In progress
Shipped
2024-01-03
Pending
Delivered
Pending
Attribute Type Documentation Default Value
id :any

HTML id attribute
class :any

additional CSS classes
size :string

timeline size variant
layout :string

timeline layout variant
rest :global
Required item * :slot

Timeline item
Show slot attributes Hide slot attributes
title :string

Item title text
time :string

Item time/date text
icon :string

MDI icon name for the marker
color :string

Item color: primary, secondary, tertiary, accent (tertiary), success, warning, error, neutral, base
completed :boolean

Mark item as completed
active :boolean

Mark item as the current/active item
loading :boolean

Show loading animation on marker
class :any

Additional CSS classes for the item

 
<:item title="Order placed" time="2024-01-01" completed={true}>Order confirmed</:item>
<:item title="Processing" time="2024-01-02" active={true}>In progress</:item>
<:item title="Shipped" time="2024-01-03">Pending</:item>
<:item title="Delivered">Pending</:item>