Community Central
Don't have an account?
Register
Register
Community Central
Community Central
35,364
pages
in: Help, Editing
English

Changes: Help:Infoboxes/Tags

< Help:Infoboxes
Back to page
Sign in to edit
(Use ACE Editor recognized tabs | note that <navigation> does not display in horizontal groups | use WP style reference placement)
Tag: Help
(remove nowiki tags in favor to simple escaping)
Tag: Help
(7 intermediate revisions by 6 users not shown)
Line 3: Line 3:
 
All infobox fields should be declared using [[Wikipedia:XML|XML]] convention, with [[Wikipedia:HTML attribute|attributes]] used for field configuration.<ref>[[wikibooks:XML - Managing Data Exchange/A single entity#Introduction|Wikibooks xml introduction]]</ref>
  
All infobox fields should be declared using [[Wikipedia:XML|XML]] convention, with [[Wikipedia:HTML attribute|attributes]] used for field configuration.<ref>[[wikibooks:XML - Managing Data Exchange/A single entity#Introduction|Wikibooks xml introduction]]</ref>
   
−
==<code><nowiki><infobox></nowiki></code>==
 +
==<code>&lt;infobox&gt;</code>==
−
The <code><nowiki><infobox></nowiki></code> tag holds all others and delimits the scope of the infobox.
 +
The <code>&lt;infobox&gt;</code> tag holds all others and delimits the scope of the infobox.
   
 
===Valid tags===
  
===Valid tags===
Line 14: Line 14:
 
| None
  
| None
 
|
  
|
−
* <code><nowiki><title></nowiki></code>
 +
* <code>&lt;title&gt;</code>
−
* <code><nowiki><image></nowiki></code>
 +
* <code>&lt;image&gt;</code>
−
* <code><nowiki><header></nowiki></code>
 +
* <code>&lt;header&gt;</code>
−
* <code><nowiki><navigation></nowiki></code>
 +
* <code>&lt;navigation&gt;</code>
−
* <code><nowiki><data></nowiki></code>
 +
* <code>&lt;data&gt;</code>
−
* <code><nowiki><group></nowiki></code>
 +
* <code>&lt;group&gt;</code>
  +
* <code>&lt;panel&gt;</code>
 
|}
  
|}
   
 
===Attributes===
  
===Attributes===
 
; <code>theme</code>
  
; <code>theme</code>
−
: The name of the theme to apply. Converted to the form <code>.pi-theme-$1</code>, with spaces transformed into hyphens (-). Does not overwrite <code>theme-source</code>.
 +
: The name of the theme to apply. Adds a class to the infobox of the form <code>.pi-theme-$1</code>, with spaces transformed into hyphens (-). Does not overwrite <code>theme-source</code> or <code>type</code>.
 
; <code>theme-source</code>
  
; <code>theme-source</code>
−
: The name of the parameter to use as a theme. Does not overwrite <code>theme</code>.
 +
: The name of the parameter to use as a theme. Adds a class to the infobox of the form <code>.pi-theme-$1</code>, with spaces transformed into hyphens (-). Does not overwrite <code>theme</code> or <code>type</code>.
−
; <code>layout</code>
 +
; <code>type</code>
  +
: The name of the type to apply. Adds a class to the infobox of the form <code>.type-$1</code>, with spaces transformed into hyphens (-). Does not overwrite <code>theme</code> or <code>theme-source</code>.
⚫
: Possible values: <code>default</code>, <code>stacked</code>.
  
 
; <code>accent-color-source</code>
  
; <code>accent-color-source</code>
 
: The name of the parameter to use as an accent color.
  
: The name of the parameter to use as an accent color.
⚫
; <code>accent-color-text-source</code>
  
⚫
: The name of the parameter to use as a text accent color.
  
 
; <code>accent-color-default</code>
  
; <code>accent-color-default</code>
 
: The default accent color. Accepts a 3- or 6-digit hexadecimal color code, e.g. <code><nowiki>#f00</nowiki></code> or <code><nowiki>#ff0000</nowiki></code>.
  
: The default accent color. Accepts a 3- or 6-digit hexadecimal color code, e.g. <code><nowiki>#f00</nowiki></code> or <code><nowiki>#ff0000</nowiki></code>.
  ⚫
; <code>accent-color-text-source</code>
  ⚫
: The name of the parameter to use as a text accent color.
 
; <code>accent-color-text-default</code>
  
; <code>accent-color-text-default</code>
 
: The default text accent color. Accepts a 3- or 6-digit hexadecimal color code, e.g. <code><nowiki>#f00</nowiki></code> or <code><nowiki>#ff0000</nowiki></code>.
  
: The default text accent color. Accepts a 3- or 6-digit hexadecimal color code, e.g. <code><nowiki>#f00</nowiki></code> or <code><nowiki>#ff0000</nowiki></code>.
  +
; <code>layout</code>
  ⚫
: Possible values: <code>default</code>, <code>stacked</code>.
  +
; <code>name</code>
  +
: Internal name for the element and its children. Assigned to the <code>data-item-name</code> attribute in the resulting HTML.
   
 
===HTML output===
  
===HTML output===
Line 49: Line 54:
 
{{defn|1=<syntaxhighlight lang="html5">
  
{{defn|1=<syntaxhighlight lang="html5">
 
<aside class="portable-infobox pi-background pi-theme-wikia pi-layout-default">
  
<aside class="portable-infobox pi-background pi-theme-wikia pi-layout-default">
−
<h2 class="pi-item pi-item-spacing pi-title">Title</h2>
 +
<h2 class="pi-item pi-item-spacing pi-title" data-source="title_source">Title</h2>
 
</aside>
  
</aside>
 
</syntaxhighlight>}}
  
</syntaxhighlight>}}
 
{{glossary end}}
  
{{glossary end}}
   
−
==<code><nowiki><title></nowiki></code>==
 +
==<code>&lt;title&gt;</code>==
−
The <code><nowiki><title></nowiki></code> tag states infobox title. Images used in <code><nowiki><title></nowiki></code> tags do not appear on mobile.<ref>[[w:c:p:Thread:3033#15|Portability Hub Office Hours, 2015-11-26]]</ref>
 +
The <code>&lt;title&gt;</code> tag states infobox title. Images used in <code>&lt;title&gt;</code> tags do not appear on mobile.<ref>[[w:c:p:Thread:3033#15|Portability Hub Office Hours, 2015-11-26]]</ref>
   
 
===Valid tags===
  
===Valid tags===
Line 64: Line 69:
 
|-
  
|-
 
|
  
|
−
* <code><nowiki><infobox></nowiki></code>
 +
* <code>&lt;infobox&gt;</code>
−
* <code><nowiki><group></nowiki></code>
 +
* <code>&lt;group&gt;</code>
 
|
  
|
−
* <code><nowiki><default></nowiki></code>
 +
* <code>&lt;default&gt;</code>
−
* <code><nowiki><format></nowiki></code>
 +
* <code>&lt;format&gt;</code>
 
|}
  
|}
   
Line 74: Line 79:
 
; <code>source</code>
  
; <code>source</code>
 
: The name of the parameter to use.
  
: The name of the parameter to use.
  +
; <code>name</code>
  +
: Internal name for the element and its children. Assigned to the <code>data-item-name</code> attribute in the resulting HTML.
   
 
===HTML output===
  
===HTML output===
Line 85: Line 92:
 
{{term|1=Output}}
  
{{term|1=Output}}
 
{{defn|1=<syntaxhighlight lang="html5">
  
{{defn|1=<syntaxhighlight lang="html5">
−
<h2 class="pi-item pi-item-spacing pi-title">Page name</h2>
 +
<h2 class="pi-item pi-item-spacing pi-title" data-source="title_source">Page name</h2>
 
</syntaxhighlight>}}
  
</syntaxhighlight>}}
 
{{glossary end}}
  
{{glossary end}}
   
−
==<code><nowiki><data></nowiki></code>==
 +
==<code>&lt;data&gt;</code>==
−
The <code><nowiki><data></nowiki></code> tag is the standard key-value tag.
 +
The <code>&lt;data&gt;</code> tag is the standard key-value tag.
   
 
===Valid tags===
  
===Valid tags===
Line 99: Line 106:
 
|-
  
|-
 
|
  
|
−
* <code><nowiki><infobox></nowiki></code>
 +
* <code>&lt;infobox&gt;</code>
−
* <code><nowiki><group></nowiki></code>
 +
* <code>&lt;group&gt;</code>
 
|
  
|
−
* <code><nowiki><default></nowiki></code>
 +
* <code>&lt;default&gt;</code>
−
* <code><nowiki><label></nowiki></code>
 +
* <code>&lt;label&gt;</code>
−
* <code><nowiki><format></nowiki></code>
 +
* <code>&lt;format&gt;</code>
 
|}
  
|}
   
Line 114: Line 121:
 
; <code>layout</code>
  
; <code>layout</code>
 
: Possible values: <code>default</code>. Only available in smart groups.
  
: Possible values: <code>default</code>. Only available in smart groups.
  +
; <code>name</code>
  +
: Internal name for the element and its children. Assigned to the <code>data-item-name</code> attribute in the resulting HTML.
   
 
===HTML output===
  
===HTML output===
Line 126: Line 135:
 
{{term|1=Output}}
  
{{term|1=Output}}
 
{{defn|1=<syntaxhighlight lang="html5">
  
{{defn|1=<syntaxhighlight lang="html5">
−
<div class="pi-item pi-item-spacing pi-data pi-border-color">
 +
<div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="name">
−
<h3 class="pi-secondary-font pi-data-label">First name</h3>
 +
<h3 class="pi-data-label pi-secondary-font">First name</h3>
−
<div class="pi-font pi-data-value">John</div>
 +
<div class="pi-data-value pi-font">John</div>
 
</div>
  
</div>
 
</syntaxhighlight>}}
  
</syntaxhighlight>}}
 
{{glossary end}}
  
{{glossary end}}
   
−
==<code><nowiki><label></nowiki></code>==
 +
==<code>&lt;label&gt;</code>==
−
The <code><nowiki><label></nowiki></code> tag can be used only inside other tags, check child tags column for more info. Accepts '''wikitext'''.
 +
The <code>&lt;label&gt;</code> tag can be used only inside other tags, check child tags column for more info. Accepts '''wikitext'''.
   
 
===Valid tags===
  
===Valid tags===
Line 143: Line 152:
 
|-
  
|-
 
|
  
|
−
* <code><nowiki><data></nowiki></code>
 +
* <code>&lt;data&gt;</code>
  +
* <code>&lt;section&gt;</code>
 
| None
  
| None
 
|}
  
|}
Line 158: Line 168:
 
