History
Check the server status and major service issues

Difference between revisions of "Modèle:Tab top/Examples"

From Wazeopedia
m (Arapiraca,Alagoas)
 
 
(4 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
Arapiraca,Alagoas
+
 
 +
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.
 +
<br />
 +
<br />
 +
 
 +
''' Minimum template '''
 +
{{ Tab top
 +
| Tab-1 = Alpha
 +
| URL-1 = France
 +
| Tab-2 = Bravo
 +
| URL-2 = Template:Tab top/Examples
 +
| Tab-3 = Charlie
 +
| URL-3 = Accueil
 +
}}
 +
<pre>
 +
{{ Tab top
 +
| Tab-1 = Alpha
 +
| URL-1 = France
 +
| Tab-2 = Bravo
 +
| URL-2 = Template:Tab top/Examples
 +
| Tab-3 = Charlie
 +
| URL-3 = Accueil
 +
}}
 +
</pre>
 +
This is the minimum structure for 3 tabs. All colors and style are the default ones.
 +
{{Tab bottom}}
 +
<br />
 +
<br />
 +
 
 +
''' Rounded Tab template, with a picture '''
 +
{{ 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 = Accueil
 +
| rounding = 20
 +
}}
 +
<pre>
 +
{{ 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 = Accueil
 +
| rounding = 20
 +
}}
 +
</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.
 +
{{Tab bottom}}
 +
<br />
 +
<br />
 +
 
 +
''' Asymmetrically Rounded Tab template '''
 +
{{ Tab top
 +
| Tab-1 = Alpha
 +
| URL-1 = France
 +
| Tab-2 = Bravo
 +
| URL-2 = Template:Tab top/Examples
 +
| Tab-3 = Charlie
 +
| URL-3 = Accueil
 +
| rounding = 15
 +
| asym = 3
 +
}}
 +
<pre>
 +
{{ Tab top
 +
| Tab-1 = Alpha
 +
| URL-1 = France
 +
| Tab-2 = Bravo
 +
| URL-2 = Template:Tab top/Examples
 +
| Tab-3 = Charlie
 +
| URL-3 = Accueil
 +
| rounding = 15
 +
| asym = 3
 +
}}
 +
</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).
 +
{{Tab bottom}}
 +
<br />
 +
<br />
 +
 
 +
 
 +
''' altering the default colors the border style '''
 +
{{ Tab top
 +
| Tab-1 = Alpha
 +
| URL-1 = France
 +
| Tab-2 = Bravo
 +
| URL-2 = Template:Tab top/Examples
 +
| Tab-3 = Charlie
 +
| URL-3 = Accueil
 +
| border = dashed 5px #964B00
 +
| frame background=ivory
 +
| tab background=tan
 +
}}
 +
<pre>
 +
{{ Tab top
 +
| Tab-1 = Alpha
 +
| URL-1 = France
 +
| Tab-2 = Bravo
 +
| URL-2 = Template:Tab top/Examples
 +
| Tab-3 = Charlie
 +
| URL-3 = Accueil
 +
| border = dashed 5px #964B00
 +
| frame background=ivory
 +
| tab background=tan
 +
}}
 +
</pre>
 +
the 3 last parameters override the built-in default colors & style.
 +
{{Tab bottom}}
 +
<br />
 +
<br />
 +
 
 +
''' adding dedicated color to tabs + a gap between tabs + Force tab to be selected '''
 +
{{ Tab top
 +
| Tab-1 = Alpha
 +
| URL-1 = France
 +
| tab background-1 = lightblue
 +
| Tab-2 = Bravo
 +
| URL-2 = Edition de la Carte
 +
| Tab-3 = Charlie
 +
| URL-3 = Main Page
 +
| tab background-3 = red
 +
| border = solid 2px red
 +
| frame background = ivory
 +
| tab background = tan
 +
| gap = 2px
 +
| selected = Charlie
 +
}}
 +
<pre>
 +
{{ Tab top
 +
| Tab-1 = Alpha
 +
| URL-1 = France
 +
| tab background-1 = lightblue
 +
| Tab-2 = Bravo
 +
| URL-2 = Edition de la Carte
 +
| Tab-3 = Charlie
 +
| URL-3 = Main Page
 +
| tab background-3 = red
 +
| border = solid 2px red
 +
| frame background = ivory
 +
| tab background = tan
 +
| gap = 2px
 +
| selected = Charlie
 +
}}
 +
</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 #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 />

Latest revision as of 12:04, 2 May 2017

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 = Accueil
}}

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 = Accueil
| 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 = Accueil
| 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 = Accueil
| 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 = Edition de la Carte
| Tab-3 = Charlie
| URL-3 = Main Page
| tab background-3 = red
| 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



Retrieved from "https://wazeopedia.waze.com/wiki/France/index.php?title=Modèle:Tab_top/Examples&oldid=14462"