The list component
A vertical list of items. Each item can be clickable and link to another page.
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.
compact
Whether to display the list in a more compact format, allowing more items to be displayed on the screen.
empty_description
Description to display if the list is empty.
empty_description_md
Description to display if the list is empty, in Markdown format.
empty_link
URL to which the user should be taken if they click on the empty list.
empty_title
Title text to display if the list is empty.
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).
title
Text header at the top of the list.
wrap
Wrap list items onto multiple lines if they are too long
Row-level parameters
title
REQUIRED. Name of the list item, displayed prominently.
active
Whether this item in the list is considered "active". Active items are displayed more prominently.
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
The name of a color, to be displayed as a dot near the list item contents.
delete_link
A URL to which the user should be taken when they click on the "delete" icon. Does not show the icon when omitted.
description
A description of the list item, displayed as greyed-out text.
description_md
A description of the list item, displayed as greyed-out text, in Markdown format, allowing you to use rich text formatting, including **bold** and *italic* text.
edit_link
A URL to which the user should be taken when they click on the "edit" icon. Does not show the icon when omitted.
icon
Name of an icon to display on the left side of the item.
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).
image_url
The URL of a small image to display on the left side of the item.
link
An URL to which the user should be taken when they click on the list item.
view_link
A URL to which the user should be taken when they click on the "view" icon. Does not show the icon when omitted.
Example 1
A basic compact list
select
'list' as component,
TRUE as compact,
'SQLPage lists are...' as title;
select
'Beautiful' as title;
select
'Useful' as title;
select
'Versatile' as title;Result
SQLPage lists are...
Beautiful
Useful
Versatile
Example 2
An empty list with a link to add an item
select
'list' as component,
'No items yet' as empty_title,
'This list is empty. Click here to create a new item !' as empty_description,
'documentation.sql' as empty_link;Result
Example 3
A list with rich text descriptions
select
'list' as component,
TRUE as wrap;
select
'SQLPage' as title,
'https://raw.githubusercontent.com/lovasoa/SQLpage/main/docs/favicon.png' as image_url,
'A **SQL**-based **page** generator for **PostgreSQL**, **MySQL**, **SQLite** and **SQL Server**. [Free on Github](https://github.com/lovasoa/sqlpage)' as description_md;
select
'Tabler' as title,
'https://avatars.githubusercontent.com/u/35471246' as image_url,
'A **free** and **open-source** **HTML** template pack based on **Bootstrap**.' as description_md;
select
'Tabler Icons' as title,
'https://tabler.io/favicon.ico' as image_url,
'A set of over **700** free MIT-licensed high-quality **SVG** icons for you to use in your web projects.' as description_md;Result
SQLPage
A SQL-based page generator for PostgreSQL, MySQL, SQLite and SQL Server. Free on Github
Tabler
A free and open-source HTML template pack based on Bootstrap.
Tabler Icons
A set of over 700 free MIT-licensed high-quality SVG icons for you to use in your web projects.
Example 4
A beautiful list with bells and whistles.
select
'list' as component,
'Popular websites' as title;
select
'Google' as title,
'https://google.com' as link,
'A search engine' as description,
'red' as color,
'brand-google' as icon,
TRUE as active;
select
'Wikipedia' as title,
'https://wikipedia.org' as link,
'An encyclopedia' as description,
'blue' as color,
'world' as icon,
'?edit=wikipedia' as edit_link,
'?delete=wikipedia' as delete_link;