{{term|1=Output}}
  
{{term|1=Output}}
 
{{defn|1=<syntaxhighlight lang="html5">
  
{{defn|1=<syntaxhighlight lang="html5">
−
<h3 class="pi-secondary-font pi-data-label">First name</h3>
 +
<h3 class="pi-data-label pi-secondary-font">First name</h3>
 
</syntaxhighlight>}}
  
</syntaxhighlight>}}
 
{{glossary end}}
  
{{glossary end}}
   
−
==<code><nowiki><default></nowiki></code>==
 +
==<code>&lt;default&gt;</code>==
−
The <code><nowiki><default></nowiki></code> tag text is used when "<code>source</code>" data is not specified, can be used only inside other tags, check child tags column for more info. Accepts '''wikitext'''.
 +
The <code>&lt;default&gt;</code> tag text is used when "<code>source</code>" data is not specified, can be used only inside other tags, check child tags column for more info. Accepts '''wikitext'''.
   
 
===Valid tags===
  
===Valid tags===
Line 172: Line 182:
 
|-
  
|-
 
|
  
|
−
* <code><nowiki><title></nowiki></code>
 +
* <code>&lt;title&gt;</code>
−
* <code><nowiki><data></nowiki></code>
 +
* <code>&lt;data&gt;</code>
−
* <code><nowiki><image></nowiki></code>
 +
* <code>&lt;image&gt;</code>
−
* <code><nowiki><alt></nowiki></code>
 +
* <code>&lt;alt&gt;</code>
−
* <code><nowiki><caption></nowiki></code>
 +
* <code>&lt;caption&gt;</code>
 
| None
  
| None
 
|}
  
|}
Line 191: Line 201:
 
{{term|1=Output}}
  
{{term|1=Output}}
 
{{defn|1=<syntaxhighlight lang="html5">
  
{{defn|1=<syntaxhighlight lang="html5">
−
<div class="pi-font pi-data-value">John</div>
 +
<div class="pi-data-value pi-font">John</div>
 
</syntaxhighlight>}}
  
</syntaxhighlight>}}
 
{{glossary end}}
  
{{glossary end}}
   
−
==<code><nowiki><format></nowiki></code>==
 +
==<code>&lt;format&gt;</code>==
−
The <code><nowiki><format></nowiki></code> tag can be used only inside other tags, check child tags column for more info. Accepts '''wikitext'''.
 +
The <code>&lt;format&gt;</code> tag can be used only inside other tags, check child tags column for more info. Accepts '''[[Help:Wikitext|wikitext]]'''.
   
 
===Valid tags===
  
===Valid tags===
Line 205: Line 215:
 
