Ajuda:Infoboxes/Tags

Infoboxes portáteis incluem uma grande variedade de tags e opções que você pode usar para fazer personalizar a aparência da infobox como você quer. Abaixo há uma lista das tags padrão, com o exemplo do wikitexto e resultado html, para ajudá-lo a identificar o que você precisa usar, e como transformar a infobox com CSS (veja também Ajuda:Infoboxes/CSS). Obs: Você também pode usar Funções parser também podem ser usadas.

Você deve usar a convenção XML em todos os campos das infoboxes, com atributos usados para configuração dos campos^[1].

Etiquetas (tags) básicas

`infobox`

Atributos	`theme` `theme-source` `layout` `accent-color-source` `accent-color-text-source` `accent-color-default` `accent-color-text-default`
Sub-tags	`title` `image` `header` `navigation` `data` `group`

A etiqueta que contém todas as outras e delimita a extensão da infobox.

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

`title`

Atributos	`source`
Sub-tags	`default` `format`

Mostra o título da infobox. Imagens usadas em tags title não aparecem no site móvel^[2].

Input	Output
<title source="title_source"> <default>{{PAGENAME}}</default> </title>	<h2 class="pi-item pi-item-spacing pi-title">Nome da página</h2>

`data`

Atributos	`source` `span` `layout`
Sub-tags	`default` `label` `format`

Etiqueta de valor-chave padrão.

Input

Output

<data source="name">
	<label>Nome</label>
	<default>João</default>
</data>

<div class="pi-item pi-item-spacing pi-data pi-border-color">
	<h3 class="pi-secondary-font pi-data-label">Nome</h3>
	<div class="pi-font pi-data-value">João</div>
</div>

Modificadores do resultado

`label`

Atributos	Nenhum
Sub-tags	Nenhuma

A tag "label" pode ser usada dentro de outras tags. Veja a coluna de sub-tags para mais informações. Aceita wikitexto.

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

`default`

Atributos	Nenhum
Sub-tags	Nenhuma

O texto da tag padrão é usado quando a informação "source" não foi especificada, pode ser usada dentro de outras tags, veja a coluna sub-tags para mais informação. Aceita wikitexto.

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

`format`

Atributos	Nenhum
Sub-tags	Nenhuma

Tag de formatação, pode ser usada somente dentro de outras tags, veja a coluna sub-tags para mais informações. Aceita wikitexto.

Input

Output

<data source="dollars">
	<label>Regular price</label>
	<format>${{{dollars}}}</format>
</data>

<div class="pi-item pi-item-spacing pi-data pi-border-color">
	<h3 class="pi-secondary-font pi-data-label">Regular price</h3>
	<div class="pi-font pi-data-value">$15</div>
</div>

Tags de imagens

`image`

Atributos	`source`
Sub-tags	`alt` `caption` `default`

A tag de imagem, usada para inserir imagens ou vídeos dentro de uma infobox. Ela só pode ser personalizada usando o CSS da comunidade, e não pode ser redimensionada manualmente. Imagens múltiplas podem ser utilizadas usando a tag gallery.

Neste exemplo, a tag default é usada para especificar uma imagem quando nenhuma imagem foi escolhido no artigo. Por exemplo, <default>Example.jpg</default>.

Input

Output

<image source="image" />

<figure class="pi-item pi-image">
	<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">
	</a>
</figure>

`alt`

Atributos	`source`
Sub-tags	`default`

Pode ser usada somente dentro de uma tag de imagem.

Input

Output

<image source="image">
	<alt source="alternative_title">
		<default>Default alt text</default>
	</alt>
</image>

<figure class="pi-item pi-image">
	<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">
	</a>
</figure>

`caption`

Atributos	`source`
Sub-tags	`default` `format`

Pode ser usada somente dentro da tag de imagem.

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

Outras tags

`group`

Atributos	`layout` `show` `collapse` `row-items`
Sub-tags	`data` `header` `image` `title` `navigation`

Usadas em campos agrupados, ela pode criar um cabeçalho para cada grupo. Um grupo não será mostrado (incluindo os cabeçalhos) se todos os campos estiverem vazios. Entretanto, se o atributo show estiver configurado para incomplete, todos os campos do grupo aparecerão se pelo menos um campo não estiver vazio.

Grupos padrão

Input

Output

<group>
	<header>Nome do grupo</header>
	<data source="value1" />
</group>

<section class="pi-item pi-group pi-border-color">
	<h2 class="pi-item pi-secondary-font pi-item-spacing pi-secondary-background pi-header">Nome do grupo</h2>
	<div class="pi-item pi-item-spacing pi-data pi-border-color">
		<div class="pi-font pi-data-value">Data value</div>
	</div>
</section>

Grupo Horizontal

Input

Output

<group layout="horizontal">
	<header>Nome do grupo</header>
	<data source="value1">
		<label>Data label</label>
	</data>
</group>

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

Smart Grupo

Input

Output

<group row-items="3">
    <header>Cabeçalho da seção</header>
    <data source="row3">
      <label>Label</label>
    </data>
    <data source="row4">
      <label>Label</label>
    </data>
    <data source="row5">
      <label>Label</label>
    </data>
    <data source="row6">
      <label>Label</label>
    </data>
    <data source="row7">
      <label>Label</label>
    </data>
    <data source="row8" layout="default">
      <label>Label</label>
    </data>
    <data source="row9" layout="default">
      <label>Label</label>
    </data>
  </group>

<section class="pi-item pi-group pi-border-color"><h2 class="pi-item pi-header pi-secondary-font pi-item-spacing pi-secondary-background">Cabeçalho da seção</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%);">Label</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%);">Label</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%);">CCC</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%);">EEE</div>
 
    </section>
</section>
<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%);">Label</h3>
 
                <h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">Label</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%);">FFF</div>
 
            <div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">GGG</div>
 
    </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>

`header`

Atributos	Nenhum
Sub-tags	Nenhuma

A etiqueta 'header' determina o começo de uma seção ou grupo de tags.

Input

Output

<header>Texto do Cabeçalho</header>

Grupo padrão

<h2 class="pi-item pi-secondary-font pi-item-spacing pi-secondary-background pi-header">Texto do cabeçalho</h2>

Grupo Horizontal

<caption class="pi-secondary-font pi-secondary-background pi-item-spacing pi-header">Texto do cabeçalho</caption>

`navigation`

Atributos	Nenhum
Sub-tags	Nenhuma

Usada para apresentar wikitexto.

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

Referências

[0] Wikibooks xml introduction

[1] Portability Hub Office Hours, 2015-11-26

[1]

[2]

FANDOM

Etiquetas (tags) básicas

infobox

title

data

Modificadores do resultado

label

default

format

Tags de imagens

image

alt

caption

Outras tags

group

Grupos padrão

Grupo Horizontal

Smart Grupo

header

navigation

Referências

`infobox`

`title`

`data`

`label`

`default`

`format`

`image`

`alt`

`caption`

`group`

`header`

`navigation`