v3.1.0
Display information in a chronological order using a feed-like view. The original design was for this to be a date + event component but, it turned out this component can also display any information as a feed.
The date format you display is completely your choice. The timeline just expects a string in the optional date attribute.
<x-bladewind::timeline
date="10 days ago"
content="You signed up"/>
<x-bladewind::timeline
date="8 days ago"
content="Customer rep assigned"/>
<x-bladewind::timeline
date="8 days ago"
content="Customer rep called"/>
<x-bladewind::timeline
content="Account is being reviewed"/>
<x-bladewind::timeline
content="Account activated"/>
By default each timeline anchors itself on small transparent circles. We can set the anchors to use bigger circles instead, by setting anchor="big".
For now there are only two anchor sizes. It is possible to have a mix of big and small anchors in the same timeline series.
<x-bladewind::timeline
anchor="big"
date="10 days ago"
content="You signed up"/>
...
Setting the attribute completed="true" will mark a timeline event as completed.
Completed events in the BladewindUI Timeline show filled circles and a checkmark instead of transparent dots.
The checkmark sign is only displayed when using anchor="big", otherwise it is just a filled circle.
You can also use an icon different from the checkmark for your completed timeline anchors.
<x-bladewind::timeline
completed="true"
date="10 days ago"
content="You signed up"/>
...
<x-bladewind::timeline
completed="true"
anchor="big"
date="10 days ago"
content="You signed up"/>
...
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". When timelines are stacked, all content is displayed to the right of the anchor.
<x-bladewind::timelines stacked="true">
<x-bladewind::timeline
date="just now"
content="database server restarted" />
<x-bladewind::timeline date="30 minutes ago">
<x-slot:content>
<a>2 endpoints</a> are failing on bladewindui-data EC2
bucket. You may want to login and check the logs
</x-slot:content>
</x-bladewind::timeline>
<x-bladewind::timeline date="1 hour ago">
<x-slot:content>
There have been 200 failed log in attempts from
<a>mike@bladewindui.com</a>. Possibly a DDos attack
attempt. Secure the server.
</x-slot:content>
</x-bladewind::timeline>
<x-bladewind::timeline date="Yesterday"
content="Data recovery completed with 2 errors" />
</x-bladewind::timelines>
Notice we introduced a x-bladewind::timelines component in the above example. This is completely optional but saves us from
writing stacked="true" on each tag component. The alternative is to have
<x-bladewind::timeline stacked="true" .../> for every timeline we want to stack.
<x-bladewind::timelines
completed="true"
stacked="true">
<x-bladewind::timeline
date="just now"
content="database server restarted" />
...
</x-bladewind::timelines>
<x-bladewind::timelines
completed="true"
anchor="big"
stacked="true">
<x-bladewind::timeline
date="just now"
content="database server restarted" />
...
<x-bladewind::timeline
date="Yesterday"
content="Data recovery completed with 2 errors"
completed="false" />
</x-bladewind::timelines>
Thanks to the BladewindUI Icon component, embedding icons in the Timeline is easy.
By default, completed events are displayed with a checkmark if anchor="big".
It is possible to use any Heroicons icon as your timeline's anchor.
Just set the attribute icon="name-of-icon".
You can use different icons for every timeline. If you intend to use the same icons for all anchors in your timeline, consider
wrapping your timelines in a x-bladewind::timelines component and setting
icon="name-of-icon" on that instead.
anchor="big"
<x-bladewind::timelines anchor="big" completed="true">
<x-bladewind::timeline
date="10 days ago"
content="You signed up"
icon="bell-alert" />
<x-bladewind::timeline
date="8 days ago"
content="Customer rep assigned"
icon="bolt" />
<x-bladewind::timeline
date="8 days ago"
content="Customer rep called"
icon="chat-bubble-bottom-center-text" />
<x-bladewind::timeline
content="Account is being reviewed"
icon="key"
completed="false" />
<x-bladewind::timeline
content="Account activated"
icon="map-pin"
completed="false" />
</x-bladewind::timelines>
Thanks to the BladewindUI Avatar component, using avatars as Timeline anchors is easy.
Just set the attribute avatar="url-to-image". By default avatars use the size="small" attribute of the Avatar component do display small images.
<x-bladewind::timelines>
<x-bladewind::timeline
date="10 days ago"
content="You signed up"
avatar="/assets/images/pic1.jpg" />
<x-bladewind::timeline
date="8 days ago"
content="Customer rep assigned"
avatar="/assets/images/pic2.jpg" />
...
</x-bladewind::timelines>
The Timeline component fills (full width) and centres itself in the parent container you define it in. By default, dates are displayed on the left and events on the right of the timeline anchor. When timelines are stacked however, all content is displayed to the right of the anchor.
Positioning and aligning can get confusing so lets break it down. You can only position a
x-bladewind::timelines component. By default it is centre aligned. We can position the component
to the left or to the center.
Note how the entire timeline group is moved to the left of the page.
<x-bladewind::timelines
position="left"
anchor="big">
<x-bladewind::timeline
date="10 days ago"
content="You signed up"
avatar="/assets/images/pic1.jpg" />
...
</x-bladewind::timelines>
Note how the timeline fills the entire width of the page. If you do not want this, you can place the timeline group in a parent element that has a fixed width.
<x-bladewind::timelines
position="left"
stacked="true"
color="pink">
<x-bladewind::timeline
date="30 minutes ago">
<x-slot:content>
<a>2 endpoints</a> are failing on
bladewindui-data EC2 bucket.
You may want to login and check the logs
</x-slot:content>
<x-bladewind::timeline/>
...
</x-bladewind::timelines>
Alignments only work for stacked timelines and only for the x-bladewind::timeline component.
By default, stacked timeline content is aligned to the right of the anchor.
If you wish to flip a stacked timeline to the left, set the align_left="true" attribute on that specific timeline.
<x-bladewind::timelines
position="right"
anchor="big">
<x-bladewind::timeline
date="just now"
content="database server restarted"
align_left="true" />
<x-bladewind::timeline d
ate="30 minutes ago">
<x-slot:content>
<a>2 endpoints</a> are failing on
bladewindui-data EC2 bucket. You may want to login
and check the logs
</x-slot:content>
</x-bladewind::timeline>
<x-bladewind::timeline
date="1 hour ago"
align_left="true">
<x-slot:content>
There have been 200 failed log in attempts from
<a>mike@bladewindui.com</a>.
Possibly a DDos attack attempt.
Secure the server.
</x-slot:content>
</x-bladewind::timeline>
<x-bladewind::timeline
date="Yesterday"
content="Data recovery completed with 2 errors" />
</x-bladewind::timelines>
You may have noticed from the the 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="10 days ago"
content="You signed up" />
...
<x-bladewind::timeline
content="Account activated"
last="true" />
Like with most of our other components, the timeline component can be displayed in all the different colours we support. The nice thing about the timeline is, colours are actually applied to each timeline so your timelines can have a colour cocktail., though you will typically want to use one colour for a timeline group.
<x-bladewind::timeline
date="10 days ago"
content="You signed up"
color="pink"
completed="true" />
<x-bladewind::timeline
date="8 days ago"
content="Customer rep assigned"
color="orange" />
<x-bladewind::timeline
date="8 days ago"
content="Customer rep called"
color="green" />
<x-bladewind::timeline
content="Account is being reviewed"
color="purple" />
<x-bladewind::timeline
content="Account activated"
color="gray" />
The table below shows a comprehensive list of all the attributes available for the Button component.
| Option | Default | Available Values |
|---|---|---|
| completed | false | Specify if all timelines in the group are completed or not. true false |
| stacked | false | Defines if the date is stacked on top of the content. true false |
| anchor | small | Should the anchor be big or small. small big |
| anchor_css | blank | Any additional TailwindCSS classes to apply to the anchor |
| icon | blank | Accepts any icon name from Heroicons. This icon will be used for all timelines in the group. |
| icon_css | blank | Any additional TailwindCSS classes to apply to the icon. |
| date_css | blank | Any additional TailwindCSS classes to apply to the date |
| position | center | Specifies how the timeline group should be positioned in its parent element. left center |
| color | blue | Set the color of the timeline. blue red
yellow greenpurple pink
orange black cyan
violet indigo fuchsia |
| Option | Default | Available Values |
|---|---|---|
| date | blank | String. Date to be displayed to either the left of the anchor or on top of the content when stacked. |
| date_css | blank | Any additional TailwindCSS classes to apply to the date |
| avatar | blank | Path to an image to display in the anchor. |
| avatar_css | blank | Any additional TailwindCSS classes to apply to the avatar. |
| content | blank | Also label. The correspondning content to display for the date |
| last | false | Defines if the timeline is the last in the group.truefalse |
| align_left | false | Defines if the timeline should be left aligned. Works only if stacked="true".truefalse |
| completed | false | Specify if all timelines in the group are completed or not. true false |
| stacked | false | Defines if the date is stacked on top of the content. true false |
| anchor | small | Should the anchor be big or small. small big |
| anchor_css | blank | Any additional TailwindCSS classes to apply to the anchor |
| icon | blank | Accepts any icon name from Heroicons. This icon will be used for all timelines in the group. |
| icon_css | blank | Any additional TailwindCSS classes to apply to the icon. |
| color | blue | Set the color of the timeline. blue red
yellow greenpurple pink
orange black cyan
violet indigo fuchsia |
<x-bladewind::timelines
stacked="true"
anchor="big"
anchor_css="pl-9"
color="pink"
icon="briefcase"
icon_css="pl-9"
date_css="tracking-wider"
position="left"
completed="true" />
<x-bladewind::timeline
stacked="true"
anchor="big"
anchor_css="pl-9"
color="pink"
icon="briefcase"
icon_css="pl-9"
date="9 days ago"
date_css="tracking-wider"
align_left="true"
avatar="/assets/images/me.jpg"
avatar_css="rounded-0"
content="I am a timeline"
completed="true" />
resources > views > components > bladewind > timelines.blade.php,
resources > views > components > bladewind > timeline.blade.php