Tabs Macro

Last modified by Eden Biskin on 2022/03/21 18:27

tabCreates tabbed view for specified content areas wrapped in DIVs with unique ids
TypeXAR
Category
Developed by

Roman Muntyanu, Vistoria Volkova

Active Installs43
Rating
0 Votes
LicenseGNU Lesser General Public License 2.1

Installable with the Extension Manager

Description

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

To see issues in-action, please reference to "Known bugs example" section of the installed macro home-page Macro.TabsMacro

  • Tab size is fixed (Toucan Skin), labels that do not fit will get trimmed ("Tab name too long" section of the installed macro home-page)
  • Layout consistency is dependent on white-spaces ("Interesting layout bugs" section of the installed macro home-page)

Examples

Example 1

Code

{{tabs idsToLabels='tabId11=My xwiki-wide tabs, tabId12=My working tabs :)' /}}
(%id="tabId11"%)((({{box cssClass="tabId11div"}}
First tab!
{{/box}}
I can post any content here
)))

(%id="tabId12"%)((({{box cssClass="tabId12div"}}
Second tab!
{{/box}}
And here too
)))

Result
Tab "My xwiki-wide tabs"
tab1.png

Tab "My working tabs emoticon_smile"
tab2.png

Example 2

Code

{{tabs idsToLabels='sql2key1=Small tab, sql2key2=Second large tab with large label' /}}
(%id="sql2key1"%)(((
{{code language="sql"}}
SELECT COUNT(ctg_id) AS col_0_0_ FROM categories
-- some text
-- several lines
-- of comments
-- describing this sql query
{{/code}}
)))

(%id="sql2key2"%)(((
{{code language="sql"}}
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
{{/code}}
)))

Result in Toucan Skin
Tab "Small tab"
sql2key1.gif
Tab "Second large tab with large label"
sql2key2.gif

Result in Colibri Skin
Tab "Small tab"
tab3.png
Tab "Second large tab with large label" (in colibri skin)
tab4.png

Prerequisites & Installation Instructions

We recommend using the Extension Manager to install this extension (Make sure that the text "Installable with the Extension Manager" is displayed at the top right location on this page to know if this extension can be installed with the Extension Manager). Note that installing Extensions when being offline is currently not supported and you'd need to use some complex manual method.

You can also use the following manual method, which is useful if this extension cannot be installed with the Extension Manager or if you're using an old version of XWiki that doesn't have the Extension Manager:

  1. Log in the wiki with a user having Administration rights
  2. Go to the Administration page and select the Import category
  3. Follow the on-screen instructions to upload the downloaded XAR
  4. Click on the uploaded XAR and follow the instructions
  5. You'll also need to install all dependent Extensions that are not already installed in your wiki

Release Notes

v1.0.2

Fixed excessive empty lines added before tabs.

    

Get Connected