The timeline component
A list of events with a vertical line connecting them.
Introduced in SQLPage v0.13.0.
Top-level parameters
class
class attribute added to the container in HTML. It can be used to apply custom styling to this item through css. Added in v0.18.0.
id
id attribute added to the container in HTML. It can be used to target this item through css or for scrolling to this item through links (use "#id" in link url).
simple
If set to true, the timeline will be displayed in a condensed format without icons.
Row-level parameters
date
REQUIRED. Date of the event.
title
REQUIRED. Name of the event.
class
class attribute added to the container in HTML. It can be used to apply custom styling to this item through css. Added in v0.18.0.
color
Color of the icon. See preview.tabler.io/colors.html for a list of available colors.
description
Textual description of the event.
description_md
Description of the event in Markdown.
icon
Name of the icon to display next to the event. See tabler-icons.io for a list of available icons.
id
id attribute added to the container in HTML. It can be used to target this item through css or for scrolling to this item through links (use "#id" in link url).
link
Link to a page with more information about the event.
Example 1
A basic timeline with just names and dates.
select
'timeline' as component,
TRUE as simple;
select
'New message from Elon Musk' as title,
'13:00' as date;
select
'Jeff Bezos assigned task "work more" to you.' as title,
'yesterday, 16:35' as date;Result
-
13:00
New message from Elon Musk
-
yesterday, 16:35
Jeff Bezos assigned task "work more" to you.
Example 2
A full-fledged timeline with icons, colors, and rich text descriptions.
select
'timeline' as component;
select
'v0.13.0 was just released !' as title,
'https://github.com/lovasoa/SQLpage/releases/' as link,
'2023-10-16' as date,
'brand-github' as icon,
'green' as color,
'This version introduces the `timeline` component.' as description_md;
select
'They are talking about us...' as title,
'[This article](https://www.postgresql.org/about/news/announcing-sqlpage-build-dynamic-web-applications-in-sql-2672/) on the official PostgreSQL website mentions SQLPage.' as description_md,
'2023-07-12' as date,
'database' as icon,
'blue' as color;Result
-
2023-10-16
v0.13.0 was just released !
This version introduces the
timelinecomponent. -
2023-07-12
They are talking about us...
This article on the official PostgreSQL website mentions SQLPage.