|-
  
|-
 
|
  
|
−
* <code><nowiki><title></nowiki></code>
 +
* <code>&lt;title&gt;</code>
−
* <code><nowiki><data></nowiki></code>
 +
* <code>&lt;data&gt;</code>
−
* <code><nowiki><caption></nowiki></code>
 +
* <code>&lt;caption&gt;</code>
 
| None
  
| None
 
|}
  
|}
Line 225: Line 235:
 
{{term|1=Output}}
  
{{term|1=Output}}
 
{{defn|1=<syntaxhighlight lang="html5">
  
{{defn|1=<syntaxhighlight lang="html5">
−
<div class="pi-item pi-item-spacing pi-data pi-border-color">
 +
<div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="dollars">
−
<h3 class="pi-secondary-font pi-data-label">Regular price</h3>
 +
<h3 class="pi-data-label pi-secondary-font">Regular price</h3>
−
<div class="pi-font pi-data-value">$15</div>
 +
<div class="pi-data-value pi-font">$15</div>
 
</div>
  
</div>
 
</syntaxhighlight>}}
  
</syntaxhighlight>}}
 
{{glossary end}}
  
{{glossary end}}
   
−
==<code><nowiki><image></nowiki></code>==
 +
==<code>&lt;image&gt;</code>==
−
The <code><nowiki><image></nowiki></code> tag is used to insert images or video inside an infobox. It can only be styled using the community's [[Help:CSS|CSS]], and cannot be manually resized. Images are normalized, such that <code><nowiki>[[File:Example.jpg]]</nowiki></code> and <code>Example.jpg</code> do the same thing. Multiple images can be passed by [[homepage:w:Thread:935527|using a <code><nowiki><gallery></nowiki></code> tag]].
 +
The <code>&lt;image&gt;</code> tag is used to insert images or video inside an infobox. It can only be styled using the community's [[Help:Community CSS and JS|CSS]], and cannot be manually resized. Images are normalized, such that <code><nowiki>[[File:Example.jpg]]</nowiki></code> and <code>Example.jpg</code> do the same thing. Multiple images can be passed by [[w:Thread:935527|using a <code>&lt;gallery&gt;</code> tag]].
   
−
Here, the default tag is used to specify an image to be used when no image has been chosen on an article. For example, <code><nowiki><default>Example.jpg</default></nowiki></code>.
 +
Here, the <code>&lt;default&gt;</code> tag is used to specify an image to be used when no image has been chosen on an article. For example, <code>&lt;default>Example.jpg</default&gt;</code>.
   
 
===Valid tags===
  
===Valid tags===
Line 244: Line 254:
 
|-
  
|-
 
|
  
|
−
* <code><nowiki><infobox></nowiki></code>
 +
* <code>&lt;infobox&gt;</code>
−
* <code><nowiki><group></nowiki></code>
 +
* <code>&lt;group&gt;</code>
 
|
  
|
−
* <code><nowiki><alt></nowiki></code>
 +
* <code>&lt;alt&gt;</code>
−
* <code><nowiki><caption></nowiki></code>
 +
* <code>&lt;caption&gt;</code>
−
* <code><nowiki><default></nowiki></code>
 +
* <code>&lt;default&gt;</code>
 
|}
  
|}
   
Line 255: Line 265:
 
; <code>source</code>
  
; <code>source</code>
 
: The name of the parameter to use.
  
: The name of the parameter to use.
  +
; <code>name</code>
  +
: Internal name for the element and its children. Assigned to the <code>data-item-name</code> attribute in the resulting HTML.
   
 
===HTML output===
  
===HTML output===
Line 264: Line 276:
 
{{term|1=Output}}
  
{{term|1=Output}}
 
