This page displays various example of the possible layout of the template.
As the URL of this page is Template:Tab top/Examples, this will be used in the following examples as the specified URL for tab 2, in order to make this one appear as selected.
Minimum template
Alpha | Bravo | Charlie |
{{ Tab top | Tab-1 = Alpha | URL-1 = France | Tab-2 = Bravo | URL-2 = Template:Tab top/Examples | Tab-3 = Charlie | URL-3 = Main Page }}
This is the minimum structure for 3 tabs. All colors and style are the default ones.
Rounded Tab template, with a picture
Alpha | Bravo | Charlie |
{{ Tab top | Tab-1 = Alpha | URL-1 = France | Image-1 = Mentor-new-transparent-large.png | Tab-2 = Bravo | URL-2 = Template:Tab top/Examples | Image-2 = MenuButton.png | Tab-3 = Charlie | URL-3 = Main Page | rounding = 20 }}
The rouding parameters specify a radius of 20px, applied symetrically on both left and right upper corner of each tab boxes. Two of 3 tabs get a picture prefix.
Asymmetrically Rounded Tab template
Alpha | Bravo | Charlie |
{{ Tab top | Tab-1 = Alpha | URL-1 = France | Tab-2 = Bravo | URL-2 = Template:Tab top/Examples | Tab-3 = Charlie | URL-3 = Main Page | rounding = 15 | asym = 3 }}
The upper right corner get a rounding with a radius of 15px, when the upper left corner get a rounding with a radius 3 times greater (3 x 15px = 45px).
altering the default colors the border style
Alpha | Bravo | Charlie |
{{ Tab top | Tab-1 = Alpha | URL-1 = France | Tab-2 = Bravo | URL-2 = Template:Tab top/Examples | Tab-3 = Charlie | URL-3 = Main Page | rounding = 15 | asym = 3 | border = dashed 5px #964B00 | frame background=ivory | tab background=tan }}
the 3 last parameters override the built-in default colors & style.
adding dedicated color to tabs + a gap between tabs + Force tab to be selected
Alpha | Bravo | Charlie |
{{ Tab top | Tab-1 = Alpha | URL-1 = France | tab background-1 = lightblue | Tab-2 = Bravo | URL-2 = Map editing | Tab-3 = Charlie | URL-3 = Main Page | tab background-3 = red | rounding = 15 | asym=3 | border = solid 2px red | frame background = ivory | tab background = tan | gap = 2px | selected = Charlie }}
The "selected" parameter force the template to select the third tab (the one named "Charlie")
The tab #1 got its own background color (lightblue) which is used as the tab is not selected.
The tab #2 does not get its own background color, thus the default one is used (this is tan)
The tab #3 got its own background color (red) but is not used as this is the selected tab and therefore gets the same color than the frame background