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