Meryam Sahin (talk | contribs)
Created page with "{{BSVersion|bsvFrom=4.4|bsvFeature=TabberNeue}} ==Simple Tabs== If you want to organize page content in tabs, you can use a special syntax in source editing mode. {{Textbox|boxtype=important|header=|text=The contents of the tabs cannot be edited in visual editing mode. It is, however, possible to show (transclude) entire wiki pages as the content of the tabs.|icon=no}} Tabs are created with <code>tabName=tabBody</code> and separated by <code>|-|</code>..."
 
Meryam Sahin (talk | contribs)
No edit summary
Line 1: Line 1:
{{BSVersion|bsvFrom=4.4|bsvFeature=TabberNeue}}
Tabs organize content into separate sections on a wiki page. '''TabberNeue''' supports simple tabs, nested tabs, and tabs that display the content of other wiki pages.
==Simple Tabs==
==Create tabs==
If you want to organize page content in tabs, you can use a special syntax in source editing mode.
Use the <code><nowiki><tabber></nowiki></code> tag to create tabs. Use the following syntax for each tab: <br>
{{Textbox|boxtype=important|header=|text=The contents of the tabs cannot be edited in visual editing mode. It is, however, possible to [[#Transclusion|show (transclude) entire wiki pages as the content of the tabs]].|icon=no}}
<syntaxhighlight lang="text">
 
|-|Tab title=Tab content </syntaxhighlight> <br>
Tabs are created with <code>tabName=tabBody</code> and separated by <code>|-|</code>. You can use any content in the tabs, including templates and images.[[File:TabberNeue standard.png|center|thumb|550x550px|Simple tabs|alt=4 tabs with the content of the first tab shown.]]
Separate tabs with <code>|-|</code>. Tabs can contain any wiki content, including templates and images. <br>
{{Textbox|boxtype=important|header=|text=If you insert the tabs via the Visual Editor Insert menu, omit the beginning and ending <nowiki><tabber> </nowiki> and <nowiki></tabber></nowiki> tags.|icon=no}}
For example: <br>
<syntaxhighlight lang="text">
<syntaxhighlight lang="text">
<tabber>
<tabber>
Line 15: Line 15:
Content for Tab 3.
Content for Tab 3.
</tabber>
</tabber>
</syntaxhighlight>
</syntaxhighlight><br>
 
[[File:TabberNeue standard.png|center|thumb|550x550px|Simple tabs|alt=4 tabs with the content of the first tab shown.]]
==Nested Tabs==
==Insert tabs with the VisualEditor==
Nested tabbers must be written as parser functions. Instead of the <code><nowiki><tabber/></nowiki></code> tags, they are enclosed with <code><nowiki>{{#tag:tabber|}}</nowiki></code> and separated by <code><nowiki>{{!}}-{{!}}</nowiki></code>. [[File:TabberNeue Nested Tabs.png|alt=Example of 4 tabs. The sub-tabs of the 1st main tab are open.|center|thumb|650x650px|Nested tabs]]
The '''VisualEditor''' provides an editor for entering the tab syntax.
{{Textbox|boxtype=important|header=|text=If you insert the tabs via the Visual Editor Insert menu, omit the beginning and ending <nowiki><tabber> </nowiki> and <nowiki></tabber></nowiki> tags.|icon=no}}
#Select '''Insert''' (+) > '''Tabber''' in the editor toolbar.
 
#In '''Tabber''', enter the tab syntax.
#Select '''Done'''.
#Save the page. <br>
When using the VisualEditor, omit the opening and closing <code><nowiki><tabber></nowiki></code> tags.
==Create nested tabs==
Nested tabs place a second set of tabs inside a tab. Use the <code><nowiki>{{#tag:tabber|}}</nowiki></code> parser function for the nested tabs. Separate the nested tabs with <code><nowiki>{{!}}-{{!}}</nowiki></code>. <br>
For example:
<syntaxhighlight lang="text">
<syntaxhighlight lang="text">
<tabber>
<tabber>
Line 57: Line 63:
  }}
  }}
</tabber>
</tabber>
</syntaxhighlight>
</syntaxhighlight> <br>
 
[[File:TabberNeue Nested Tabs.png|alt=Example of 4 tabs. The sub-tabs of the 1st main tab are open.|center|thumb|650x650px|Nested tabs]]
== PDF printout ==
When using the VisualEditor, omit the opening and closing <code><nowiki><tabber></nowiki></code> tags.
The tab names themselves are not printed in the PDF. The designations must therefore be repeated in the text content of the respective tab if the page needs to be taken into account for the PDF printout.<syntaxhighlight lang="text">
==Show wiki pages in tabs==
Tab transclusion displays the content of other wiki pages in tabs. The first tab loads its page content when the page loads. TabberNeue loads the content of other tabs when they are opened. TabberNeue does not request the content again until the page reloads. <br>
Enter one page name and tab title per line: <code>PageName|Tab title</code>. <br>
For example:
<syntaxhighlight lang="text">
<tabbertransclude>
Mytransclusion1|Page 1
Mytransclusion2|Page 2
</tabbertransclude>
</syntaxhighlight> <br>
TabberNeue does not render tabs on a transcluded page.
==Insert transcluded pages with the VisualEditor=
To insert wiki pages in tabs with the VisualEditor:
#Select '''Insert''' > '''Tabber (transclusion)''' in the eidotr toolbar.
#In '''Tabber (transclusion)''', enter the page names and tab titles: <code> Mytransclusion1|Page 1
Mytransclusion2|Page 2 </code>
#Select '''Done'''.
#Save the page. <br>
When using the VisualEditor, omit the opening and closing <code><nowiki><tabbertransclusion></nowiki></code> tags. <br>
[[File:1713253509342 tabber transclude.png|alt=Inspector window with code for transcluding two pages in two tabs.|center|thumb|750x750px|Inspector window for transcluding two pages]]
The resulting tabs display the content of the specified pages.
==Tabs in PDF exports==
PDF exports do not include tab names. To include the tab names in the PDF, repeat each tab name in the content of the corresponding tab. <br>
For example:
<syntaxhighlight lang="text">
<tabber>
<tabber>
|-|Title for Tab 1=
|-|Title for Tab 1=
Line 78: Line 108:
The content for Tab 3.
The content for Tab 3.
</tabber>
</tabber>
</syntaxhighlight>Note on accessibility: If you have extensive content in the individual tabs here, it may be necessary to format the tab names repeated in the content as headings.
</syntaxhighlight><br>
 
For extensive tab content, format the repeated tab names as headings. This provides a clear heading structure within the tab content and can improve accessibility.  
== Transclusion ==
==Administration==
With the transclusion mode, the entire contents of the page of the first tab will be transcluded. The transcluded pages in other tabs will be transcluded on-demand with AJAX, performing a request to the MediaWiki api. Once requested, they won't be fetched again until the page is reloaded. Note that Tabbers on the transcluded page will not be rendered.
TabberNeue adds tracking categories to pages that contain tabs. Administrators can suppress these categories by changing the related system messages. <br>
Tabs are created with <code>pageName|tabName</code>, and separated by a new line.
To suppress the tracking categories:  
{{Textbox|boxtype=important|header=|text=If you insert the tabs via the Visual Editor Insert menu, omit the beginning and ending <nowiki><tabbertransclude> </nowiki> and <nowiki></tabbertransclude></nowiki> tags.|icon=no}}
#Open '''Special:TrackingCategories'''.  
 
#In the '''Message name''' column, select '''tabberneue-tabber-category''' and '''tabberneue-tabbertransclude-category'''.  
<syntaxhighlight lang="text">
#Replace the existing content with a hyphen (<code>-</code>).
<tabbertransclude>
#Save each system message. <br>
First Page Name|First Tab Title
The tracking categories no longer appear on wiki pages. See also: [https://www.mediawiki.org/wiki/Help:Tracking_categories].
Second Page Name|Second Tab Title
Third Page Name|Third Tab Title
</tabbertransclude>
</syntaxhighlight>
 
=== Example ===
Show the content of the pages ''Mytransclusion''1 and ''Mytransclusion2'' in tabs.<syntaxhighlight lang="text">
<tabbertransclude>
Mytransclusion1|Page 1
Mytransclusion2|Page 2
</tabbertransclude>
</syntaxhighlight>To create the tabs:
 
# '''Select''' ''Insert>Tabber(transclusion)'' in the editor toolbar.
# '''Write''' the necessary lines in the tabber inspector pop-up:<syntaxhighlight lang="text">
Mytransclusion1|Page 1
Mytransclusion2|Page 2</syntaxhighlight>[[File:1713253509342 tabber transclude.png|alt=inspector window with code for transcluding two pages in two tabs.|center|thumb|750x750px|Inspector window for transcluding two pages]]
# '''Click''' ''Done''.
# '''Save''' the page.
 
 
'''This is the output:'''<tabbertransclude>
Mytransclusion1|Page 1
Mytransclusion2|Page 2
</tabbertransclude>
 
=== Maintenance categories ===
This extension automatically inserts a tracking category on pages with tabs. To suppress them, change the content of the related system messages.
 
# '''Go to''' page ''Special:TrackingCategories'' in your wiki.
# '''Click on''' tabberneue-tabber-category and ''tabberneue-tabbertransclude-category'' in the column ''Message name'' (2nd column).
# '''Replace''' the existing content with a dash ("-"). The category will no longer be displayed on your wiki pages.
# '''Save''' the page.
 
The system category is no longer displayed on your wiki pages.
 
See also: https://www.mediawiki.org/wiki/Help:Tracking%20categories
 
{{translation}}

Revision as of 07:01, 19 August 2026

Tabs organize content into separate sections on a wiki page. TabberNeue supports simple tabs, nested tabs, and tabs that display the content of other wiki pages.

Create tabs

Use the <tabber> tag to create tabs. Use the following syntax for each tab:

|-|Tab title=Tab content


Separate tabs with |-|. Tabs can contain any wiki content, including templates and images.
For example:

<tabber>
|-|Titel für Tab 1=
Content for Tab 1.
|-|Titel für Tab 2=
Content for Tab 2.
|-|Title for Tab 3=
Content for Tab 3.
</tabber>


4 tabs with the content of the first tab shown.
Simple tabs

Insert tabs with the VisualEditor

The VisualEditor provides an editor for entering the tab syntax.

  1. Select Insert (+) > Tabber in the editor toolbar.
  2. In Tabber, enter the tab syntax.
  3. Select Done.
  4. Save the page.

When using the VisualEditor, omit the opening and closing <tabber> tags.

Create nested tabs

Nested tabs place a second set of tabs inside a tab. Use the {{#tag:tabber|}} parser function for the nested tabs. Separate the nested tabs with {{!}}-{{!}}.
For example:

<tabber>
|-|First Tab Title=
{{#tag:tabber|
 Tab Title A=
 Tab content A goes here.
 {{!}}-{{!}}
 Tab Title B=
 Tab content B goes here.
 {{!}}-{{!}}
 Tab Title C=
 Tab content C goes here.
 }}
|-|Second Tab Title=
{{#tag:tabber|
 Tab Title D=
 Tab content D goes here.
 {{!}}-{{!}}
 Tab Title E=
 Tab content E goes here.
 {{!}}-{{!}}
 Tab Title F=
 Tab content F goes here.
 }}
|-|Third Tab Title=
{{#tag:tabber|
 Tab Title G=
 Tab content G goes here.
 {{!}}-{{!}}
 Tab Title H=
 Tab content H goes here.
 {{!}}-{{!}}
 Tab Title I=
 Tab content I goes here.
 }}
</tabber>


Example of 4 tabs. The sub-tabs of the 1st main tab are open.
Nested tabs

When using the VisualEditor, omit the opening and closing <tabber> tags.

Show wiki pages in tabs

Tab transclusion displays the content of other wiki pages in tabs. The first tab loads its page content when the page loads. TabberNeue loads the content of other tabs when they are opened. TabberNeue does not request the content again until the page reloads.
Enter one page name and tab title per line: PageName|Tab title.
For example:

<tabbertransclude>
Mytransclusion1|Page 1
Mytransclusion2|Page 2
</tabbertransclude>


TabberNeue does not render tabs on a transcluded page.

=Insert transcluded pages with the VisualEditor

To insert wiki pages in tabs with the VisualEditor:

  1. Select Insert > Tabber (transclusion) in the eidotr toolbar.
  2. In Tabber (transclusion), enter the page names and tab titles: Mytransclusion1|Page 1

Mytransclusion2|Page 2

  1. Select Done.
  2. Save the page.

When using the VisualEditor, omit the opening and closing <tabbertransclusion> tags.

Inspector window with code for transcluding two pages in two tabs.
Inspector window for transcluding two pages

The resulting tabs display the content of the specified pages.

Tabs in PDF exports

PDF exports do not include tab names. To include the tab names in the PDF, repeat each tab name in the content of the corresponding tab.
For example:

<tabber>
|-|Title for Tab 1=

<b>Title for Tab 1</b>

The content for Tab 1.
|-|Title for Tab 2=

<b>Title for Tab 2</b>

The content for Tab 2.
|-|Title for Tab 3=

<b>Title for Tab 3</b>

The content for Tab 3.
</tabber>


For extensive tab content, format the repeated tab names as headings. This provides a clear heading structure within the tab content and can improve accessibility.

Administration

TabberNeue adds tracking categories to pages that contain tabs. Administrators can suppress these categories by changing the related system messages.
To suppress the tracking categories:

  1. Open Special:TrackingCategories.
  2. In the Message name column, select tabberneue-tabber-category and tabberneue-tabbertransclude-category.
  3. Replace the existing content with a hyphen (-).
  4. Save each system message.

The tracking categories no longer appear on wiki pages. See also: .