1====== Navs (Tabs & Pills) ====== 2 3===== Tabs with DropDown menu ===== 4 5<code html><nav type="tabs"> 6 * [[:start]] 7 * [[:wiki:plugin:bootswrapper:nav|Nav Plugin]] 8 * [[playground:playground]] 9 * DokuWiki 10 * [[:wiki:welcome]] 11 * [[:wiki:syntax]] 12</nav></code> 13 14\\ 15 16<nav type="tabs"> 17 * [[:start]] 18 * [[:wiki:plugin:bootswrapper:nav|Nav Plugin]] 19 * [[playground:playground]] 20 * DokuWiki 21 * [[:wiki:welcome]] 22 * [[:wiki:syntax]] 23</nav> 24 25\\ 26 27<callout type="tip" icon="true"> 28Instead of ''<nowiki><nav type="tabs"></nowiki>'' you can use ''<nowiki><tabs></nowiki>'' alias. 29</callout> 30 31\\ 32 33===== Pills with DropDown menu ===== 34 35<code html><nav type="pills"> 36 * [[:start]] 37 * [[:wiki:plugin:bootswrapper:nav|Nav Plugin]] 38 * [[playground:playground]] 39 * DokuWiki 40 * [[:wiki:welcome]] 41 * [[:wiki:syntax]] 42</nav></code> 43 44\\ 45 46<nav type="pills"> 47 * [[:start]] 48 * [[:wiki:plugin:bootswrapper:nav|Nav Plugin]] 49 * [[playground:playground]] 50 * DokuWiki 51 * [[:wiki:welcome]] 52 * [[:wiki:syntax]] 53</nav> 54 55\\ 56 57<callout type="tip" icon="true"> 58Instead of ''<nowiki><nav type="pills"></nowiki>'' you can use ''<nowiki><pills></nowiki>'' alias. 59</callout> 60 61\\ 62 63===== Pills stacked ===== 64 65<code html><nav type="pills" stacked="true"> 66 * [[:start]] 67 * [[:wiki:plugin:bootswrapper:nav|Nav Plugin]] 68 * [[playground:playground]] 69 * DokuWiki 70 * [[:wiki:welcome]] 71 * [[:wiki:syntax]] 72</nav></code> 73 74\\ 75 76<nav type="pills" stacked="true"> 77 * [[:start]] 78 * [[:wiki:plugin:bootswrapper:nav|Nav Plugin]] 79 * [[playground:playground]] 80 * DokuWiki 81 * [[:wiki:welcome]] 82 * [[:wiki:syntax]] 83</nav> 84 85\\ 86 87===== Pills justified ===== 88 89<code html><nav type="pills" justified="true"> 90 * [[:start]] 91 * [[:wiki:plugin:bootswrapper:nav|Nav Plugin]] 92 * [[playground:playground]] 93 * DokuWiki 94 * [[:wiki:welcome]] 95 * [[:wiki:syntax]] 96</nav></code> 97 98\\ 99 100<nav type="pills" justified="true"> 101 * [[:start]] 102 * [[:wiki:plugin:bootswrapper:nav|Nav Plugin]] 103 * [[playground:playground]] 104 * DokuWiki 105 * [[:wiki:welcome]] 106 * [[:wiki:syntax]] 107</nav> 108 109\\ 110 111===== Tabs justified ===== 112 113<code html5><nav type="tabs" justified="true"> 114 * [[:start]] 115 * [[:wiki:plugin:bootswrapper:nav|Nav Plugin]] 116 * [[playground:playground]] 117 * DokuWiki 118 * [[:wiki:welcome]] 119 * [[:wiki:syntax]] 120</nav></code> 121 122\\ 123 124<nav type="tabs" justified="true"> 125 * [[:start]] 126 * [[:wiki:plugin:bootswrapper:nav|Nav Plugin]] 127 * [[playground:playground]] 128 * DokuWiki 129 * [[:wiki:welcome]] 130 * [[:wiki:syntax]] 131</nav> 132 133\\ 134 135===== With Icons Plugin ===== 136 137<tabs> 138 * {{fa>home}} DokuWiki 139 * [[wiki:welcome]] 140 * [[wiki:syntax]] 141</tabs> 142 143\\ 144 145<code .html5> 146<tabs> 147 * {{fa>home}} DokuWiki 148 * [[wiki:welcome]] 149 * [[wiki:syntax]] 150</tabs> 151</code> 152 153\\ 154 155<tabs> 156 * File 157 * {{fa>file-o?fw}} [[#new|New]] 158 * {{fa>folder-open?fw}} [[#open|Open]] 159 * {{fa>print?fw}} [[#print|Print]] 160 * {{fa>close?fw}} [[#close|Close]] 161 * ? 162 * {{fa>info?fw}} [[#about|About...]] 163</tabs> 164 165\\ 166 167<code html5> 168<tabs> 169 * File 170 * {{fa>file-o?fw}} [[#new|New]] 171 * {{fa>folder-open?fw}} [[#open|Open]] 172 * {{fa>print?fw}} [[#print|Print]] 173 * {{fa>close?fw}} [[#close|Close]] 174 * ? 175 * {{fa>info?fw}} [[#about|About...]] 176</tabs> 177</code> 178 179\\ 180 181===== Tab Pane ===== 182 183<code html><tabs> 184 * [[#tab-foo|Foo]] 185 * [[#tab-bar|Bar]] 186 187<pane id="tab-foo"> 188=== Foo === 189Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 190</pane> 191 192<pane id="tab-bar"> 193=== Bar === 194Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 195</pane> 196 197</tabs></code> 198 199\\ 200 201<tabs> 202 * [[#tab-foo|Foo]] 203 * [[#tab-bar|Bar]] 204 205<pane id="tab-foo"> 206=== Foo === 207Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 208</pane> 209 210<pane id="tab-bar"> 211=== Bar === 212Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 213</pane> 214 215</tabs> 216 217\\ 218 219==== Tab Pane and Include Plugin ==== 220 221Use Include Plugin with ''inline'' flag to prevent unexpected behavior. 222 223<code html><pane id="tab-bar"> 224{{page>:wiki:syntax#Tables&inline}} 225</pane></code> 226 227<callout type="tip" icon="true"> 228=== Include plugin Documentation === 229 230[...] Don't close/open sections when including a page. This flag should be used when the include syntax is used inside other syntax elements like lists or tables or inside other plugin syntax. [...] \\ (see [[doku>plugin:include]]) 231</callout> 232 233<callout type="tip" icon="true"> 234=== Note for TOC === 235 236I suggest to add ''<nowiki>~~NOTOC~~</nowiki>'' because the TOC is displayed between the tab bar and the content. 237</callout> 238 239\\ 240 241===== Attributes ===== 242 243^ Attribute ^ Default Value ^ Allowed Values ^ Description ^ 244| ''type'' | ''pills'' | ''tabs'', ''pills'' | Type of nav | 245| ''stacked'' | optional | ''true'' | Stacked nav items | 246| ''justified'' | optional | ''true'' | Justify nav items | 247| ''fade'' | optional | ''true'' | Enable fade effect on tabs |