{{defn|1=<syntaxhighlight lang="html5">
  
{{defn|1=<syntaxhighlight lang="html5">
−
<figure class="pi-item pi-image">
 +
<figure class="pi-item pi-image" data-source="image">
 
<a href=".../File:Image.jpg" class="image image-thumbnail" title="">
  
<a href=".../File:Image.jpg" class="image image-thumbnail" title="">
−
<img src="Image.jpg" class="pi-image-thumbnail" alt="" width="" height="" data-image-key="Image.jpg" data-image-name="Image.jpg">
 +
<img src="Image.jpg" srcset="Image.jpg 1x, Image.jpg 2x" class="pi-image-thumbnail" alt="" data-image-key="Image.jpg" data-image-name="Image.jpg" width="" height="">
 
</a>
  
</a>
 
</figure>
  
</figure>
Line 272: Line 284:
 
{{glossary end}}
  
{{glossary end}}
   
−
==<code><nowiki><alt></nowiki></code>==
 +
==<code>&lt;alt&gt;</code>==
−
The <code><nowiki><alt></nowiki></code> tag can be used only inside <code><nowiki><image></nowiki></code> tag.
 +
The <code>&lt;alt&gt;</code> tag can be used only inside <code>&lt;image&gt;</code> tag.
   
 
===Valid tags===
  
===Valid tags===
Line 282: Line 294:
 
|-
  
|-
 
|
  
|
−
* <code><nowiki><image></nowiki></code>
 +
* <code>&lt;image&gt;</code>
 
|
  
|
−
* <code><nowiki><default></nowiki></code>
 +
* <code>&lt;default&gt;</code>
 
|}
  
|}
   
Line 303: Line 315:
 
{{term|1=Output}}
  
{{term|1=Output}}
 
{{defn|1=<syntaxhighlight lang="html5">
  
{{defn|1=<syntaxhighlight lang="html5">
−
<figure class="pi-item pi-image">
 +
<figure class="pi-item pi-image" data-source="image">
 
<a href=".../File:Image.jpg" class="image image-thumbnail" title="Default alt text">
  
<a href=".../File:Image.jpg" class="image image-thumbnail" title="Default alt text">
−
<img src="Image.jpg" class="pi-image-thumbnail" alt="Default alt text" width="" height="" data-image-key="Image.jpg" data-image-name="Image.jpg">
 +
<img src="Image.jpg" srcset="Image.jpg 1x, Image.jpg 2x" class="pi-image-thumbnail" alt="Default alt text" data-image-key="Image.jpg" data-image-name="Image.jpg" width="" height="">
 
</a>
  
</a>
 
</figure>
  
</figure>
Line 311: Line 323:
 
{{glossary end}}
  
{{glossary end}}
   
−
==<code><nowiki><caption></nowiki></code>==
 +
==<code>&lt;caption&gt;</code>==
−
The <code><nowiki><caption></nowiki></code> tag can be used only inside <code><nowiki><image></nowiki></code> tag.
 +
The <code>&lt;caption&gt;</code> tag can be used only inside <code>&lt;image&gt;</code> tag.
   
 
===Valid tags===
  
===Valid tags===
Line 321: Line 333:
 
|-
  
|-
 
|
  
|
−
* <code><nowiki><image></nowiki></code>
 +
* <code>&lt;image&gt;</code>
 
|
  
|
−
* <code><nowiki><default></nowiki></code>
 +
* <code>&lt;default&gt;</code>
−
* <code><nowiki><format></nowiki></code>
 +
* <code>&lt;format&gt;</code>
 
|}
  
|}
   
Line 347: Line 359:
 
{{glossary end}}
  
{{glossary end}}
   
−
==<code><nowiki><group></nowiki></code>==
 +
==<code>&lt;group&gt;</code>==
−
The <code><nowiki><data></nowiki></code> tag is used for grouping fields, can provide header for each group. A group won't be rendered (including any headers) if all fields are empty. However, if the <code>show</code> attribute is set to <code>incomplete</code>, it will render all of the group's fields if at least '''one field''' is not empty.
 +
The <code>&lt;group&gt;</code> tag is used for grouping fields, and optionally accepts a header for each group. A group won't be rendered (including any headers) if all fields are empty. However, if the <code>show</code> attribute is set to <code>incomplete</code>, it will render all of the group's fields if at least '''one field''' is not empty.
   
 
===Valid tags===
  
===Valid tags===
Line 357: Line 369:
 
|-
  
|-
 
|
  
|
−
* <code><nowiki><infobox></nowiki></code>
 +
* <code>&lt;infobox&gt;</code>
−
* <code><nowiki><group></nowiki></code>
 +
* <code>&lt;group&gt;</code>
 
|
  
|
−
* <code><nowiki><data></nowiki></code>
 +
* <code>&lt;data&gt;</code>
−
* <code><nowiki><header></nowiki></code>
 +
* <code>&lt;header&gt;</code>
−
* <code><nowiki><image></nowiki></code>
 +
* <code>&lt;image&gt;</code>
−
* <code><nowiki><title></nowiki></code>
 +
* <code>&lt;title&gt;</code>
−
* <code><nowiki><group></nowiki></code>
 +
* <code>&lt;group&gt;</code>
−
* <code><nowiki><navigation></nowiki></code>
 +
* <code>&lt;navigation&gt;</code>
  +
* <code>&lt;panel&gt;</code>
 
|}
  
|}
   
Line 374: Line 387:
 
: Possible values: <code>default</code>, <code>incomplete</code>.
  
: Possible values: <code>default</code>, <code>incomplete</code>.
 
; <code>collapse</code>
  
; <code>collapse</code>
−
: Possible values: <code>open</code>, <code>closed</code>. Only available if the group's first child is a <code><nowiki><header></nowiki></code> tag.
 +
: Possible values: <code>open</code>, <code>closed</code>. Only available if the group's first child is a <code>&lt;header&gt;</code> tag.
 
; <code>row-items</code>
  
; <code>row-items</code>
−
: Turns the group into a smart group spanning ''n'' columns. Smart groups arrange their cells (<code><nowiki><data></nowiki></code> tags) horizontally, and automatically wrap to a new row once the current one exceeds that limit. Cells are stretched to take up as much space as possible on the last row.
 +
: Turns the group into a smart group spanning ''n'' columns. Smart groups arrange their cells (<code>&lt;data&gt;</code> tags) horizontally, and automatically wrap to a new row once the current one exceeds that limit. Cells are stretched to take up as much space as possible on the last row.
  +
; <code>name</code>
  +
: Internal name for the element and its children. Assigned to the <code>data-item-name</code> attribute in the resulting HTML.
   
 
===HTML output===
  
===HTML output===
Line 391: Line 406:
 
{{defn|1=<syntaxhighlight lang="html5">
  
{{defn|1=<syntaxhighlight lang="html5">
 
<section class="pi-item pi-group pi-border-color">
  
<section class="pi-item pi-group pi-border-color">
−
<h2 class="pi-item pi-secondary-font pi-item-spacing pi-secondary-background pi-header">Group name</h2>
 +
<h2 class="pi-item pi-header pi-secondary-font pi-item-spacing pi-secondary-background">Group name</h2>
−
<div class="pi-item pi-item-spacing pi-data pi-border-color">
 +
<div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="value1">
−
<div class="pi-font pi-data-value">Data value</div>
 +
<div class="pi-data-value pi-font">Data value</div>
 
</div>
  
</div>
 
</section>
  
</section>
Line 414: Line 429:
 
<section class="pi-item pi-group pi-border-color">
  
<section class="pi-item pi-group pi-border-color">
 
<table class="pi-horizontal-group">
  
<table class="pi-horizontal-group">
−
<caption class="pi-secondary-font pi-secondary-background pi-item-spacing pi-header">Group name</caption>
 +
<caption class="pi-header pi-secondary-font pi-secondary-background pi-item-spacing">Group name</caption>
 
<thead>
  
<thead>
 
<tr>
  
<tr>
−
<th class="pi-secondary-font pi-horizontal-group-item pi-data-label pi-border-color pi-item-spacing">Data label</th>
 +
<th class="pi-horizontal-group-item pi-data-label pi-secondary-font pi-border-color pi-item-spacing" data-source="value1">Data label</th>
 
</tr>
  
</tr>
 
</thead>
  
</thead>
 
<tbody>
  
<tbody>
 
<tr>
  
<tr>
−
<td class="pi-font pi-horizontal-group-item pi-data-value pi-border-color pi-item-spacing">Data value</td>
 +
<td class="pi-horizontal-group-item pi-data-value pi-font pi-border-color pi-item-spacing" data-source="value1">Data value</td>
 
</tr>
  
</tr>
 
</tbody>
  
</tbody>
Line 436: Line 451:
 
<group row-items="3">
  
<group row-items="3">
 
<header>Section Header</header>
  
<header>Section Header</header>
−
<data source="row3">
 +
<data source="value 1">
−
<label>Label</label>
 +
<label>Label 1</label>
 
</data>
  
</data>
−
<data source="row4">
 +
<data source="value 2">
−
<label>Label</label>
 +
<label>Label 2</label>
 
</data>
  
</data>
−
<data source="row5">
 +
<data source="value 3">
−
<label>Label</label>
 +
<label>Label 3</label>
 
</data>
  
</data>
−
<data source="row6">
 +
<data source="value 4" layout="default">
−
<label>Label</label>
 +
<label>Label 4</label>
 
</data>
  
</data>
−
<data source="row7">
 +
<data source="value 5">
−
<label>Label</label>
 +
<label>Label 5</label>
 
</data>
  
</data>
−
<data source="row8" layout="default">
 +
<data source="value 6">
−
<label>Label</label>
 +
<label>Label 6</label>
⚫
</data>
  
⚫
<data source="row9" layout="default">
  
⚫
<label>Label</label>
  
 
</data>
  
</data>
 
</group>
  
</group>
Line 465: Line 477:
 
<section class="pi-item pi-smart-group pi-border-color">
  
<section class="pi-item pi-smart-group pi-border-color">
 
<section class="pi-smart-group-head">
  
<section class="pi-smart-group-head">
−
<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">Label</h3>
 +
<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 3 * 100%);" data-source="value 1">Label 1</h3>
−
<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">Label</h3>
 +
<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 3 * 100%);" data-source="value 2">Label 2</h3>
−
<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">Label</h3>
 +
<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 3 * 100%);" data-source="value 3">Label 3</h3>
 
</section>
  
</section>
 
<section class="pi-smart-group-body">
  
<section class="pi-smart-group-body">
−
<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">CCC</div>
 +
<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 3 * 100%);" data-source="value 1">AAA</div>
−
<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">DDD</div>
 +
<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 3 * 100%);" data-source="value 2">BBB</div>
−
<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">EEE</div>
 +
<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 3 * 100%);" data-source="value 3">CCC</div>
 
