bladewindUI

Timeline

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>


18-JUL
You signed up
19-JUL
Customer rep assigned
20-JUL
Customer rep called
Account is being reviewed
Account activated

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" />
                
            

Stacked Timeline

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".

18-JUL
You signed up
19-JUL
Customer rep assigned
20-JUL
Customer rep called
Account is being reviewed
Account activated
                
                    <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" />
                
            

 

No Trailing Line

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.


18-JUL
You signed up
19-JUL
Customer rep assigned
20-JUL
Customer rep called
Account is being reviewed
Account activated

                
                    <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" />
                
            

 

Different Colours

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.

18-JUL
You signed up
19-JUL
Customer rep assigned
20-JUL
Customer rep called
Account is being reviewed
Account activated
Account deleted
User re-activated
Email verified
User goes live
                
                    <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" />
                
            

 

Full List Of Attributes

The table below shows a comprehensive list of all the attributes available for the Button component.

IMPORTANT: Projects running Laravel 8 please read this

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

 

Timeline with all attributes defined

                
                    <x-bladewind.timeline 
                        date="18-JUL"
                        label="User signed up"
                        stacked="false"
                        last="true"
                        color="pink"
                        status="completed" />
                
            

 

The source file for this component is available in resources > views > components > bladewind > timeline.blade.php