Tabs macro

Last modified by Eugen Colesnicov on 2023/04/25 09:19

This is home and test page for the "tabs" macro.
Creates tabbed view for specified content areas wrapped in <div/>s with unique ids

Usage

  1. Define where tabs should be rendered {{tabs idsToLabels='tabId1=Tab One, tabId2=Tab Two, ..., tabIdN=Tab N' /}}
    2. Define tabs content in (%id="<unique tab id>"%)(((<tab content here>))):
       (%id="tabId1"%)(((Tab 1 Content)))
       (%id="tabId2"%)(((Tab 2 Content)))
        ...
       (%id="tabIdN"%)(((Tab N Content)))

Parameters definition

Name Optional Allowed values Default value Description
idsToLabels no String  - This parameter required a comma-separated tab id to tab label values sting formatted like idsToLabels='tabId1=Tab One, tabId2=Tab Two, tabId3=TabThree'.

Known issues

Examples

Content generated by XWiki-wide macro

First tab!
I can post any content here

Second tab!
And here too

Known bugs example

Tab name too long

You should view this issue in Toucan skin.
Content is generated from this code: {{tabs idsToLabels='sql2key1=Small tab, sql2key2=Second large tab with large label' /}}

SELECT COUNT(ctg_id) AS col_0_0_ FROM categories
-- some text
-- several lines
-- of comments
-- describing this sql query
SELECT COUNT(ctg_id) AS col_0_0_ FROM categories2
-- another tab with text

-- Testing content overflow
-- Text below this box ...
--  ... should not get covered with it

-- just check this!!!

-- btw: no extra-paragraph has been added before the macro

Interesting layout bugs

White spaces before (%id


    

SELECT COUNT(ctg_id) AS col_0_0_ FROM categories
-- some text
-- of comments
-- describing this sql query
SELECT COUNT(ctg_id) AS col_0_0_ FROM categories2
-- another tab with text
-- some text
-- more lines in comments
-- describing this sql query
White spaces before {{code

Check this bug in both Colibri and Toucan skins.

        SELECT COUNT(ctg_id) AS col_0_0_ FROM categories
-- some text
-- of comments
-- describing this sql query

        SELECT COUNT(ctg_id) AS col_0_0_ FROM categories2
-- another tab with text
-- some text
-- more lines in comments
-- describing this sql query

Example for debugging

Content generated by in-page macro (used for quick macro debugging).
See instructions for debugging at the top of the page

First tab content

Second tab content