Template:Tab top/Examples View history

VisualWikitext
No edit summary
No edit summary
Line 24: Line 24:
}}
}}
</pre>
</pre>
This is the minimum structure for 3 tabs. All colors and style are the default ones.
</div></div>
</div></div>
<br />
<br />
<br />
<br />


''' Rounded Tab template '''
''' Rounded Tab template, with a picture '''
{{ Tab top
{{ Tab top
| Tab-1 = Alpha
| Tab-1 = Alpha
| URL-1 = France
| URL-1 = France
| Image-1 = Mentor-new-transparent-large.png
| Tab-2 = Bravo
| Tab-2 = Bravo
| URL-2 = Template:Tab top/Examples
| URL-2 = Template:Tab top/Examples
| Image-2 = MenuButton.png
| Tab-3 = Charlie
| Tab-3 = Charlie
| URL-3 = Main Page
| URL-3 = Main Page
Line 42: Line 45:
| Tab-1 = Alpha
| Tab-1 = Alpha
| URL-1 = France
| URL-1 = France
| Image-1 = Mentor-new-transparent-large.png
| Tab-2 = Bravo
| Tab-2 = Bravo
| URL-2 = Template:Tab top/Examples
| URL-2 = Template:Tab top/Examples
| Image-2 = MenuButton.png
| Tab-3 = Charlie
| Tab-3 = Charlie
| URL-3 = Main Page
| URL-3 = Main Page
Line 49: Line 54:
}}
}}
</pre>
</pre>
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.
</div></div>
</div></div>
<br />
<br />
Line 62: Line 69:
| URL-3 = Main Page
| URL-3 = Main Page
| rounding = 15
| rounding = 15
| asym=3
| asym = 3
}}
}}
<pre>
<pre>
Line 73: Line 80:
| URL-3 = Main Page
| URL-3 = Main Page
| rounding = 15
| rounding = 15
| asym=3
| asym = 3
}}
}}
</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).
</div></div>
</div></div>
<br />
<br />
Line 81: Line 89:




''' altering the default colors '''
''' altering the default colors the border style '''
{{ Tab top
{{ Tab top
| Tab-1 = Alpha
| Tab-1 = Alpha
Line 91: Line 99:
| rounding = 15
| rounding = 15
| asym=3
| asym=3
| border=brown
| border = dashed 5px #964B00
| frame background=ivory
| frame background=ivory
| tab background=tan
| tab background=tan
Line 103: Line 111:
| Tab-3 = Charlie
| Tab-3 = Charlie
| URL-3 = Main Page
| URL-3 = Main Page
| rounding = 20
| rounding = 15
| asym = 3
| border = dashed 5px #964B00
| frame background=ivory
| tab background=tan
}}
</pre>
the 3 last parameters override the built-in default colors & style.
</div></div>
<br />
<br />
 
''' adding dedicated color to tabs '''
{{ Tab top
| Tab-1 = Alpha
| URL-1 = France
| tab background-1 = lightblue
| Tab-2 = Bravo
| URL-2 = Template:Tab top/Examples
| tab background-2 = red
| Tab-3 = Charlie
| URL-3 = Main Page
| rounding = 15
| asym=3
| border = solid 2px #964B00
| frame background=ivory
| tab background=tan
}}
}}
<pre>
{{ Tab top
| Tab-1 = Alpha
| URL-1 = France
| tab background-1 = lightblue
| Tab-2 = Bravo
| URL-2 = Template:Tab top/Examples
| tab background-2 = red
| Tab-3 = Charlie
| URL-3 = Main Page
| rounding = 15
| asym=3
| border = solid 2px red
| frame background = ivory
| tab background = tan
</pre>
</pre>
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 #3 does not get its own background color, thus the default one is used/
</div></div>
</div></div>
<br />
<br />
<br />
<br />

Revision as of 15:37, 30 September 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 AlphaBravo BravoCharlie
{{ 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

AlphaBravoCharlie
{{ 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

AlphaBravoCharlie
{{ 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

AlphaBravoCharlie
{{ Tab top
| Tab-1 = Alpha
| URL-1 = France
| tab background-1 = lightblue
| Tab-2 = Bravo
| URL-2 = Template:Tab top/Examples
| tab background-2 = red
| Tab-3 = Charlie
| URL-3 = Main Page
| rounding = 15
| asym=3
| border = solid 2px red
| frame background = ivory
| tab background = tan

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 #3 does not get its own background color, thus the default one is used/



Retrieved from "https://beta.waze.com/wiki/Commons/index.php?title=Template:Tab_top/Examples&oldid=81082"