</section>
  
</section>
 
</section>
  
</section>
  ⚫
<div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="value 4">
  ⚫
<h3 class="pi-data-label pi-secondary-font">Label 4</h3>
  ⚫
<div class="pi-data-value pi-font">DDD</div>
  ⚫
</div>
 
<section class="pi-item pi-smart-group pi-border-color">
  
<section class="pi-item pi-smart-group pi-border-color">
 
<section class="pi-smart-group-head">
  
<section class="pi-smart-group-head">
−
<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">Label</h3>
 +
<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 2 * 100%);" data-source="value 5">Label 5</h3>
−
<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">Label</h3>
 +
<h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 2 * 100%);" data-source="value 6">Label 6</h3>
 
</section>
  
</section>
 
<section class="pi-smart-group-body">
  
<section class="pi-smart-group-body">
−
<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">FFF</div>
 +
<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 2 * 100%);" data-source="value 5">EEE</div>
−
<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">GGG</div>
 +
<div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 2 * 100%);" data-source="value 6">FFF</div>
 
</section>
  
</section>
 
</section>
  
</section>
⚫
<div class="pi-item pi-data pi-item-spacing pi-border-color">
  
⚫
<h3 class="pi-data-label pi-secondary-font">Label</h3>
  
⚫
<div class="pi-data-value pi-font">HHH</div>
  
⚫
</div>
  
⚫
<div class="pi-item pi-data pi-item-spacing pi-border-color">
  
⚫
<h3 class="pi-data-label pi-secondary-font">Label</h3>
  
⚫
<div class="pi-data-value pi-font">III</div>
  
⚫
</div>
  
 
</section>
  
</section>
 
</syntaxhighlight>}}
  
</syntaxhighlight>}}
 
{{glossary end}}
  
{{glossary end}}
   
−
==<code><nowiki><header></nowiki></code>==
 +
==<code>&lt;header&gt;</code>==
−
The <code><nowiki><header></nowiki></code> tag denotes the beginning of a section or group of tags.
 +
The <code>&lt;header&gt;</code> tag denotes the beginning of a section or group of tags.
   
 
===Valid tags===
  
===Valid tags===
Line 507: Line 515:
 
|-
  
|-
 
|
  
|
−
* <code><nowiki><infobox></nowiki></code>
 +
* <code>&lt;infobox&gt;</code>
−
* <code><nowiki><group></nowiki></code>
 +
* <code>&lt;group&gt;</code>
  +
* <code>&lt;panel&gt;</code>
 
| None
  
| None
 
|}
  
|}
   
 
===Attributes===
  
===Attributes===
  +
; <code>name</code>
−
None.
  
  +
: Internal name for the element and its children. Assigned to the <code>data-item-name</code> attribute in the resulting HTML.
   
 
===HTML output===
  
===HTML output===
Line 523: Line 533:
 
{{term|1=Default group output}}
  
{{term|1=Default group output}}
 
{{defn|1=<syntaxhighlight lang="html5">
  
{{defn|1=<syntaxhighlight lang="html5">
−
<h2 class="pi-item pi-secondary-font pi-item-spacing pi-secondary-background pi-header">Header Text</h2>
 +
<h2 class="pi-item pi-header pi-secondary-font pi-item-spacing pi-secondary-background">Header Text</h2>
 
</syntaxhighlight>}}
  
</syntaxhighlight>}}
 
{{term|1=Horizontal group output}}
  
{{term|1=Horizontal group output}}
 
{{defn|1=<syntaxhighlight lang="html5">
  
{{defn|1=<syntaxhighlight lang="html5">
−
<caption class="pi-secondary-font pi-secondary-background pi-item-spacing pi-header">Header Text</caption>
 +
<caption class="pi-header pi-secondary-font pi-secondary-background pi-item-spacing">Header Text</caption>
 
</syntaxhighlight>}}
  
</syntaxhighlight>}}
 
{{glossary end}}
  
{{glossary end}}
   
−
==<code><nowiki><navigation></nowiki></code>==
 +
==<code>&lt;navigation&gt;</code>==
−
The <code><nowiki><navigation></nowiki></code> tag is used for providing any '''wikitext'''.
 +
The <code>&lt;navigation&gt;</code> tag is used for providing any '''wikitext'''.
   
 
===Valid tags===
  
===Valid tags===
Line 541: Line 551:
 
|-
  
|-
 
|
  
|
−
* <code><nowiki><infobox></nowiki></code>
 +
