The tab component
Build a tabbed interface, with each tab being a link to a page. Each tab can be in two states: active or inactive.
Introduced in SQLPage v0.9.5.
Top-level parameters
| name | required | type | description |
|---|---|---|---|
| center | BOOLEAN |
Whether the tabs should be centered or not. Defaults to false. |
Row-level parameters
| name | required | type | description |
|---|---|---|---|
| title | REQUIRED | TEXT |
Text to display on the tab. |
| active | BOOLEAN |
Whether the tab is active or not. Defaults to false. | |
| 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 tab. See preview.tabler.io/colors.html for a list of available colors. | |
| description | TEXT |
Description of the tab. This is displayed when the user hovers over the tab. | |
| icon | TEXT |
Name of the icon to display on the tab. 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 the page to display when the tab is clicked. By default, the link refers to the current page, with a 'tab' parameter set to the tab's title and hash set to the id (if passed) - this brings us back to the location of the tab after submission. |
Example 1
This example shows a very basic set of three tabs. The first tab is active. You could use this at the top of a page for easy navigation.
To implement contents that change based on the active tab, use the tab parameter in the page query string.
For example, if the page is /my-page.sql, then the first tab will have a link of /my-page.sql?tab=My+First+tab.
You could then for instance display contents coming from the database based on the value of the tab parameter.
For instance: SELECT 'text' AS component, contents_md FROM my_page_contents WHERE tab = $tab
Note that the example below is completely static, and does not use the tab parameter to actually switch between tabs.
View the dynamic tabs example.
select
'tab' as component;
select
'This tab does not exist' as title,
TRUE as active;
select
'I am not a true tab' as title;
select
'Do not click here' as title;Result
Example 2
This example shows a more sophisticated set of tabs. The tabs are centered, the active tab has a different color, and all the tabs have a custom link and icon.
select
'tab' as component,
TRUE as center;
select
'Hero' as title,
'?component=hero#component' as link,
'home' as icon,
'The hero component is a full-width banner with a title and an image.' as description;
select
'Tab' as title,
TRUE as active,
'?component=tab#component' as link,
'user' as icon,
'dark' as color;
select
'Card' as title,
'?component=card#component' as link,
'credit-card' as icon;