Timeline

A vertical timeline of events.

09:00
Order placed
We received your order.
10:30
Shipped
Your package is on its way.
14:00
Delivered
Left at the front door.

import { BuiTimeline, BuiTimelineItem } from 'ng-blatui';

<ol buiTimeline>
  <li buiTimelineItem time="09:00" title="Created" [active]="true">Order placed</li>
  <li buiTimelineItem time="10:30" title="Shipped">On its way</li>
</ol>

API reference

Inputs

Prop	Type	Default	Description
`time`	`string`	`''`	Timestamp label shown above the entry's title.
`title`	`string`	`''`	Heading text for the entry.
`active`	`boolean`	`false`	Whether to highlight this entry as the current/active step.

Every ng-blatui component also accepts a class input to merge extra Tailwind classes onto the host.

Order placed

Shipped

Delivered

API reference

Inputs