# Tabs macro

Last modified by Helge Dahl on 2018/01/22 10:41

#### Export

#### Office Formats

Export as PDF Export as ODT Export as RTF

#### Other Formats

Export as HTML
Contents

- Usage
- Parameters definition
- Known issues
- Examples
  - Content generated by XWiki-wide macro
  - Known bugs example
    - Tab name too long
    - Interesting layout bugs
      - White spaces before (%id
      - White spaces before {{code
  - Example for debugging

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

- 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

- My xwiki-wide tabs
- My working tabs :)

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' /}}

- Small tab
- 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

- Tab 1
- Tab 2

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.

- Tab 1
- Tab 2

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

Tags:
Created by Helge Dahl on 2010/04/07 16:14

- Comments (0)
- Attachments (0)
- Information

# Applications

# Tips

You can click on the arrows next to the breadcrumb elements to quickly navigate to sibling and children pages.

# Need help?

If you need help with XWiki you can contact:

- Community Support
- Professional Support