# Wiki source code of 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
Hide last authors

| 1.1 | 1 | {{box cssClass="floatinginfobox" title="**Contents**"}}{{toc start="2" depth="6" numbered="false" scope="page" /}}{{/box}}
|  | 2 |
|  | 3 | {{velocity}}
|  | 4 | #macro(tabs $tabsKeyNames)
|  | 5 | ## for debugging, please
|  | 6 | ## 1) copy/paste the macro code from macro object into here
|  | 7 | ## 2) replace #set ($tabsSortedMapString = $context.macro.params.tabsKeyNames) with #set ($tabsSortedMapString = $tabsKeyNames)
|  | 8 | #end
|  | 9 | {{/velocity}}
|  | 10 |
|  | 11 | {{info}}This is home and test page for the "tabs" macro.{{/info}}
|  | 12 | Creates tabbed view for specified content areas wrapped in <div/>s with unique ids
|  | 13 |
|  | 14 | == Usage ==
|  | 15 |
|  | 16 | {{box}}
|  | 17 | 1. Define where tabs should be rendered {{{{{tabs idsToLabels='tabId1=Tab One, tabId2=Tab Two, ..., tabIdN=Tab N' /}}}}}
|  | 18 | 2. Define tabs content in {{{(%id="<unique tab id>"%)(((<tab content here>)))}}}:
|  | 19 | {{{(%id="tabId1"%)(((Tab 1 Content)))}}}
|  | 20 | {{{(%id="tabId2"%)(((Tab 2 Content)))}}}
|  | 21 | ...
|  | 22 | {{{(%id="tabIdN"%)(((Tab N Content)))}}}
|  | 23 | {{/box}}
|  | 24 |
|  | 25 | == Parameters definition ==
|  | 26 |
|  | 27 | |=Name |=Optional |=Allowed values |=Default value |=Description
|  | 28 | |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'.
|  | 29 |
|  | 30 | == Known issues ==
|  | 31 | * Tab size is fixed (toucan skin), labels that do not fit will get trimmed (see [[Tab name too long>>#HTabnametoolong?skin=toucan]])
|  | 32 | * Layout consistency is dependent on white-spaces (see [[Interesting layout bugs>>#HInterestinglayoutbugs]])
|  | 33 |
|  | 34 | == Examples ==
|  | 35 |
|  | 36 | === Content generated by XWiki-wide macro ===
|  | 37 | {{tabs idsToLabels='tabId11=My xwiki-wide tabs, tabId12=My working tabs :)' /}}
|  | 38 | (%id="tabId11"%)((({{box cssClass="tabId11div"}}
|  | 39 | First tab!
|  | 40 | {{/box}}
|  | 41 | I can post any content here
|  | 42 | )))
|  | 43 |
|  | 44 | (%id="tabId12"%)((({{box cssClass="tabId12div"}}
|  | 45 | Second tab!
|  | 46 | {{/box}}
|  | 47 | And here too
|  | 48 | )))
|  | 49 |
|  | 50 |
|  | 51 | === Known bugs example ===
|  | 52 | ==== Tab name too long ====
|  | 53 | You should view this issue in [[Toucan>>#HTabnametoolong?skin=toucan]] skin.
|  | 54 | Content is generated from this code: ##~{~{tabs idsToLabels='sql2key1=Small tab, sql2key2=**Second large tab with large label**' /~}~}##
|  | 55 | {{tabs idsToLabels='sql2key1=Small tab, sql2key2=Second large tab with large label' /}}
|  | 56 | (%id="sql2key1"%)((({{code language="sql" }}
|  | 57 | SELECT COUNT(ctg_id) AS col_0_0_ FROM categories
|  | 58 | -- some text
|  | 59 | -- several lines
|  | 60 | -- of comments
|  | 61 | -- describing this sql query
|  | 62 | {{/code}})))
|  | 63 |
|  | 64 | (%id="sql2key2"%)((({{code language="sql"}}
|  | 65 | SELECT COUNT(ctg_id) AS col_0_0_ FROM categories2
|  | 66 | -- another tab with text
|  | 67 |
|  | 68 | -- Testing content overflow
|  | 69 | -- Text below this box ...
|  | 70 | -- ... should not get covered with it
|  | 71 |
|  | 72 | -- just check this!!!
|  | 73 |
|  | 74 | -- btw: no extra-paragraph has been added before the macro
|  | 75 | {{/code}})))
|  | 76 |
|  | 77 | ==== Interesting layout bugs ====
|  | 78 | ===== White spaces before ~(~%id =====
|  | 79 | {{tabs idsToLabels='sql3key1=Tab 1, sql3key2=Tab 2' /}}
|  | 80 | (%id="sql2key1"%)((({{code language="sql" }}
|  | 81 | SELECT COUNT(ctg_id) AS col_0_0_ FROM categories
|  | 82 | -- some text
|  | 83 | -- of comments
|  | 84 | -- describing this sql query
|  | 85 | {{/code}})))
|  | 86 |
|  | 87 | (%id="sql3key2"%)((({{code language="sql"}}
|  | 88 | SELECT COUNT(ctg_id) AS col_0_0_ FROM categories2
|  | 89 | -- another tab with text
|  | 90 | -- some text
|  | 91 | -- more lines in comments
|  | 92 | -- describing this sql query
|  | 93 | {{/code}})))
|  | 94 |
|  | 95 | ===== White spaces before ~{~{code =====
|  | 96 | Check this bug in both [[Colibri>>#HWhitespacesbeforecode?skin=colibri]] and [[Toucan>>#HWhitespacesbeforecode?skin=toucan]] skins.
|  | 97 | {{tabs idsToLabels='sql4key1=Tab 1, sql4key2=Tab 2' /}}
|  | 98 | (%id="sql4key1"%)(((
|  | 99 | {{code language="sql" }}
|  | 100 | SELECT COUNT(ctg_id) AS col_0_0_ FROM categories
|  | 101 | -- some text
|  | 102 | -- of comments
|  | 103 | -- describing this sql query
|  | 104 | {{/code}})))
|  | 105 |
|  | 106 | (%id="sql4key2"%)(((
|  | 107 | {{code language="sql"}}
|  | 108 | SELECT COUNT(ctg_id) AS col_0_0_ FROM categories2
|  | 109 | -- another tab with text
|  | 110 | -- some text
|  | 111 | -- more lines in comments
|  | 112 | -- describing this sql query
|  | 113 | {{/code}})))
|  | 114 |
|  | 115 | === Example for debugging ===
|  | 116 | Content generated by in-page macro (used for quick macro debugging).
|  | 117 | See instructions for debugging at the top of the page
|  | 118 | {{velocity}}#tabs('tabId31=Tab one, tabId32=Tab 2'){{/velocity}}
|  | 119 | (%id="tabId31"%)((({{box }}
|  | 120 | First tab content
|  | 121 | {{/box}})))
|  | 122 |
|  | 123 | (%id="tabId32"%)((({{box }}
|  | 124 | Second tab content
|  | 125 | {{/box}})))

# 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