Template:TabRow: Difference between revisions

From TowersWiki

No edit summary
No edit summary
Line 83: Line 83:
}
}


.tabRow.{{name|}}:has(#{{{name|}}}_{{{1|}}}:target) ~ #{{{name|}}}_{{{1|}}}_panel {
.tabRow.{{{name|}}}:has(#{{{name|}}}_{{{1|}}}:target) ~ #{{{name|}}}_{{{1|}}}_panel {
   display: block;
   display: block;
}
}
.tabRow.{{name|}}:has(#{{{name|}}}_{{{2|}}}:target) ~ #{{{name|}}}_{{{2|}}}_panel {
.tabRow.{{{name|}}}:has(#{{{name|}}}_{{{2|}}}:target) ~ #{{{name|}}}_{{{2|}}}_panel {
   display: block;
   display: block;
}
}
.tabRow.{{name|}}:has(#{{{name|}}}_{{{3|}}}:target) ~ #{{{name|}}}_{{{3|}}}_panel {
.tabRow.{{{name|}}}:has(#{{{name|}}}_{{{3|}}}:target) ~ #{{{name|}}}_{{{3|}}}_panel {
   display: block;
   display: block;
}
}
.tabRow.{{name|}}:has(#{{{name|}}}_{{{4|}}}:target) ~ #{{{name|}}}_{{{4|}}}_panel {
.tabRow.{{{name|}}}:has(#{{{name|}}}_{{{4|}}}:target) ~ #{{{name|}}}_{{{4|}}}_panel {
   display: block;
   display: block;
}
}
.tabRow.{{name|}}:has(#{{{name|}}}_{{{5|}}}:target) ~ #{{{name|}}}_{{{5|}}}_panel {
.tabRow.{{{name|}}}:has(#{{{name|}}}_{{{5|}}}:target) ~ #{{{name|}}}_{{{5|}}}_panel {
   display: block;
   display: block;
}
}
.tabRow.{{name|}}:has(#{{{name|}}}_{{{6|}}}:target) ~ #{{{name|}}}_{{{6|}}}_panel {
.tabRow.{{{name|}}}:has(#{{{name|}}}_{{{6|}}}:target) ~ #{{{name|}}}_{{{6|}}}_panel {
   display: block;
   display: block;
}
}
.tabRow.{{name|}}:has(#{{{name|}}}_{{{7|}}}:target) ~ #{{{name|}}}_{{{7|}}}_panel {
.tabRow.{{{name|}}}:has(#{{{name|}}}_{{{7|}}}:target) ~ #{{{name|}}}_{{{7|}}}_panel {
   display: block;
   display: block;
}
}
.tabRow.{{name|}}:has(#{{{name|}}}_{{{8|}}}:target) ~ #{{{name|}}}_{{{8|}}}_panel {
.tabRow.{{{name|}}}:has(#{{{name|}}}_{{{8|}}}:target) ~ #{{{name|}}}_{{{8|}}}_panel {
   display: block;
   display: block;
}
}
.tabRow.{{name|}}:has(#{{{name|}}}_{{{9|}}}:target) ~ #{{{name|}}}_{{{9|}}}_panel {
.tabRow.{{{name|}}}:has(#{{{name|}}}_{{{9|}}}:target) ~ #{{{name|}}}_{{{9|}}}_panel {
   display: block;
   display: block;
}
}
.tabRow.{{name|}}:has(#{{{name|}}}_{{{10|}}}:target) ~ #{{{name|}}}_{{{10|}}}_panel {
.tabRow.{{{name|}}}:has(#{{{name|}}}_{{{10|}}}:target) ~ #{{{name|}}}_{{{10|}}}_panel {
   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|}}} }} }}{{#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>

Revision as of 06:03, 21 July 2024

This template creates a row of Template:Tabs. These tabs can be clicked, which will then display the respective Template:TabPane.

Usage

The TabRow uses the following syntax:

{{TabRow |<Tab1Name>|<Tab2Name>|...<TabNName>|name=<name>}}

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:TabPanes to the page. Note: the name field of each Template:TabPane must match the names of the tabs given to your TabRow.

Example:

{{TabRow |Homid|Glabro|Crinos|Hispo|Lupus|name=forms}}
{{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:

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.