bladewindUI
Display date and progress or statuses on a timeline. The default colour for the timeline component is cyan 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>
Most timelines have two types of circles. One that is filled to denote the event has occurred or been completed. The other circle is empty to denote an upcoming event.
For a timeline to be filled set the attribute status="completed"
<x-bladewind.timeline
date="18-JUL"
label="You signed up"
status="completed" />
<x-bladewind.timeline
date="19-JUL"
label="Customer rep assigned"
status="completed" />
<x-bladewind.timeline
date="20-JUL"
label="Customer rep called"
status="completed" />
<x-bladewind.timeline
date=""
label="Account is being reviewed" />
<x-bladewind.timeline
date=""
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"
status="completed"
stacked="true" />
<x-bladewind.timeline
date="19-JUL"
label="Customer rep assigned"
status="completed"
stacked="true" />
<x-bladewind.timeline
date="20-JUL"
label="Customer rep called"
status="completed"
stacked="true" />
<x-bladewind.timeline
date=""
label="Account is being reviewed"
stacked="true" />
<x-bladewind.timeline
date=""
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"
status="completed" />
<x-bladewind.timeline
date="19-JUL"
label="Customer rep assigned"
status="completed" />
<x-bladewind.timeline
date="20-JUL"
label="Customer rep called"
status="completed" />
<x-bladewind.timeline
date=""
label="Account is being reviewed" />
<x-bladewind.timeline
date=""
label="Account activated"
last="true" />
Like with most of our other components, the timeline component can be displayed in nine different colours. One of these nine colours should definitely match your theme. The nice thing about the timeline is, colours are actually applied to each timeline so you can have a rainbow timeline. 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"
status="completed"
color="red" />
<x-bladewind::timeline
date="19-JUL"
label="Customer rep assigned"
status="completed"
color="yellow" />
<x-bladewind::timeline
date="20-JUL"
label="Customer rep called"
status="completed"
color="green" />
<x-bladewind::timeline
date=""
label="Account is being reviewed"
color="blue" />
<x-bladewind::timeline
date=""
label="Account activated"
color="pink" />
<x-bladewind::timeline
date=""
label="Account deleted"
color="black" />
<x-bladewind::timeline
date=""
label="User re-activated"
color="purple" />
<x-bladewind::timeline
date=""
label="Email verified"
color="orange" />
<x-bladewind::timeline
date=""
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 |
|---|---|---|
| status | pending | pending completed |
| 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. |
| 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"
status="completed" />
resources > views > components > bladewind > timeline.blade.php