The tab component

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 
    'My First tab' as title,
    TRUE           as active;
select 
    'This is tab two' as title;
select 
    'Third tab is crazy' as title;

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;