Tabs macro

Modifié par Paul Libbrecht (admin) le 2021/12/12 21:39

Contents

Usage
Parameters definition
Known issues
Examples

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

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

Tab size is fixed (toucan skin), labels that do not fit will get trimmed (see Tab name too long)
Layout consistency is dependent on white-spaces (see Interesting layout bugs)

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