No edit summary |
No edit summary |
||
| (3 intermediate revisions by the same user not shown) | |||
| Line 25: | Line 25: | ||
</pre> | </pre> | ||
This is the minimum structure for 3 tabs. All colors and style are the default ones. | This is the minimum structure for 3 tabs. All colors and style are the default ones. | ||
{{Tab bottom}} | |||
<br /> | <br /> | ||
<br /> | <br /> | ||
| Line 39: | Line 39: | ||
| Tab-3 = Charlie | | Tab-3 = Charlie | ||
| URL-3 = Main Page | | URL-3 = Main Page | ||
| rounding = | | rounding = 20 | ||
}} | }} | ||
<pre> | <pre> | ||
| Line 51: | Line 51: | ||
| Tab-3 = Charlie | | Tab-3 = Charlie | ||
| URL-3 = Main Page | | URL-3 = Main Page | ||
| rounding = | | rounding = 20 | ||
}} | }} | ||
</pre> | </pre> | ||
The ''rouding'' parameters specify a radius of 20px, applied symetrically on both left and right upper corner of each tab boxes. | 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. | Two of 3 tabs get a picture prefix. | ||
{{Tab bottom}} | |||
<br /> | <br /> | ||
<br /> | <br /> | ||
| Line 84: | Line 84: | ||
</pre> | </pre> | ||
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). | 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). | ||
{{Tab bottom}} | |||
<br /> | <br /> | ||
<br /> | <br /> | ||
| Line 119: | Line 119: | ||
</pre> | </pre> | ||
the 3 last parameters override the built-in default colors & style. | the 3 last parameters override the built-in default colors & style. | ||
{{Tab bottom}} | |||
<br /> | <br /> | ||
<br /> | <br /> | ||
''' adding dedicated color to tabs ''' | ''' adding dedicated color to tabs + a gap between tabs + Force tab to be selected ''' | ||
{{ Tab top | {{ Tab top | ||
| Tab-1 = Alpha | | Tab-1 = Alpha | ||
| Line 129: | Line 129: | ||
| tab background-1 = lightblue | | tab background-1 = lightblue | ||
| Tab-2 = Bravo | | Tab-2 = Bravo | ||
| URL-2 = | | URL-2 = Map editing | ||
| Tab-3 = Charlie | | Tab-3 = Charlie | ||
| URL-3 = Main Page | | URL-3 = Main Page | ||
| tab background-3 = red | |||
| rounding = 15 | | rounding = 15 | ||
| asym=3 | | asym=3 | ||
| border = solid 2px | | border = solid 2px red | ||
| frame background=ivory | | frame background = ivory | ||
| tab background=tan | | tab background = tan | ||
| gap = 2px | |||
| selected = Charlie | |||
}} | }} | ||
<pre> | <pre> | ||
| Line 145: | Line 147: | ||
| tab background-1 = lightblue | | tab background-1 = lightblue | ||
| Tab-2 = Bravo | | Tab-2 = Bravo | ||
| URL-2 = | | URL-2 = Map editing | ||
| Tab-3 = Charlie | | Tab-3 = Charlie | ||
| URL-3 = Main Page | | URL-3 = Main Page | ||
| tab background-3 = red | |||
| rounding = 15 | | rounding = 15 | ||
| asym=3 | | asym=3 | ||
| Line 154: | Line 156: | ||
| frame background = ivory | | frame background = ivory | ||
| tab background = tan | | tab background = tan | ||
| gap = 2px | |||
| selected = Charlie | |||
}} | |||
</pre> | </pre> | ||
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 #1 got its own background color (lightblue) which is used as the tab is not selected. | ||
The tab #2 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 | |||
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 | |||
{{Tab bottom}} | |||
<br /> | <br /> | ||
<br /> | <br /> | ||
Latest revision as of 12:22, 31 October 2014
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