Display date and progress or statuses on a timeline. The date format you display is completely your choice. The timeline just expects a date string. The default colour for the timeline component is blue but you can choose from eight additional colour options.
The timeline component does not centre itself in its parent element. You will need to figure that bit out in your layout. In the example below the timeline has been wrapped in
<div class="w-96 mx-auto">...</div>
Completed events in the BladewindUI Timeline show a checkmark, while upcoming events are denoted with an empty circle. To set a timeline as completed set the attribute completed="true".
<x-bladewind.timeline
date="18-JUL"
label="You signed up"
completed="true" />
<x-bladewind.timeline
date="19-JUL"
label="Customer rep assigned"
completed="true" />
<x-bladewind.timeline
date="20-JUL"
label="Customer rep called"
completed="true" />
<x-bladewind.timeline label="Account is being reviewed" />
<x-bladewind.timeline label="Account activated" />
By default dates are displayed on the left and the corresponding events on the right. This behaviour can be changed to stack dates on top of events. This can be achieved by setting
the attribute stacked="true".
<x-bladewind.timeline
date="18-JUL"
label="You signed up"
completed="true"
stacked="true" />
<x-bladewind.timeline
date="19-JUL"
label="Customer rep assigned"
completed="true"
stacked="true" />
<x-bladewind.timeline
date="20-JUL"
label="Customer rep called"
completed="true"
stacked="true" />
<x-bladewind.timeline
label="Account is being reviewed"
stacked="true" />
<x-bladewind.timeline
label="Account activated"
stacked="true" />
Thanks to the BladewindUI Icon component, embedding icons in the Timeline is easy.
By default, completed events are displayed with a checkmark. It is possible to use any Heroicons icon for your completed events timeline.
Just set the attribute icon="name-of-icon".
<x-bladewind.timeline
date="18-JUL"
label="You signed up"
completed="true"
icon="envelope"
stacked="true"
icon=""/>
<x-bladewind.timeline
date="19-JUL"
label="Customer rep assigned"
completed="true"
icon="user"
stacked="true" />
<x-bladewind.timeline
date="20-JUL"
label="Customer rep called"
completed="true"
icon="phone-arrow-down-left"
stacked="true" />
<x-bladewind.timeline label="Account is being reviewed" stacked="true" />
<x-bladewind.timeline label="Account activated" stacked="true" />
You may have noticed from the the two examples above there is a trailing line after the last timeline. Some may find it cool. Others may not. For those who cannot stand that trailing line,
you can get rid of it by applying this atribute to the last timeline.
last="true". This tells the timeline component that this is the last item in the timeline list.
<x-bladewind.timeline
date="18-JUL"
label="You signed up"
completed="true" />
<x-bladewind.timeline
date="19-JUL"
label="Customer rep assigned"
completed="true" />
<x-bladewind.timeline
date="20-JUL"
label="Customer rep called"
completed="true" />
<x-bladewind.timeline
label="Account is being reviewed" />
<x-bladewind.timeline
label="Account activated"
last="true" />
Like with most of our other components, the timeline component can be displayed in nine different colours. Hopefully, one of these nine colours matches your theme. The nice thing about the timeline is, colours are actually applied to each timeline so your timelines can have a colour cocktail. Typically, you will want to use one colour for all timelines but hey, knock yourself out.
<x-bladewind::timeline
date="18-JUL"
label="You signed up"
completed="true"
color="red" />
<x-bladewind::timeline
date="19-JUL"
label="Customer rep assigned"
completed="true"
color="yellow" />
<x-bladewind::timeline
date="20-JUL"
label="Customer rep called"
completed="true"
color="green" />
<x-bladewind::timeline
label="Account is being reviewed"
color="blue" />
<x-bladewind::timeline
label="Account activated"
color="pink" />
<x-bladewind::timeline
label="Account deleted"
color="black" />
<x-bladewind::timeline
label="User re-activated"
color="purple" />
<x-bladewind::timeline
label="Email verified"
color="orange" />
<x-bladewind::timeline
color="cyan"
label="User goes live"
last="true" />
The table below shows a comprehensive list of all the attributes available for the Button component.
| Option | Default | Available Values |
|---|---|---|
| completed | true | This attribute can be omitted if the event has not been completed. true false |
| date | blank | A date to display for the timeline. Preferred format is dd-mmm (18-JUL) |
| label | blank | Text to display next to or above the date. The activity in the timeline. |
| icon | checkmark | Accepts any icon name from Heroicons. |
| stacked | false | Defines if the date is stacked on top of the label. The value must be a string and not boolean. true false |
| last | false | Specifies if the timeline is the last one in the list. This removes or keeps the trailing line. true false |
| color | blue | Set the color of the timeline. blue red
yellow greenpurple pink
orange black cyan |
<x-bladewind.timeline
date="18-JUL"
label="User signed up"
stacked="false"
last="true"
color="pink"
icon="checkmark"
completed="true" />
resources > views > components > bladewind > timeline.blade.php