Template:Tabs flexible

Template:Tabs flexible

Template:Tabs flexible/doc

The Map

Sample content

Template documentation[View] [edit] [history] [Purge]

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

This is the TemplateData for this template used by VisualEditor.
TemplateData for Tabs flexible

Displays tabs that act as links to different pages, allowing for convenient switching between them.

Template parameters[Edit template data]

This template prefers block formatting of parameters.

Parameter		Description	Type	Status
Link 1	1	The actual page name (or URL) to link for tab 1. Example Get help	String	required
Link 2	2	The actual page name (or URL) to link for tab 2. Example About	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.) Example Template:Name of menu template page	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). Auto value yes	Line	optional
Tab height	tab-height	Changes default height of the tabs. Default 12px Example 8px	Line	optional
Tab colour	bgcolor	Changes default colour of the (inactive) tabs. Default #EEF Example #eee	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
}}

(page content)

</div><!--End of "Tabs flexible" division (page frame)-->

(page content below or out of the framed tab page content)

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.

Note

The template "Tabs flexible" 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.

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 content displayed within the tab (page frame) ...
context
* item 1
* item 2
{| class="wikitable"
|-
!inside
|{{yes}}
|}
</div><!--End of "Tabs flexible" division (page frame)-->
... out of the tab page (frame) ...

gives:

Introduction

Plugins

JOSM/Guide

JOSM website

... some content displayed within the tab (page frame) ...
context

• item 1
• item 2

inside	yes

... out of the tab page (frame) ...

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><!--End of "Tabs flexible" division (page frame)-->
... out of the tab page (frame) ...
context
* item 1
* item 2

gives:

Introduction

Plugins

JOSM/Guide

JOSM website

... out of the tab page (frame) ...
context

• item 1
• item 2

In fact, now Tabs template acts as a separate navigation bar.

See also

• {{Tabs}}

The above documentation is transcluded from Template:Tabs flexible/doc. (edit | history)
Editors can experiment in this template's sandbox (Create | mirror) and testcases (Create) pages.
Add categories to the /doc subpage. Subpages of this template.