# 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
Show last authors

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