* <code>&lt;infobox&gt;</code>
−
* <code><nowiki><group></nowiki></code> (not available in [[#Horizontal group|horizontal groups]])
 +
* <code>&lt;group&gt;</code> (not available in [[#Horizontal group|horizontal groups]])
 
| None
  
| None
 
|}
  
|}
   
 
===Attributes===
  
===Attributes===
  +
; <code>name</code>
−
None.
  
  +
: Internal name for the element and its children. Assigned to the <code>data-item-name</code> attribute in the resulting HTML.
   
 
===HTML output===
  
===HTML output===
Line 557: Line 568:
 
{{term|1=Output}}
  
{{term|1=Output}}
 
{{defn|1=<syntaxhighlight lang="html5">
  
{{defn|1=<syntaxhighlight lang="html5">
−
<nav class="pi-item-spacing pi-secondary-background pi-secondary-font pi-navigation">
 +
<nav class="pi-navigation pi-item-spacing pi-secondary-background pi-secondary-font">
 
<a href="/wiki/Link" title="Link">Link</a>
  
<a href="/wiki/Link" title="Link">Link</a>
 
</nav>
  
</nav>
Line 563: Line 574:
 
{{glossary end}}
  
{{glossary end}}
   
  +
==<code>&lt;panel&gt;</code>==
⚫
==References==
  
  +
The <code>&lt;panel&gt;</code> tag is used to create tabbed interfaces, where the contents of each tab is wrapped in a <code>&lt;section&gt;</code> tag.
−
{{Reflist}}
  
   
  +
===Valid tags===
⚫
[[de:Hilfe:Infoboxen/Tags]]
  
  +
{|class="article-table" style="table-layout: fixed; width: 100%;"
  +
|-
  +
!scope="col"| Parent tags
  +
!scope="col"| Child tags
  +
|-
  +
|
  +
* <code>&lt;infobox&gt;</code>
  +
* <code>&lt;group&gt;</code>
  +
|
  +
* <code>&lt;header&gt;</code>
  +
* <code>&lt;section&gt;</code>
  +
|}
  +
  +
===Attributes===
  +
; <code>name</code>
  +
: Internal name for the element and its children. Assigned to the <code>data-item-name</code> attribute in the resulting HTML.
  +
  +
===HTML output===
  +
{{glossary}}
  +
{{term|1=Input}}
  +
{{defn|1=<syntaxhighlight lang="xml">
  +
<panel>
  +
<section>
  ⚫
<label>A</label>
  +
<data source="one" />
  +
<data source="two" />
  +
</section>
  +
<section>
  +
<label>B</label>
  +
<data source="three" />
  +
<data source="four" />
  +
</section>
  +
</panel>
  +
</syntaxhighlight>}}
  +
{{term|1=Output}}
  +
{{defn|1=<syntaxhighlight lang="html5">
  +
<section class="pi-item pi-panel pi-border-color">
  +
<div class="pi-panel-scroll-wrapper">
  +
<ul class="pi-section-navigation">
  +
<li class="pi-section-tab pi-section-active" data-ref="0">
  +
<div class="pi-section-label">A</div>
  +
</li>
  +
<li class="pi-section-tab" data-ref="1">
  +
<div class="pi-section-label">B</div>
  +
</li>
  +
</ul>
  ⚫
</div>
  +
<div class="pi-section-contents">
  +
<div class="pi-section-content pi-section-active" data-ref="0">
  +
<div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="one">
  +
<div class="pi-data-value pi-font">1st</div>
  +
</div>
  +
<div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="two">
  +
<div class="pi-data-value pi-font">2nd</div>
  +
</div>
  +
</div>
  +
<div class="pi-section-content" data-ref="1">
  +
<div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="three">
  +
<div class="pi-data-value pi-font">3rd</div>
  +
</div>
  +
<div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="four">
  +
<div class="pi-data-value pi-font">4th</div>
  +
</div>
  +
</div>
  ⚫
</div>
  +
</section>
  +
</syntaxhighlight>}}
  +
{{glossary end}}
  +
  +
==<code>&lt;section&gt;</code>==
  +
The <code>&lt;section&gt;</code> tag represents the contents of a tab. The clickable toggle is represented by a <code>&lt;label&gt;</code> tag. Labels default to their zero-based index if omitted; if all tabs within a panel are unlabeled, then they are stacked vertically.
  +
  +
===Valid tags===
  +
{|class="article-table" style="table-layout: fixed; width: 100%;"
  +
|-
  +
!scope="col"| Parent tags
  +
!scope="col"| Child tags
  +
|-
  +
|
  +
* <code>&lt;panel&gt;</code>
  +
|
  +
* <code>&lt;title&gt;</code>
  +
* <code>&lt;data&gt;</code>
  +
* <code>&lt;label&gt;</code>
  +
* <code>&lt;image&gt;</code>
  +
* <code>&lt;group&gt;</code>
  +
* <code>&lt;header&gt;</code>
  +
* <code>&lt;navigation&gt;</code>
  +
|}
  +
  +
===Attributes===
  +
; <code>name</code>
  +
: Internal name for the element and its children. Assigned to the <code>data-item-name</code> attribute in the resulting HTML.
  +
  +
===HTML output===
  +
{{glossary}}
  +
{{term|1=Input}}
  +
{{defn|1=<syntaxhighlight lang="xml">
  +
<section>
  +
<label>A</label>
  ⚫
<data source="one" />
  +
<data source="two" />
  +
</section>
  +
</syntaxhighlight>}}
  +
{{term|1=Output}}
  +
{{defn|1=<syntaxhighlight lang="html5">
  +
<div class="pi-section-content" data-ref="0">
  ⚫
<div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="one">
  ⚫
<div class="pi-data-value pi-font">1st</div>
  +
</div>
  +
<div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="two">
  ⚫
<div class="pi-data-value pi-font">2nd</div>
  +
</div>
  +
</div>
  +
</syntaxhighlight>}}
  +
{{glossary end}}
  +
  ⚫
==References==
  ⚫
{{Reflist}}[[de:Hilfe:Infoboxen/Tags]]
 
[[es:Ayuda:Infoboxes/Etiquetas]]
  
[[es:Ayuda:Infoboxes/Etiquetas]]
 
[[fi:Ohje:Tietolaatikot/Tunnisteet]]
  
[[fi:Ohje:Tietolaatikot/Tunnisteet]]
Line 576: Line 706:
 
[[pt:Ajuda:Infoboxes/Tags]]
  
[[pt:Ajuda:Infoboxes/Tags]]
 
[[ru:Справка:Инфобоксы/теги]]
  
[[ru:Справка:Инфобоксы/теги]]
  +
[[tr:Yardım:Bilgi kutuları/Etiketler]]
 
[[uk:Довідка:Інфобокси/теґи]]
  
[[uk:Довідка:Інфобокси/теґи]]
 
[[vi:Trợ giúp:Hộp thông tin/Các thẻ]]
  
[[vi:Trợ giúp:Hộp thông tin/Các thẻ]]

Revision as of 08:44, 12 June 2020

Portable infoboxes include a wide variety of tags and options that you can use to make the infobox display how you want. Below we have listed all the standard tags, with sample wikitext and output HTML, to help you identify what you need to use, and how to give it a CSS makeover (see also Help:Infoboxes/CSS). Note that parser functions can also be used.

All infobox fields should be declared using XML convention, with attributes used for field configuration.[1]

<infobox>

The <infobox> tag holds all others and delimits the scope of the infobox.

Valid tags

Parent tags Child tags
None
  • <title>
  • <image>
  • <header>
  • <navigation>
  • <data>
  • <group>
  • <panel>

Attributes

theme
The name of the theme to apply. Adds a class to the infobox of the form .pi-theme-$1, with spaces transformed into hyphens (-). Does not overwrite theme-source or type.
theme-source
The name of the parameter to use as a theme. Adds a class to the infobox of the form .pi-theme-$1, with spaces transformed into hyphens (-). Does not overwrite theme or type.
type
The name of the type to apply. Adds a class to the infobox of the form .type-$1, with spaces transformed into hyphens (-). Does not overwrite theme or theme-source.
accent-color-source
The name of the parameter to use as an accent color.
accent-color-default
The default accent color. Accepts a 3- or 6-digit hexadecimal color code, e.g. #f00 or #ff0000.
accent-color-text-source
The name of the parameter to use as a text accent color.
accent-color-text-default
The default text accent color. Accepts a 3- or 6-digit hexadecimal color code, e.g. #f00 or #ff0000.
layout
Possible values: default, stacked.
name
Internal name for the element and its children. Assigned to the data-item-name attribute in the resulting HTML.

HTML output

Input
<infobox>
    <title source="title_source" />
</infobox>
Output
<aside class="portable-infobox pi-background pi-theme-wikia pi-layout-default">
    <h2 class="pi-item pi-item-spacing pi-title" data-source="title_source">Title</h2>
</aside>

<title>

The <title> tag states infobox title. Images used in <title> tags do not appear on mobile.[2]

Valid tags

Parent tags Child tags
  • <infobox>
  • <group>
  • <default>
  • <format>

Attributes

source
The name of the parameter to use.
name
Internal name for the element and its children. Assigned to the data-item-name attribute in the resulting HTML.

HTML output

Input
<title source="title_source">
    <default>{{PAGENAME}}</default>
</title>
Output
<h2 class="pi-item pi-item-spacing pi-title" data-source="title_source">Page name</h2>

<data>

The <data> tag is the standard key-value tag.

Valid tags

Parent tags Child tags
  • <infobox>
  • <group>
  • <default>
  • <label>
  • <format>

Attributes

source
The name of the parameter to use.
span
The number of columns to span. Only available in smart groups.
layout
Possible values: default. Only available in smart groups.
name
Internal name for the element and its children. Assigned to the data-item-name attribute in the resulting HTML.

HTML output

Input
<data source="name">
    <label>First name</label>
    <default>John</default>
</data>
Output
<div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="name">
    <h3 class="pi-data-label pi-secondary-font">First name</h3>
    <div class="pi-data-value pi-font">John</div>
</div>

<label>

The <label> tag can be used only inside other tags, check child tags column for more info. Accepts wikitext.

Valid tags

Parent tags Child tags
  • <data>
  • <section>
 None

Attributes

None.

HTML output

Input
<label>First name</label>
Output
<h3 class="pi-data-label pi-secondary-font">First name</h3>

<default>

The <default> tag text is used when "source" data is not specified, can be used only inside other tags, check child tags column for more info. Accepts wikitext.

Valid tags

Parent tags Child tags
  • <title>
  • <data>
  • <image>
  • <alt>
  • <caption>
 None

Attributes

None.

HTML output

Input
<default>John</default>
Output
<div class="pi-data-value pi-font">John</div>

<format>

The <format> tag can be used only inside other tags, check child tags column for more info. Accepts wikitext.

Valid tags

Parent tags Child tags
  • <title>
  • <data>
  • <caption>
 None

Attributes

None.

HTML output

Input
<data source="dollars">
    <label>Regular price</label>
    <format>${{{dollars}}}</format>
</data>
Output
<div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="dollars">
    <h3 class="pi-data-label pi-secondary-font">Regular price</h3>
    <div class="pi-data-value pi-font">$15</div>
</div>

<image>

The <image> tag is used to insert images or video inside an infobox. It can only be styled using the community's CSS, and cannot be manually resized. Images are normalized, such that [[File:Example.jpg]] and Example.jpg do the same thing. Multiple images can be passed by using a <gallery> tag.

Here, the <default> tag is used to specify an image to be used when no image has been chosen on an article. For example, <default>Example.jpg</default>.

Valid tags

Parent tags Child tags
  • <infobox>
  • <group>
  • <alt>
  • <caption>
  • <default>

Attributes

source
The name of the parameter to use.
name
Internal name for the element and its children. Assigned to the data-item-name attribute in the resulting HTML.

HTML output

Input
<image source="image" />
Output
<figure class="pi-item pi-image" data-source="image">
    <a href=".../File:Image.jpg" class="image image-thumbnail" title="">
        <img src="Image.jpg" srcset="Image.jpg 1x, Image.jpg 2x" class="pi-image-thumbnail" alt="" data-image-key="Image.jpg" data-image-name="Image.jpg" width="" height="">
    </a>
</figure>

<alt>

The <alt> tag can be used only inside <image> tag.

Valid tags

Parent tags Child tags
  • <image>
  • <default>

Attributes

source
The name of the parameter to use.

HTML output

Input
<image source="image">
    <alt source="alternative_title">
        <default>Default alt text</default>
    </alt>
</image>
Output
<figure class="pi-item pi-image" data-source="image">
    <a href=".../File:Image.jpg" class="image image-thumbnail" title="Default alt text">
        <img src="Image.jpg" srcset="Image.jpg 1x, Image.jpg 2x" class="pi-image-thumbnail" alt="Default alt text" data-image-key="Image.jpg" data-image-name="Image.jpg" width="" height="">
    </a>
</figure>

<caption>

The <caption> tag can be used only inside <image> tag.

Valid tags

Parent tags Child tags
  • <image>
  • <default>
  • <format>

Attributes

source
The name of the parameter to use.

HTML output

Input
<image source="image">
    <caption source="caption">
        <default>My caption</default>
    </caption>
</image>
Output
<figcaption class="pi-item-spacing pi-caption">My caption</figcaption>

<group>

The <group> tag is used for grouping fields, and optionally accepts a header for each group. A group won't be rendered (including any headers) if all fields are empty. However, if the show attribute is set to incomplete, it will render all of the group's fields if at least one field is not empty.

Valid tags

Parent tags Child tags
  • <infobox>
  • <group>
  • <data>
  • <header>
  • <image>
  • <title>
  • <group>
  • <navigation>
  • <panel>

Attributes

layout
Possible values: default, horizontal.
show
Possible values: default, incomplete.
collapse
Possible values: open, closed. Only available if the group's first child is a <header> tag.
row-items
Turns the group into a smart group spanning n columns. Smart groups arrange their cells (<data> tags) horizontally, and automatically wrap to a new row once the current one exceeds that limit. Cells are stretched to take up as much space as possible on the last row.
name
Internal name for the element and its children. Assigned to the data-item-name attribute in the resulting HTML.

HTML output

Default group

Input
<group>
    <header>Group name</header>
    <data source="value1" />
</group>
Output
<section class="pi-item pi-group pi-border-color">
    <h2 class="pi-item pi-header pi-secondary-font pi-item-spacing pi-secondary-background">Group name</h2>
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="value1">
        <div class="pi-data-value pi-font">Data value</div>
    </div>
</section>

Horizontal group

Input
<group layout="horizontal">
    <header>Group name</header>
    <data source="value1">
        <label>Data label</label>
    </data>
</group>
Output
<section class="pi-item pi-group pi-border-color">
    <table class="pi-horizontal-group">
        <caption class="pi-header pi-secondary-font pi-secondary-background pi-item-spacing">Group name</caption>
        <thead>
            <tr>
                <th class="pi-horizontal-group-item pi-data-label pi-secondary-font pi-border-color pi-item-spacing" data-source="value1">Data label</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="pi-horizontal-group-item pi-data-value pi-font pi-border-color pi-item-spacing" data-source="value1">Data value</td>
            </tr>
        </tbody>
    </table>
</section>

Smart group

Input
<group row-items="3">
    <header>Section Header</header>
    <data source="value 1">
        <label>Label 1</label>
    </data>
    <data source="value 2">
        <label>Label 2</label>
    </data>
    <data source="value 3">
        <label>Label 3</label>
    </data>
    <data source="value 4" layout="default">
        <label>Label 4</label>
    </data>
    <data source="value 5">
        <label>Label 5</label>
    </data>
    <data source="value 6">
        <label>Label 6</label>
    </data>
</group>
Output
<section class="pi-item pi-group pi-border-color">
    <h2 class="pi-item pi-header pi-secondary-font pi-item-spacing pi-secondary-background">Section Header</h2>
    <section class="pi-item pi-smart-group pi-border-color">
        <section class="pi-smart-group-head">
            <h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 3 * 100%);" data-source="value 1">Label 1</h3>
            <h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 3 * 100%);" data-source="value 2">Label 2</h3>
            <h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 3 * 100%);" data-source="value 3">Label 3</h3>
        </section>
        <section class="pi-smart-group-body">
            <div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 3 * 100%);" data-source="value 1">AAA</div>
            <div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 3 * 100%);" data-source="value 2">BBB</div>
            <div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 3 * 100%);" data-source="value 3">CCC</div>
        </section>
    </section>
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="value 4">
        <h3 class="pi-data-label pi-secondary-font">Label 4</h3>
        <div class="pi-data-value pi-font">DDD</div>
    </div>
    <section class="pi-item pi-smart-group pi-border-color">
        <section class="pi-smart-group-head">
            <h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 2 * 100%);" data-source="value 5">Label 5</h3>
            <h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 2 * 100%);" data-source="value 6">Label 6</h3>
        </section>
        <section class="pi-smart-group-body">
            <div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 2 * 100%);" data-source="value 5">EEE</div>
            <div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 2 * 100%);" data-source="value 6">FFF</div>
        </section>
    </section>
