Template:Tabs flexible
Template documentationNote to editors: Please don't categorize this template by editing it directly. Instead, place the category in its documentation page, in its "includeonly" section.
This was copied from User:MarkS/Tabs, modified its design to fit JOSM/Guide, simplified parameters by nazotoko and switched from using a wiki table to using CSS flexbox by Chris2map under new name Template:Tabs flexible for improving usability on small screens like mobile devices.
This is a template to allow users to add a set of tabs at the top of a page to switch between different pages. It is based on the code used on DE:JOSM/Guide converted to template form for easy inclusion on other pages.
This template is used e.g. in Template:HelpMenu.
The template can support up to 10 tabs — the actual number depends on the number of tabs defined in the parameters for the template.
Each tab is allocated a proportional width according to its content.
Parameters
| Parameter name | Required? | Purpose |
|---|---|---|
| 1 | Mandatory | The actual page name (or URL) to link for tab 1. |
| 2 | Optional | The actual page name (or URL) for tab 2. If 2 is not supplied then tab number 2 will not be displayed. |
| 3 | Optional | The actual page name (or URL) for tab 3. If 3 is not supplied then tab number 3 will not be displayed. |
| 4 | Optional | The actual page name (or URL) for tab 4. If 4 is not supplied then tab number 4 will not be displayed. |
| 5 | Optional | The actual page name (or URL) for tab 5. If 5 is not supplied then tab number 5 will not be displayed. |
| 6 | Optional | The actual page name (or URL) for tab 6. If 6 is not supplied then tab number 6 will not be displayed. |
| 7 | Optional | The actual page name (or URL) for tab 7. If 7 is not supplied then tab number 7 will not be displayed. |
| 8 | Optional | The actual page name (or URL) for tab 8. If 8 is not supplied then tab number 8 will not be displayed. |
| 9 | Optional | The actual page name (or URL) for tab 9. If 9 is not supplied then tab number 9 will not be displayed. |
| 10 | Optional | The actual page name (or URL) for tab 10. If 10 is not supplied then tab number 10 will not be displayed. |
| label1 | Optional | The label for tab 1 instead of the page name. The default is to use the 1 value. |
| label2 | Optional | The label for tab 2 instead of the page name. The default is to use the 2 value. |
| ... | ||
| selected | Optional | The selected tab. May be either an integer which then selects the appropriate tab or a text value in which case it selects the tab showing the text. Using a text value may be easier as it allows swapping the order of tabs without having to update the selected number for each page. Default value is the page name using this template.:{{FULLPAGENAME}} |
| edit | Optional | The full page name containing the list of tabs (generates a small link at end of tabs to editing them) |
| no_bottom_border | Optional | yes/leave empty. In case of yes, at the end of content there would be no border. Suitable when you close table immediately before content (as a workaround for visual editor to work). |
| tab-height | Optional | ???px (default is "12px"). To adjust the white space above and below the tab label text, increasing or decreasing the height of the tabs. |
| bgcolor | Optional | colour code (default is "#EEF"). To change the colour of the (inactive) tabs. |
Note: Parameters 1 to 10 may now also specify an external URL (autodetected when it contains "//"; any URL scheme supported by this wiki for external links may be specified explicitly, such as "http://" or "https://" and they must follow the accepted community rules: spamming irrelevant URLs via this template is not acceptable, just like they are not acceptable in any wiki page). Their associated labels should be supplied, otherwise the link will only be shown as a number within square brackets (the URL itself will not be shown, except in tooltip when hovering it). This external link is also marked by displaying the standard icon for URLs.
TemplateData
Displays tabs that act as links to different pages, allowing for convenient switching between them.
| Parameter | Description | Type | Status | |
|---|---|---|---|---|
| Link 1 | 1 | The actual page name (or URL) to link for tab 1.
| String | required |
| Link 2 | 2 | The actual page name (or URL) to link for tab 2.
| String | suggested |
| Link 3 | 3 | The actual page name (or URL) to link for tab 3. | String | optional |
| Link 4 | 4 | The actual page name (or URL) to link for tab 4. | String | optional |
| Link 5 | 5 | The actual page name (or URL) to link for tab 5. | String | optional |
| Link 6 | 6 | The actual page name (or URL) to link for tab 6. | String | optional |
| Link 7 | 7 | The actual page name (or URL) to link for tab 7. | String | optional |
| Link 8 | 8 | The actual page name (or URL) to link for tab 8. | String | optional |
| Link 9 | 9 | The actual page name (or URL) to link for tab 9. | String | optional |
| Link 10 | 10 | The actual page name (or URL) to link for tab 10. | String | optional |
| Label 1 | label1 | The label for tab 1 instead of the page name. | Line | suggested |
| Label 2 | label2 | The label for tab 2 instead of the page name. | Line | suggested |
| Label 3 | label3 | The label for tab 3 instead of the page name. | Line | optional |
| Label 4 | label4 | The label for tab 4 instead of the page name. | Line | optional |
| Label 5 | label5 | The label for tab 5 instead of the page name. | Line | optional |
| Label 6 | label6 | The label for tab 6 instead of the page name. | Line | optional |
| Label 7 | label7 | The label for tab 7 instead of the page name. | Line | optional |
| Label 8 | label8 | The label for tab 8 instead of the page name. | Line | optional |
| Label 9 | label9 | The label for tab 9 instead of the page name. | Line | optional |
| Label 10 | label10 | The label for tab 10 instead of the page name. | Line | optional |
| Selected tab | selected | Normally, this parameter is not required. You can use it to define the selected tab manually. May be either an integer which then selects the appropriate tab or a text value in which case it selects the tab showing the text. Default value is the page name using this template. | Line | optional |
| Edit link | edit | The full page name containing the list of tabs. (Generates a small link at end of tabs to editing them.)
| Page name | optional |
| no_bottom_border | no_bottom_border | yes / leave empty. In case of yes, at the end of content there would be no border. Suitable when you close table immediately before content (as a workaround for visual editor to work).
| Line | optional |
| Tab height | tab-height | Changes default height of the tabs.
| Line | optional |
| Tab colour | bgcolor | Changes default colour of the (inactive) tabs.
| Line | optional |
Using the template
In short:
{{Tabs flexible|London|B|C|D|E|
label1=A|
selected=E}}
This creates 5 tabs. The 5th tab, of which page name is "E", will be selected. The first tab will be labeled A and will contain a link to London. The second tab will be labeled B and contain a link to B.
But you will need to repeat the tabs template at the top of each page which is accessed using the tabs.
This can make maintenance a burden. Instead it may be easier to create a second template which accesses this template and supplies all the necessary titles in one go. For example you could create a template called "JOSMTabs" with the following content:
{{Tabs flexible|JOSM|JOSM/Plugins|JOSM/Guide|
label1=Introduction|
label2=Plugins|
selected=JOSM/Plugins
}}
(contents)
</div> <!-- This template opens a <div> but doesn't close it. If you don't close it with a </div>, it will extend up to the end of the page and will close automatically. -->
out of the tab page
This will create a template that adds 3 tabs to the page with defined headings. To use the template simply include {{JOSMTabs}} on each page you want the tabs to appear on.
Examples
Example 1
{{Tabs flexible
| selected = JOSM/Plugins
| 1 = JOSM | label1 = Introduction
| 2 = JOSM/Plugins | label2 = Plugins
| 3 = JOSM/Guide
| 4 = //josm.openstreetmap.de/ | label4 = JOSM website
}}
... some contents displayed within the tab ...
</div>
... out of the tab page ...
gives:
context
- item 1
- item 2
| inside table | yes |
|---|
... out of the tab page ...
Example 2
{{Tabs flexible
| selected = JOSM/Plugins | no_bottom_border = yes
| 1 = JOSM | label1 = Introduction
| 2 = JOSM/Plugins | label2 = Plugins
| 3 = JOSM/Guide
| 4 = //josm.openstreetmap.de/ | label4 = JOSM website
}}
</div>
context
* item 1
* item 2
... some contents displayed out of the ''Template:Tabs flexible''.
gives:
context
- item 1
- item 2
... some contents displayed out of the tab. In fact, now Tabs template acts as a separate navigation bar.
See also
- {{Tabs}}