Wiki source code of Tabs macro
Last modified by Helge Dahl on 2018/01/22 10:41
| 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}}))) |