Template:TabRow: Difference between revisions

From TowersWiki

mNo edit summary
mNo edit summary
 
(10 intermediate revisions by the same user not shown)
Line 1: Line 1:
{{#css:
{{:Template:TabRow/themes.scss}}
}}
<noinclude>
<noinclude>
This template creates a row of [[Template:Tab]]s.  These tabs can be clicked, which will then display the respective [[Template:TabPane]].
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:TabPane]]s to the page.  Note: the name field of each [[Template:TabPane]] must match the names of the tabs given to your TabRow.
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 ===
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:
== 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
|name=homid
|name=Homid
| This is a pretty neat guy
| This is a pretty neat guy
}}
}}
{{TabPanel
{{TabPanel
|row=forms
|row=forms
|name=glabro
|name=Glabro
| This is a pretty neat guy in Glabro!
| This is a pretty neat guy in Glabro!
}}
}}
{{TabPanel
{{TabPanel
|row=forms
|row=forms
|name=crinos
|name=Crinos
| Oh noes! Warform!
| Oh noes! Warform!
}}
}}{{TabPanel
{{TabPanel
|row=forms
|row=forms
|name=hispo
|name=Hispo
| Pet the pretty dire wolf, it'll be fine!
| Pet the pretty dire wolf, it'll be fine!
}}
}}{{TabPanel
{{TabPanel
|row=forms
|row=forms
|name=lupus
|name=Lupus
| Woof Woof, I am wolf.
| Woof Woof, I am wolf.
}}</pre>
}}</pre>
This will create a 5-panel TabRow, as seen here:
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
|name=homid
|name=Homid
| This is a pretty neat guy
| This is a pretty neat guy
}}
}}
{{TabPanel
{{TabPanel
|row=forms
|row=forms
|name=glabro
|name=Glabro
| This is a pretty neat guy in Glabro!
| This is a pretty neat guy in Glabro!
}}
}}
{{TabPanel
{{TabPanel
|row=forms
|row=forms
|name=crinos
|name=Crinos
| Oh noes! Warform!
| Oh noes! Warform!
}}{{TabPanel
}}{{TabPanel
|row=forms
|row=forms
|name=hispo
|name=Hispo
| Pet the pretty dire wolf, it'll be fine!
| Pet the pretty dire wolf, it'll be fine!
}}{{TabPanel
}}{{TabPanel
|row=forms
|row=forms
|name=lupus
|name=Lupus
| Woof Woof, I am wolf.
| Woof Woof, I am wolf.
}}
}}
Line 67: Line 78:
</noinclude>
</noinclude>
<includeonly>{{#css:
<includeonly>{{#css:
.tabRow {
.tabRow.{{{name|}}} {
   display:flex;
   display:flex;
   flex-direction: row;
   flex-direction: row;
  width: 100%;
  justify-content: center;
}
.tab.{{{name|}}} {
  padding-left: 5px;
  padding-right: 10px;
}
.tabRow.{{{name|}}}:has(#{{{name|}}}_{{{1|}}}:target) ~ #{{{name|}}}_{{{1|}}}_panel {
  display: block;
}
.tabRow.{{{name|}}}:has(#{{{name|}}}_{{{2|}}}:target) ~ #{{{name|}}}_{{{2|}}}_panel {
  display: block;
}
.tabRow.{{{name|}}}:has(#{{{name|}}}_{{{3|}}}:target) ~ #{{{name|}}}_{{{3|}}}_panel {
  display: block;
}
.tabRow.{{{name|}}}:has(#{{{name|}}}_{{{4|}}}:target) ~ #{{{name|}}}_{{{4|}}}_panel {
  display: block;
}
.tabRow.{{{name|}}}:has(#{{{name|}}}_{{{5|}}}:target) ~ #{{{name|}}}_{{{5|}}}_panel {
  display: block;
}
.tabRow.{{{name|}}}:has(#{{{name|}}}_{{{6|}}}:target) ~ #{{{name|}}}_{{{6|}}}_panel {
  display: block;
}
.tabRow.{{{name|}}}:has(#{{{name|}}}_{{{7|}}}:target) ~ #{{{name|}}}_{{{7|}}}_panel {
  display: block;
}
.tabRow.{{{name|}}}:has(#{{{name|}}}_{{{8|}}}:target) ~ #{{{name|}}}_{{{8|}}}_panel {
  display: block;
}
.tabRow.{{{name|}}}:has(#{{{name|}}}_{{{9|}}}:target) ~ #{{{name|}}}_{{{9|}}}_panel {
  display: block;
}
}
#{{{1|}}}:target ~ #{{{1|}}}_panel {
.tabRow.{{{name|}}}:has(#{{{name|}}}_{{{10|}}}:target) ~ #{{{name|}}}_{{{10|}}}_panel {
   background-color:blue;
   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!):


Homid
Glabro
Crinos
Hispo
Lupus
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.


Retrieved from "https://towersmux.net/w/index.php?title=Template:TabRow&oldid=1467"