Skip to Content

Wiki source code of Tabs macro

Last modified by teamwire004 on 2025/07/01 06:47
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}})))