The timeline component
A list of events with a vertical line connecting them.
Introduced in SQLPage v0.13.0.
Top-level parameters
| name | required | type | description |
|---|---|---|---|
| class | TEXT |
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 | TEXT |
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 | BOOLEAN |
If set to true, the timeline will be displayed in a condensed format without icons. |
Row-level parameters
| name | required | type | description |
|---|---|---|---|
| date | REQUIRED | TEXT |
Date of the event. |
| title | REQUIRED | TEXT |
Name of the event. |
| class | TEXT |
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 | TEXT |
Color of the icon. See preview.tabler.io/colors.html for a list of available colors. | |
| description | TEXT |
Textual description of the event. | |
| description_md | TEXT |
Description of the event in Markdown. | |
| icon | TEXT |
Name of the icon to display next to the event. See tabler-icons.io for a list of available icons. | |
| id | TEXT |
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 | TEXT |
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/sqlpage/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.