Module:Sandbox/Harej/TabNav/doc

The TabNav module lets you build tab navigation systems via the module's "build" method. It is recommended that you use this module via the template User:Harej/Sandbox/JamesHareTask2/template. (In real-world usage, the template would have a less hideous name.) The module documentation will assume that you are using the template, rather than the module directly.

Usage

Basic usage

You may use this module with the default design. The first header block on User:Harej/Sandbox/JamesHareTask2 shows off the default design.

You could think of TabNav as having three parts: the header, the table of contents, and the body (optional). The header identifiers the page, the table of contents links to other pages, and the body section allows you to have a body of content visually connected to the header block (though this is optional).

Header

| headertext = The headline for the page. Required.
| headercolor = The color. Default value is #ddd – a shade of gray
| width = The width of the entire block, including the body if you are using the body parameter. Default width is 65em.

Table of contents

Each tab in the table of contents is numbered. There are no limits on how many tabs you can have, though if there are more tabs than there is room in the header then it may appear broken.

For each tab there must be an entrylabel followed by a number, indicating which order the tab comes in. For example, the first tab would have entrylabel1 = NAME.

The other per-tab parameters are optional. To link to another page, you would use entrylinkN = PAGENAME. Right now you can only use internal links; external links are not supported. To specify an icon, use entryiconN = FILENAME (without the "File:" prefix). To change the color so that it is not black, use entrycolorN = COLOR.

If you want to shade the "selected" tab (i.e. the tab representing the current page), use selectedtab = N, where N is the number of the tab to be shaded.

As an example for a selected tab called "Introduction" with File:OOjs UI icon flag-ltr.svg as the icon, with a red color, linking to Main Page:

| entrylabel1 = Introduction
| entrycolor1 = red
| entryicon1 = OOjs UI icon flag-ltr.svg
| entrylink1 = Main Page
| selectedtab = 1

Body

The body parameter is optional.

| body = Whatever content you want to use.

Advanced usage

TabNav gives you near-total control over the styling of the header block.

Customize the header

The headerstyle parameter lets you change the CSS styling for the header. However, to change the background color, it is still recommended that you use headercolor.

The default headerstyle is as follows:

| headerstyle = color:#fff; width:100%; text-align:right; padding-right:0.5em; font-weight:bold; font-size:250%;

If you just want to make small adjustments, it is recommended you copy that line and make your changes there. Otherwise, you will completely overwrite the style settings.

It is important that you end your line with a semicolon, as above.

Customize the tabs

The tabstyle parameter lets you change the CSS styling for the tabs as a whole. Changes you make here affect all the tabs. However, you should continue to define tab colors on an individual basis via tabcolorN.

The default tabstyle is as follows:

| tabstyle = font-weight:bold; padding:1.1em; margin-right:0.3em; min-width:50px; text-align:center; font-size:110%; border-top:6px solid;

If you just want to make small adjustments, it is recommended you copy that line and make your changes there. Otherwise, you will completely overwrite the style settings.

It is important that you end your line with a semicolon, as above.