Template:Example infobox 4/doc

From Support Wiki
Jump to navigation Jump to search

This infobox demonstrates implementing a tabber to an infobox.

Summary

To accomplish a tabbed layout, you will use the following tags:

  • <panel> - Wraps the content you wish to put in tabs.
  • <section> - Holds the content of a single tab (Ex. image, data, etc).
  • <label> - Place this inside a <section> to define the text of that tab button. Labels default to their zero-based index if left blank.

In addition, the name attribute is allowed on both <panel> and <section> to assign data-item-name on a tag in the outputted HTML.

Expand the table below for a list of valid child tags that can be used within a <panel> or <section>

Table of valid tags  
Parent tag Child tags
<panel>
  • <header>
  • <section>
<section>
  • <title>
  • <data>
  • <label>
  • <image>
  • <group>
  • <header>
  • <navigation>

Sample code

Simplified code samples of both the infobox and template code used to create the example seen on this page:

Infobox code:

<infobox>
	<title source="title">
		<default>{{PAGENAME}}</default>
	</title>
	<image source="image"/>

<panel>
	<section>
		<label>Easy mode</label>
		<data source="health-easy">
			<label>Easy mode Health</label>
		</data>
		<data source="damage-easy">
			<label>Easy mode Damage</label>
		</data>
	</section>
	<section>
		<label>Hard mode</label>
		<data source="health-hard">
			<label>Hard mode Health</label>
		</data>
		<data source="damage-hard">
			<label>Hard mode Damage</label>
		</data>
	</section>
</panel>

</infobox>

Template parameter code:

{{Example infobox 4
| title = Dragon
| image = Cargo-sample-dragon.png
| health-easy = 250
| health-hard = 1000
| damage-easy = 50
| damage-hard = 200
}}