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

[1] Wikibooks xml introduction

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

[1]

[2]

Ajuda:Infoboxes/Tags

Índice

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

Conteúdo dos fãs