Timeline

Start
Done
Middle
Now
End
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="Start" completed={true}>Done</:item>
<:item title="Middle" active={true}>Now</:item>
<:item title="End">Pending</:item>