The list component
A vertical list of items. Each item can be clickable and link to another page.
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. | |
| compact | BOOLEAN |
Whether to display the list in a more compact format, allowing more items to be displayed on the screen. | |
| empty_description | TEXT |
Description to display if the list is empty. | |
| empty_description_md | TEXT |
Description to display if the list is empty, in Markdown format. | |
| empty_link | URL |
URL to which the user should be taken if they click on the empty list. | |
| empty_title | TEXT |
Title text to display if the list is empty. | |
| 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). | |
| title | TEXT |
Text header at the top of the list. | |
| wrap | BOOLEAN |
Wrap list items onto multiple lines if they are too long |
Row-level parameters
| name | required | type | description |
|---|---|---|---|
| title | REQUIRED | TEXT |
Name of the list item, displayed prominently. |
| active | BOOLEAN |
Whether this item in the list is considered "active". Active items are displayed more prominently. | |
| 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 | The name of a color, to be displayed as a dot near the list item contents. | ||
| delete_link | URL |
A URL to which the user should be taken when they click on the "delete" icon. Does not show the icon when omitted. | |
| description | TEXT |
A description of the list item, displayed as greyed-out text. | |
| description_md | TEXT |
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 | URL |
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 | 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). | |
| image_url | URL |
The URL of a small image to display on the left side of the item. | |
| link | URL |
An URL to which the user should be taken when they click on the list item. | |
| view_link | URL |
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/sqlpage/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/sqlpage/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,
'Top SQLPage features' as title;
select
'Authentication' as title,
'?component=authentication' as link,
'Authenticate users with a login form or HTTP basic authentication' as description,
'red' as color,
'lock' as icon,
TRUE as active;
select
'Editing data' as title,
'SQLPage makes it easy to UPDATE, INSERT and DELETE data in your database tables' as description,
'blue' as color,
'database' as icon,
'?component=form' as edit_link,
'?component=alert' as delete_link;