Timeline

A vertical step item.

Property	Type	Description
id	?string	A unique identifier.
title	?string	The main text of the item.
subtitle	?string	The subtext of the item.
description	?string	A description of the item.
icon	?string	An icon to show in the step bullet.
done	bool	If the item is completed. [default=false]
first	bool	If the item is the first of the list. [default=false]
last	bool	If the item is the last of the list. [default=false]
border-class	?string	Class for the border. [default="border-s-neutral"]
border-done-class	?string	Class for the border if completed. [default="border-s-primary"]
bullet-class	?string	Class for the bullet. [default="bg-neutral text-neutral-content"]
bullet-done-class	?string	Class for the bullet if completed. [default="bg-primary text-primary-content"]

Content

Payment

10/23/2023

Analysis

10/23/2023

Just checking

Prepare

Prepare to ship

Shipment

It is shiped :)

<div class="p-8">
    <c-timeline-item title="Register" done first />
    <c-timeline-item title="Payment" subtitle="10/23/2023" done />
    <c-timeline-item title="Analysis" subtitle="10/23/2023" description="Just checking" done />
    <c-timeline-item title="Prepare" description="Prepare to ship" />
    <c-timeline-item title="Shipment" description="It is shiped :)" last />
</div>

Icons

Order placed

Payment confirmed

Shipped

Delivered

<div class="p-8">
    <c-timeline-item title="Order placed" icon="map-pin" first done />
    <c-timeline-item title="Payment confirmed" icon="credit-card" done />
    <c-timeline-item title="Shipped" icon="send-horizontal" />
    <c-timeline-item title="Delivered" icon="gift" last />
</div>

Appearance

Order placed

Delivered

<div class="p-8">
    <c-timeline-item title="Order placed" border-done-class="border-s-success" bullet-done-class="bg-success"
        done />

    <c-timeline-item title="Delivered" border-class="border-s-error" bullet-class="bg-error" />
</div>