Difference between revisions of "Template:Tabs"
From EncyclopAtys
(25 intermediate revisions by 4 users not shown) | |||
Line 5: | Line 5: | ||
--><tr><!-- | --><tr><!-- | ||
− | -->{{#if:{{{Tab-1|}}}|{{Tab|URL={{{URL-1}}}|URLType={{{URLType-1}}}|Tab={{{Tab-1}}}|Pic={{{Pic-1|}}}|{{{Tab-1}}}|{{{Tab-2}}}|{{{Tab-3}}}|{{{Tab-4}}}|{{{Tab-5}}}|{{{Tab-6}}}|{{{Tab-7}}}|{{{Tab-8}}}|{{{Tab-9}}}|{{{Tab-10}}}|round={{{round|}}}|bord={{{bord|}}}|bg_Tabs={{{bg_Tab-1|{{{bg_Tabs|}}}}}}|bg_frame={{{bg_frame|}}}|align_tab={{{align_tab|}}}|preums=1|{{#if:{{{blend|}}}|blend= | + | -->{{#if:{{{Tab-1|}}}|{{Tab|URL={{{URL-1}}}|URLType={{{URLType-1}}}|Tab={{{Tab-1}}}|Pic={{{Pic-1|}}}|{{{Tab-1}}}|{{{Tab-2}}}|{{{Tab-3}}}|{{{Tab-4}}}|{{{Tab-5}}}|{{{Tab-6}}}|{{{Tab-7}}}|{{{Tab-8}}}|{{{Tab-9}}}|{{{Tab-10}}}|round={{{round|}}}|bord={{{bord|}}}|bg_Tabs={{{bg_Tab-1|{{{bg_Tabs|}}}}}}|bg_frame={{{bg_frame|}}}|align_tab={{{align_tab|}}}|preums=1|{{#if:{{{blend|}}}|blend=yes|}}}}}}<!-- |
-->{{#if:{{{Tab-2|}}}|{{Tab|URL={{{URL-2}}}|URLType={{{URLType-2}}}|Tab={{{Tab-2}}}|Pic={{{Pic-2|}}}|{{{Tab-1}}}|{{{Tab-2}}}|{{{Tab-3}}}|{{{Tab-4}}}|{{{Tab-5}}}|{{{Tab-6}}}|{{{Tab-7}}}|{{{Tab-8}}}|{{{Tab-9}}}|{{{Tab-10}}}|round={{{round|}}}|bord={{{bord|}}}|bg_Tabs={{{bg_Tab-2|{{{bg_Tabs|}}}}}}|bg_frame={{{bg_frame|}}}|align_tab={{{align_tab|}}}}}}}<!-- | -->{{#if:{{{Tab-2|}}}|{{Tab|URL={{{URL-2}}}|URLType={{{URLType-2}}}|Tab={{{Tab-2}}}|Pic={{{Pic-2|}}}|{{{Tab-1}}}|{{{Tab-2}}}|{{{Tab-3}}}|{{{Tab-4}}}|{{{Tab-5}}}|{{{Tab-6}}}|{{{Tab-7}}}|{{{Tab-8}}}|{{{Tab-9}}}|{{{Tab-10}}}|round={{{round|}}}|bord={{{bord|}}}|bg_Tabs={{{bg_Tab-2|{{{bg_Tabs|}}}}}}|bg_frame={{{bg_frame|}}}|align_tab={{{align_tab|}}}}}}}<!-- | ||
− | -->{{#if:{{{Tab-3|}}}|{{Tab|URL={{{URL-3}}}|URLType={{{URLType-3}}}|Tab={{{Tab-3}}}|Pic={{{Pic-3|}}}|{{{Tab-1}}}|{{{Tab-2}}}|{{{Tab-3}}}|{{{Tab-4}}}|{{{Tab-5}}}|{{{Tab-6}}}|{{{Tab-7}}}|{{{Tab-8}}}|{{{Tab-9}}}|{{{Tab-10}}}|round={{{round|}}}|bord={{{bord|}}}|bg_Tabs={{{bg_Tab-3|{{{bg_Tabs|}}}}}}|bg_frame={{{bg_frame|}}}|align_tab={{{align_tab|}}}|{{#if:{{{blend|}}}|blend= | + | -->{{#if:{{{Tab-3|}}}|{{Tab|URL={{{URL-3}}}|URLType={{{URLType-3}}}|Tab={{{Tab-3}}}|Pic={{{Pic-3|}}}|{{{Tab-1}}}|{{{Tab-2}}}|{{{Tab-3}}}|{{{Tab-4}}}|{{{Tab-5}}}|{{{Tab-6}}}|{{{Tab-7}}}|{{{Tab-8}}}|{{{Tab-9}}}|{{{Tab-10}}}|round={{{round|}}}|bord={{{bord|}}}|bg_Tabs={{{bg_Tab-3|{{{bg_Tabs|}}}}}}|bg_frame={{{bg_frame|}}}|align_tab={{{align_tab|}}}|{{#if:{{{blend|}}}|blend=yes|}}}}}}<!-- |
− | -->{{#if:{{{Tab-4|}}}|{{Tab|URL={{{URL-4}}}|URLType={{{URLType-4}}}|Tab={{{Tab-4}}}|Pic={{{Pic-4|}}}|{{{Tab-1}}}|{{{Tab-2}}}|{{{Tab-3}}}|{{{Tab-4}}}|{{{Tab-5}}}|{{{Tab-6}}}|{{{Tab-7}}}|{{{Tab-8}}}|{{{Tab-9}}}|{{{Tab-10}}}|round={{{round|}}}|bord={{{bord|}}}|bg_Tabs={{{bg_Tab-4|{{{bg_Tabs|}}}}}}|bg_frame={{{bg_frame|}}}|align_tab={{{align_tab|}}}|{{#if:{{{blend|}}}|blend= | + | -->{{#if:{{{Tab-4|}}}|{{Tab|URL={{{URL-4}}}|URLType={{{URLType-4}}}|Tab={{{Tab-4}}}|Pic={{{Pic-4|}}}|{{{Tab-1}}}|{{{Tab-2}}}|{{{Tab-3}}}|{{{Tab-4}}}|{{{Tab-5}}}|{{{Tab-6}}}|{{{Tab-7}}}|{{{Tab-8}}}|{{{Tab-9}}}|{{{Tab-10}}}|round={{{round|}}}|bord={{{bord|}}}|bg_Tabs={{{bg_Tab-4|{{{bg_Tabs|}}}}}}|bg_frame={{{bg_frame|}}}|align_tab={{{align_tab|}}}|{{#if:{{{blend|}}}|blend=yes|}}}}}}<!-- |
− | -->{{#if:{{{Tab-5|}}}|{{Tab|URL={{{URL-5}}}|URLType={{{URLType-5}}}|Tab={{{Tab-5}}}|Pic={{{Pic-5|}}}|{{{Tab-1}}}|{{{Tab-2}}}|{{{Tab-3}}}|{{{Tab-4}}}|{{{Tab-5}}}|{{{Tab-6}}}|{{{Tab-7}}}|{{{Tab-8}}}|{{{Tab-9}}}|{{{Tab-10}}}|round={{{round|}}}|bord={{{bord|}}}|bg_Tabs={{{bg_Tab-5|{{{bg_Tabs|}}}}}}|bg_frame={{{bg_frame|}}}|align_tab={{{align_tab|}}}|{{#if:{{{blend|}}}|blend= | + | -->{{#if:{{{Tab-5|}}}|{{Tab|URL={{{URL-5}}}|URLType={{{URLType-5}}}|Tab={{{Tab-5}}}|Pic={{{Pic-5|}}}|{{{Tab-1}}}|{{{Tab-2}}}|{{{Tab-3}}}|{{{Tab-4}}}|{{{Tab-5}}}|{{{Tab-6}}}|{{{Tab-7}}}|{{{Tab-8}}}|{{{Tab-9}}}|{{{Tab-10}}}|round={{{round|}}}|bord={{{bord|}}}|bg_Tabs={{{bg_Tab-5|{{{bg_Tabs|}}}}}}|bg_frame={{{bg_frame|}}}|align_tab={{{align_tab|}}}|{{#if:{{{blend|}}}|blend=yes|}}}}}}<!-- |
− | -->{{#if:{{{Tab-6|}}}|{{Tab|URL={{{URL-6}}}|URLType={{{URLType-6}}}|Tab={{{Tab-6}}}|Pic={{{Pic-6|}}}|{{{Tab-1}}}|{{{Tab-2}}}|{{{Tab-3}}}|{{{Tab-4}}}|{{{Tab-5}}}|{{{Tab-6}}}|{{{Tab-7}}}|{{{Tab-8}}}|{{{Tab-9}}}|{{{Tab-10}}}|round={{{round|}}}|bord={{{bord|}}}|bg_Tabs={{{bg_Tab-6|{{{bg_Tabs|}}}}}}|bg_frame={{{bg_frame|}}}|align_tab={{{align_tab|}}}|{{#if:{{{blend|}}}|blend= | + | -->{{#if:{{{Tab-6|}}}|{{Tab|URL={{{URL-6}}}|URLType={{{URLType-6}}}|Tab={{{Tab-6}}}|Pic={{{Pic-6|}}}|{{{Tab-1}}}|{{{Tab-2}}}|{{{Tab-3}}}|{{{Tab-4}}}|{{{Tab-5}}}|{{{Tab-6}}}|{{{Tab-7}}}|{{{Tab-8}}}|{{{Tab-9}}}|{{{Tab-10}}}|round={{{round|}}}|bord={{{bord|}}}|bg_Tabs={{{bg_Tab-6|{{{bg_Tabs|}}}}}}|bg_frame={{{bg_frame|}}}|align_tab={{{align_tab|}}}|{{#if:{{{blend|}}}|blend=yes|}}}}}}<!-- |
− | -->{{#if:{{{Tab-7|}}}|{{Tab|URL={{{URL-7}}}|URLType={{{URLType-7}}}|Tab={{{Tab-7}}}|Pic={{{Pic-7|}}}|{{{Tab-1}}}|{{{Tab-2}}}|{{{Tab-3}}}|{{{Tab-4}}}|{{{Tab-5}}}|{{{Tab-6}}}|{{{Tab-7}}}|{{{Tab-8}}}|{{{Tab-9}}}|{{{Tab-10}}}|round={{{round|}}}|bord={{{bord|}}}|bg_Tabs={{{bg_Tab-7|{{{bg_Tabs|}}}}}}|bg_frame={{{bg_frame|}}}|align_tab={{{align_tab|}}}|{{#if:{{{blend|}}}|blend= | + | -->{{#if:{{{Tab-7|}}}|{{Tab|URL={{{URL-7}}}|URLType={{{URLType-7}}}|Tab={{{Tab-7}}}|Pic={{{Pic-7|}}}|{{{Tab-1}}}|{{{Tab-2}}}|{{{Tab-3}}}|{{{Tab-4}}}|{{{Tab-5}}}|{{{Tab-6}}}|{{{Tab-7}}}|{{{Tab-8}}}|{{{Tab-9}}}|{{{Tab-10}}}|round={{{round|}}}|bord={{{bord|}}}|bg_Tabs={{{bg_Tab-7|{{{bg_Tabs|}}}}}}|bg_frame={{{bg_frame|}}}|align_tab={{{align_tab|}}}|{{#if:{{{blend|}}}|blend=yes|}}}}}}<!-- |
− | -->{{#if:{{{Tab-8|}}}|{{Tab|URL={{{URL-8}}}|URLType={{{URLType-8}}}|Tab={{{Tab-8}}}|Pic={{{Pic-8|}}}|{{{Tab-1}}}|{{{Tab-2}}}|{{{Tab-3}}}|{{{Tab-4}}}|{{{Tab-5}}}|{{{Tab-6}}}|{{{Tab-7}}}|{{{Tab-8}}}|{{{Tab-9}}}|{{{Tab-10}}}|round={{{round|}}}|bord={{{bord|}}}|bg_Tabs={{{bg_Tab-8|{{{bg_Tabs|}}}}}}|bg_frame={{{bg_frame|}}}|align_tab={{{align_tab|}}}|{{#if:{{{blend|}}}|blend= | + | -->{{#if:{{{Tab-8|}}}|{{Tab|URL={{{URL-8}}}|URLType={{{URLType-8}}}|Tab={{{Tab-8}}}|Pic={{{Pic-8|}}}|{{{Tab-1}}}|{{{Tab-2}}}|{{{Tab-3}}}|{{{Tab-4}}}|{{{Tab-5}}}|{{{Tab-6}}}|{{{Tab-7}}}|{{{Tab-8}}}|{{{Tab-9}}}|{{{Tab-10}}}|round={{{round|}}}|bord={{{bord|}}}|bg_Tabs={{{bg_Tab-8|{{{bg_Tabs|}}}}}}|bg_frame={{{bg_frame|}}}|align_tab={{{align_tab|}}}|{{#if:{{{blend|}}}|blend=yes|}}}}}}<!-- |
− | -->{{#if:{{{Tab-9|}}}|{{Tab|URL={{{URL-9}}}|URLType={{{URLType-9}}}|Tab={{{Tab-9}}}|Pic={{{Pic-9|}}}|{{{Tab-1}}}|{{{Tab-2}}}|{{{Tab-3}}}|{{{Tab-4}}}|{{{Tab-5}}}|{{{Tab-6}}}|{{{Tab-7}}}|{{{Tab-8}}}|{{{Tab-9}}}|{{{Tab-10}}}|round={{{round|}}}|bord={{{bord|}}}|bg_Tabs={{{bg_Tab-9|{{{bg_Tabs|}}}}}}|bg_frame={{{bg_frame|}}}|align_tab={{{align_tab|}}}|{{#if:{{{blend|}}}|blend= | + | -->{{#if:{{{Tab-9|}}}|{{Tab|URL={{{URL-9}}}|URLType={{{URLType-9}}}|Tab={{{Tab-9}}}|Pic={{{Pic-9|}}}|{{{Tab-1}}}|{{{Tab-2}}}|{{{Tab-3}}}|{{{Tab-4}}}|{{{Tab-5}}}|{{{Tab-6}}}|{{{Tab-7}}}|{{{Tab-8}}}|{{{Tab-9}}}|{{{Tab-10}}}|round={{{round|}}}|bord={{{bord|}}}|bg_Tabs={{{bg_Tab-9|{{{bg_Tabs|}}}}}}|bg_frame={{{bg_frame|}}}|align_tab={{{align_tab|}}}|{{#if:{{{blend|}}}|blend=yes|}}}}}}<!-- |
− | -->{{#if:{{{Tab-10|}}}|{{Tab|URL={{{URL-10}}}|URLType={{{URLType-10}}}|Tab={{{Tab-10}}}|Pic={{{Pic-10|}}}|{{{Tab-1}}}|{{{Tab-2}}}|{{{Tab-3}}}|{{{Tab-4}}}|{{{Tab-5}}}|{{{Tab-6}}}|{{{Tab-7}}}|{{{Tab-8}}}|{{{Tab-9}}}|{{{Tab-10}}}|round={{{round|}}}|bord={{{bord|}}}|bg_Tabs={{{bg_Tab-10|{{{bg_Tabs|}}}}}}|bg_frame={{{bg_frame|}}}|align_tab={{{align_tab|}}}|{{#if:{{{blend|}}}|blend= | + | -->{{#if:{{{Tab-10|}}}|{{Tab|URL={{{URL-10}}}|URLType={{{URLType-10}}}|Tab={{{Tab-10}}}|Pic={{{Pic-10|}}}|{{{Tab-1}}}|{{{Tab-2}}}|{{{Tab-3}}}|{{{Tab-4}}}|{{{Tab-5}}}|{{{Tab-6}}}|{{{Tab-7}}}|{{{Tab-8}}}|{{{Tab-9}}}|{{{Tab-10}}}|round={{{round|}}}|bord={{{bord|}}}|bg_Tabs={{{bg_Tab-10|{{{bg_Tabs|}}}}}}|bg_frame={{{bg_frame|}}}|align_tab={{{align_tab|}}}|{{#if:{{{blend|}}}|blend=yes|}}}}}}<!-- |
--></tr><!-- | --></tr><!-- | ||
--></table><!-- | --></table><!-- | ||
− | --><div style="border:{{{bord|solid 2px # | + | --><div style="border:{{{bord|solid 2px #{{ColorAtys|type=fg|group=Amber}} }}}; padding: 0em; border-top: none; background-color:{{{bg_frame|transparent}}}; color:#000;zoom: 1;overflow: hidden;"><!-- |
--><div style="padding:1ex; "><!-- | --><div style="padding:1ex; "><!-- | ||
− | --></includeonly><noinclude>[[ | + | --></includeonly><!-- _______________________ Docs_______________________ --><noinclude>{{Tabs |
+ | |bord=2px solid #{{ColorAtys|type=dark|group=tryker}} | ||
+ | |bg_frame=#{{ColorAtys|type=bg|group=tryker}} | ||
+ | |round=5em | ||
+ | |align_tab=center | ||
+ | |||
+ | |Tab-1={{3DText|text='''Tab#1: the Tabs Template<br />It is the ''active'' tab'''}} | ||
+ | |URL-1=Template:Tabs | ||
+ | |bg_Tab-1=#{{ColorAtys|type=light|group=tryker}} | ||
+ | |Pic-1=dummy.png | ||
+ | |||
+ | |Tab-2={{3DText|text='''''Tab#2: the Tab Template'''''<br />This tab is ''inactive''}} | ||
+ | |URL-2=Template:Tab | ||
+ | |bg_Tab-2=#{{ColorAtys|type=light|group=fyros}} | ||
+ | |Pic-2=UnderConstruction.png | ||
+ | }}{{Trad | ||
+ | |DE=Vorlage:Tabs | ||
+ | |EN=Template:Tabs | ||
+ | |ES=Plantilla:Tabs | ||
+ | |FR=Modèle:Tabs | ||
+ | |RU=Шаблон:Tabs | ||
+ | }} | ||
+ | <!-- {| class="wikitable" style="margin: auto; width: 100%; background-color:transparent; text-align:center;font: bold 2em serif;;" | ||
+ | |- | ||
+ | | <span style="font: bold 2em serif; color: crimson;">↑</span> This is Tab#1 <span style="font: bold 2em serif; color: crimson;">↑</span> || <span style="font: bold 2em serif; color: crimson;">↑</span> This is Tab#2 <span style="font: bold 2em serif; color: crimson;">↑</span> | ||
+ | |} --> | ||
+ | :This template is designed to assemble a set of tabs (10 max) such as the ones on this same page. Lets explain how it works on this example. It uses the [[:Template:Tab|Tab "sub"-template]]. | ||
+ | |||
+ | ==Tabs code== | ||
+ | <syntaxhighlight lang="xml"> {{Tabs | ||
+ | |bord=2px solid #{{ColorAtys|type=dark|group=tryker}} | ||
+ | |bg_frame=#{{ColorAtys|type=bg|group=tryker}} | ||
+ | |round=5em | ||
+ | |align_tab=center | ||
+ | <!-- --> | ||
+ | |Tab-1={{3DText|text='''Tab#1 the Tabs Template<br />It is the ''active'' tab'''}} | ||
+ | |URL-1=Template:Tabs | ||
+ | |bg_Tab-1=#{{ColorAtys|type=light|group=tryker}} | ||
+ | |Pic-1=dummy.png | ||
+ | <!-- --> | ||
+ | |Tab-2={{3DText|text='''''Tab#2: the Tab Template'''''<br />This tab is ''inactive''}} | ||
+ | |URL-2=Template:Tab | ||
+ | |bg_Tab-2=#{{ColorAtys|type=light|group=fyros}} | ||
+ | |Pic-2=UnderConstruction.png | ||
+ | }}</syntaxhighlight> | ||
+ | |||
+ | ==Detailed code== | ||
+ | {| class="wikitable" | ||
+ | |+Code explained style="font: italic 1em serif; color:#e76700; "|'''Code explained''' | ||
+ | |- | ||
+ | ! <code>Code</code> !! Effect !! Range | ||
+ | |- | ||
+ | | <code><nowiki>{{Tabs</nowiki></code> || - || Start of template call | ||
+ | |- | ||
+ | | <code><nowiki>|bord=2px solid #{{ColorAtys|type=dark|group=tryker}}</nowiki></code> || defines border line type, thickness and colour || rowspan="4"|the ''whole'' framed page | ||
+ | |- | ||
+ | | <code><nowiki>|bg_frame=#{{ColorAtys|type=bg|group=tryker}}</nowiki></code> || defines page background colour : here bg (background) tryker blue as defined in [[:Template:ColorAtys|ColorAtys template]]. | ||
+ | |- | ||
+ | | <code><nowiki>|round=5em</nowiki></code> || Radius of rounded corners<br />Note that only tab corners are rounded. | ||
+ | |- | ||
+ | | <code><nowiki>|align_tab=center</nowiki></code> || text alignment of tab names | ||
+ | |- | ||
+ | | <code><nowiki><!-- --></nowiki></code> || empty comment (used as separator) || to make the code easier to read | ||
+ | |- | ||
+ | | <code><nowiki>|Tab-1={{3DText|text='''Tab#1 the Tabs Template<br />It is the ''active'' tab'''}}</nowiki></code> || Tab name || rowspan="4"|This single tab<br /><small>Note that the parameters are numbered. You can have up to 10 tabs as this one.</small> | ||
+ | |- | ||
+ | | <code><nowiki>|URL-1=Template:Tabs</nowiki></code> || The url of the page in which the tab is "active".<br /> The url is the one of the actual page, the tab is "active", thus its background is the page body one. | ||
+ | |- | ||
+ | | <code><nowiki>|bg_Tab-1=#{{ColorAtys|type=light|group=tryker}}</nowiki></code> || Tab background color: here light tryker blue, effective only if url differs from actual page. | ||
+ | |- | ||
+ | | <code><nowiki>|Pic-1=dummy.png </nowiki></code> || An icon to be displayed left of the tab title. | ||
+ | |- | ||
+ | | <code><nowiki><!-- --></nowiki></code> || separator || to make the code easier to read | ||
+ | |- | ||
+ | | <code><nowiki>|Tab-2={{3DText|text='''''Tab#2: the Tab Template'''''<br />This tab is ''inactive''}}</nowiki></code> || Second tab title. || rowspan="4"|This single tab | ||
+ | |- | ||
+ | | <code><nowiki>|URL-2=Template:Tab</nowiki></code> || This page is not the actual page, the tab is "inactive"<br /> "Inactive" tabs are separated from the page body by an horizontal line. | ||
+ | |- | ||
+ | | <code><nowiki>|bg_Tab-2=#{{ColorAtys|type=light|group=fyros}}</nowiki></code> || Tab background colour: here light fyros orange | ||
+ | |- | ||
+ | | <code><nowiki>|Pic-2=UnderConstruction.png</nowiki></code> || Tab 2 icon | ||
+ | |- | ||
+ | | <code><nowiki>}}</nowiki></code> || - || End of Template. | ||
+ | <!-- |- | ||
+ | | <code><nowiki>Example</nowiki></code> || Example || Example --> | ||
+ | |} | ||
+ | |||
+ | |||
+ | ==Examples== | ||
+ | *Guild page: [[Guild:Ballistic Mystix|Ballistic Mystix]] | ||
+ | *With 2 tabs, no 3D Text: [[Wheel of fortune]] | ||
+ | [[Category:Tab]][[Category:Template:Tab]]</noinclude> |
Latest revision as of 13:55, 27 February 2022
Tab#1: the Tabs Template It is the active tab | Tab#2: the Tab Template This tab is inactive |