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 |