</section>

<header>

The <header> tag denotes the beginning of a section or group of tags.

Valid tags

Parent tags Child tags
  • <infobox>
  • <group>
  • <panel>
 None

Attributes

name
Internal name for the element and its children. Assigned to the data-item-name attribute in the resulting HTML.

HTML output

Input
<header>Header Text</header>
Default group output
<h2 class="pi-item pi-header pi-secondary-font pi-item-spacing pi-secondary-background">Header Text</h2>
Horizontal group output
<caption class="pi-header pi-secondary-font pi-secondary-background pi-item-spacing">Header Text</caption>

<navigation>

The <navigation> tag is used for providing any wikitext.

Valid tags

Parent tags Child tags
None

Attributes

name
Internal name for the element and its children. Assigned to the data-item-name attribute in the resulting HTML.

HTML output

Input
<navigation>[[Link]]</navigation>
Output
<nav class="pi-navigation pi-item-spacing pi-secondary-background pi-secondary-font">
    <a href="/wiki/Link" title="Link">Link</a>
</nav>

<panel>

The <panel> tag is used to create tabbed interfaces, where the contents of each tab is wrapped in a <section> tag.

Valid tags

Parent tags Child tags
  • <infobox>
  • <group>
  • <header>
  • <section>

Attributes

name
Internal name for the element and its children. Assigned to the data-item-name attribute in the resulting HTML.

