Template:TabRow: Difference between revisions
From TowersWiki
(Adding CSS call to themes.scss) |
mNo edit summary |
||
| (2 intermediate revisions by the same user not shown) | |||
| Line 4: | Line 4: | ||
<noinclude> | <noinclude> | ||
This template creates a row of [[Template:Tab]]s. These tabs can be clicked, which will then display the respective [[Template: | This template creates a row of [[Template:Tab]]s. These tabs can be clicked, which will then display the respective [[Template:TabPanel]]. | ||
== Usage == | == Usage == | ||
The TabRow uses the following syntax: | The TabRow uses the following syntax: | ||
<pre> | <pre> | ||
{{TabRow |<Tab1Name>|<Tab2Name>|...<TabNName>|name=<name>}} | {{TabRow |<Tab1Name>|<Tab2Name>|...<TabNName>|name=<name>|theme=<theme>}} | ||
</pre> | </pre> | ||
The <name> field gives the TabRow a name to help with styling. | The <name> field gives the TabRow a name to help with styling. | ||
Give each tab a name via <Tab1Name>, <Tab2Name>, etc, up to <Tab10Name>. | Give each tab a name via <Tab1Name>, <Tab2Name>, etc, up to <Tab10Name>. | ||
From there, add your [[Template: | From there, add your [[Template:TabPanel]]s to the page. Note: the name field of each [[Template:TabPanel]] must match the names of the tabs given to your TabRow, and the CASE-SENSITIVE. | ||
=== Themes === | |||
Example | There are currently 4 themes for your tabs (they are case-sensitive!): | ||
* queen | |||
* skyline | |||
* headline | |||
* vintage | |||
They've been styled to fit into the [[Template:LokiCharPage]] with the same theme names. | |||
== Example == | |||
<pre> | <pre> | ||
{{TabRow |Homid|Glabro|Crinos|Hispo|Lupus|name=forms}} | {{TabRow |Homid|Glabro|Crinos|Hispo|Lupus|name=forms|theme=vintage}} | ||
{{TabPanel | {{TabPanel | ||
|row=forms | |row=forms | ||
| Line 43: | Line 51: | ||
}}</pre> | }}</pre> | ||
This will create a 5-panel TabRow, as seen here (click on one of the links to see it in action!): | This will create a 5-panel TabRow, as seen here (click on one of the links to see it in action!): | ||
{{TabRow |Homid|Glabro|Crinos|Hispo|Lupus|name=forms}} | {{TabRow |Homid|Glabro|Crinos|Hispo|Lupus|name=forms|theme=vintage}} | ||
{{TabPanel | {{TabPanel | ||
|row=forms | |row=forms | ||
| Line 80: | Line 88: | ||
padding-left: 5px; | padding-left: 5px; | ||
padding-right: 10px; | padding-right: 10px; | ||
} | } | ||
| Line 116: | Line 120: | ||
display: block; | display: block; | ||
} | } | ||
}}<div class="tabRow {{{name|}}}">{{#if: {{{1|}}}|{{ :Template:Tab |name={{{name|}}} |pos={{{1|}}} }} }}{{#if: {{{2|}}}|{{ :Template:Tab |name={{{name|}}} |pos={{{2|}}} }} }}{{#if: {{{3|}}}|{{ :Template:Tab |name={{{name|}}} |pos={{{3|}}} }} }}{{#if: {{{4|}}}|{{ :Template:Tab |name={{{name|}}} |pos={{{4|}}} }} }}{{#if: {{{5|}}}|{{ :Template:Tab |name={{{name|}}} |pos={{{5|}}} }} }}{{#if: {{{6|}}}|{{ :Template:Tab |name={{{name|}}} |pos={{{6|}}} }} }}{{#if: {{{7|}}}|{{ :Template:Tab |name={{{name|}}} |pos={{{7|}}} }} }}{{#if: {{{8|}}}|{{ :Template:Tab |name={{{name|}}} |pos={{{8|}}} }} }}{{#if: {{{9|}}}|{{ :Template:Tab |name={{{name|}}} |pos={{{9|}}} }} }}{{#if: {{{10|}}}|{{ :Template:Tab |name={{{name|}}} |pos={{{10|}}} }} }}</div></includeonly> | }}<div class="tabRow {{{name|}}}">{{#if: {{{1|}}}|{{ :Template:Tab |name={{{name|}}} |pos={{{1|}}} |theme={{{theme|}}} }} }}{{#if: {{{2|}}}|{{ :Template:Tab |name={{{name|}}} |pos={{{2|}}} |theme={{{theme|}}} }} }}{{#if: {{{3|}}}|{{ :Template:Tab |name={{{name|}}} |pos={{{3|}}} |theme={{{theme|}}} }} }}{{#if: {{{4|}}}|{{ :Template:Tab |name={{{name|}}} |pos={{{4|}}} |theme={{{theme|}}} }} }}{{#if: {{{5|}}}|{{ :Template:Tab |name={{{name|}}} |pos={{{5|}}} |theme={{{theme|}}} }} }}{{#if: {{{6|}}}|{{ :Template:Tab |name={{{name|}}} |pos={{{6|}}} |theme={{{theme|}}} }} }}{{#if: {{{7|}}}|{{ :Template:Tab |name={{{name|}}} |pos={{{7|}}} |theme={{{theme|}}} }} }}{{#if: {{{8|}}}|{{ :Template:Tab |name={{{name|}}} |pos={{{8|}}} |theme={{{theme|}}} }} }}{{#if: {{{9|}}}|{{ :Template:Tab |name={{{name|}}} |pos={{{9|}}} |theme={{{theme|}}} }} }}{{#if: {{{10|}}}|{{ :Template:Tab |name={{{name|}}} |pos={{{10|}}} |theme={{{theme|}}} }} }}</div></includeonly> | ||
Latest revision as of 02:12, 10 August 2024
This template creates a row of Template:Tabs. These tabs can be clicked, which will then display the respective Template:TabPanel.
Usage
The TabRow uses the following syntax:
{{TabRow |<Tab1Name>|<Tab2Name>|...<TabNName>|name=<name>|theme=<theme>}}
The <name> field gives the TabRow a name to help with styling. Give each tab a name via <Tab1Name>, <Tab2Name>, etc, up to <Tab10Name>. From there, add your Template:TabPanels to the page. Note: the name field of each Template:TabPanel must match the names of the tabs given to your TabRow, and the CASE-SENSITIVE.
Themes
There are currently 4 themes for your tabs (they are case-sensitive!):
- queen
- skyline
- headline
- vintage
They've been styled to fit into the Template:LokiCharPage with the same theme names.
Example
{{TabRow |Homid|Glabro|Crinos|Hispo|Lupus|name=forms|theme=vintage}}
{{TabPanel
|row=forms
|name=Homid
| This is a pretty neat guy
}}
{{TabPanel
|row=forms
|name=Glabro
| This is a pretty neat guy in Glabro!
}}
{{TabPanel
|row=forms
|name=Crinos
| Oh noes! Warform!
}}{{TabPanel
|row=forms
|name=Hispo
| Pet the pretty dire wolf, it'll be fine!
}}{{TabPanel
|row=forms
|name=Lupus
| Woof Woof, I am wolf.
}}
This will create a 5-panel TabRow, as seen here (click on one of the links to see it in action!):
This is a pretty neat guy
This is a pretty neat guy in Glabro!
Oh noes! Warform!
Pet the pretty dire wolf, it'll be fine!
Woof Woof, I am wolf.