HTML output

Input
<panel>
    <section>
        <label>A</label>
        <data source="one" />
        <data source="two" />
    </section>
    <section>
        <label>B</label>
        <data source="three" />
        <data source="four" />
    </section>
</panel>
Output
<section class="pi-item pi-panel pi-border-color">
    <div class="pi-panel-scroll-wrapper">
        <ul class="pi-section-navigation">
            <li class="pi-section-tab pi-section-active" data-ref="0">
                <div class="pi-section-label">A</div>
            </li>
            <li class="pi-section-tab" data-ref="1">
                <div class="pi-section-label">B</div>
            </li>
        </ul>
    </div>
    <div class="pi-section-contents">
        <div class="pi-section-content pi-section-active" data-ref="0">
            <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="one">
                <div class="pi-data-value pi-font">1st</div>
            </div>
            <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="two">
                <div class="pi-data-value pi-font">2nd</div>
            </div>
        </div>
        <div class="pi-section-content" data-ref="1">
            <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="three">
                <div class="pi-data-value pi-font">3rd</div>
            </div>
            <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="four">
                <div class="pi-data-value pi-font">4th</div>
            </div>
        </div>
    </div>
</section>

<section>

The <section> tag represents the contents of a tab. The clickable toggle is represented by a <label> tag. Labels default to their zero-based index if omitted; if all tabs within a panel are unlabeled, then they are stacked vertically.

Valid tags

Parent tags Child tags
  • <panel>
  • <title>
  • <data>
  • <label>
  • <image>
  • <group>
  • <header>
  • <navigation>

Attributes

name
Internal name for the element and its children. Assigned to the data-item-name attribute in the resulting HTML.

HTML output

Input
<section>
    <label>A</label>
    <data source="one" />
    <data source="two" />
</section>
Output
<div class="pi-section-content" data-ref="0">
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="one">
        <div class="pi-data-value pi-font">1st</div>
    </div>
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="two">
        <div class="pi-data-value pi-font">2nd</div>
    </div>
</div>

References

  1. ↑ Wikibooks xml introduction
  2. ↑ Portability Hub Office Hours, 2015-11-26
Deutsch Español Suomi Français Italiano 日本語 Nederlands Polski Português Русский Türkçe Українська Tiếng Việt 中文
Community content is available under CC-BY-SA unless otherwise noted.