Gli infobox includono una grande varietà di tag e opzioni che possono essere usati per cambiare il layout dell'infobox. Qui di seguito trovi una lista dei tag standard, con esempi di wikitext e l'output in HTML, per aiutarti a capire cosa devi usare e come poterlo personalizzare con il CSS (vedi anche Aiuto:Infobox/CSS). Nota: possono essere usate anche le funzioni parser.

Tutti i campi di un infobox dovrebbero essere dichiarati usando la convenzione XML, con gli attributi usati per la configurazione dei campi.[1].

Tag di base[modifica | modifica sorgente]

infobox[modifica | modifica sorgente]

Attributi
  • theme
  • theme-source
  • layout
  • accent-color-source
  • accent-color-text-source
  • accent-color-default
  • accent-color-text-default
Tag figli
  • title
  • image
  • header
  • navigation
  • data
  • group

Il tag che contiene tutti gli altri e delimita l'area dell'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">Titolo</h2>
</aside>

title[modifica | modifica sorgente]

Attributi
  • source
Tag figli
  • default
  • format

Riporta il titolo dell'infobox.

Nota: Le immagini usate nei tag title vengono rimosse nei dispositivi mobili[2].

Input Output
<title source="title_source">
 <default>{{PAGENAME}}</default>
</title>
<h2 class="pi-item pi-item-spacing pi-title">Titolo della pagina</h2>

data[modifica | modifica sorgente]

Attributi
  • source
Tag figli
  • default
  • label
  • format

Tag standard per i valori chiave.

Input Output
<data source="name">
 <label>Nome</label>
 <default>John</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">John</div>
</div>

Modificatori dell'output[modifica | modifica sorgente]

label[modifica | modifica sorgente]

Attributi None
Tag figli None

Il tag label può essere usato solo all'interno di altri tag (vedi i dettagli nella colonna dei tag figli). Accetta wikitext.

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

default[modifica | modifica sorgente]

Attributi Nessuno
Tag figli Nessuno

Il tag default tag mostra il testo di default quando non ci sono altri dati; può essere usato solo all'interno di altri tag (vedi i dettagli nella colonna dei tag figli). Accetta wikitext.

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

format[modifica | modifica sorgente]

Attributi Nessuno
Tag figli Nessuno

Il tag format può essere usato solo all'interno di altri tag (vedi i dettagli nella colonna dei tag figli). Accetta wikitext.

Input Output
<data source="dollars">
 <label>Prezzo regolare</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">Prezzo regolare</h3>
 <div class="pi-font pi-data-value">15$</div>
</div>

Tag per le immagini[modifica | modifica sorgente]

image[modifica | modifica sorgente]

Attributi
  • source
Tag figli
  • alt
  • caption
  • default

Il tag image viene usato per inserire immagini o video in un infobox. Può essere personalizzato solo usano il CSS della community. Si possono inserire più immagini usando il tag gallery.

Qui si può usare il tag "default" per specificare un'immagine da mostrare quando non ne viene indicata alcuna nell'articolo. Esempio: <default>Esempio.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[modifica | modifica sorgente]

Attributi
  • source
Tag figli
  • default

Può essere usato solo all'interno del tag image.

Input Output
<image source="image">
 <alt source="alternative_title">
  <default>Testo alternativo di default</default>
 </alt>
</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="Testo alternativo di default" width="" height="" data-image-key="Image.jpg" data-image-name="Image.jpg">
 </a>
</figure>

caption[modifica | modifica sorgente]

Attributi
  • source
Tag figli
  • default
  • format

Può essere usato solo all'interno del tag image.

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

Altri tag[modifica | modifica sorgente]

group[modifica | modifica sorgente]

Attributi
  • layout
  • show
  • collapse
  • row-items
Tag figli
  • data
  • header
  • image

Usati per raggruppare i campi. Si può specificare un titolo (header) per ogni gruppo. I gruppi non vengono visualizzati (inclusi i titoli) quando tutti i campi sono vuoti. Tuttavia, se viene usato l'attributo show="incomplete", tutti i campi vengono mostrati se almeno uno non è vuoto.

Gruppo di default[modifica | modifica sorgente]

Input Output
<group>
 <header>Titolo del gruppo</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">Titolo del gruppo</h2>
 <div class="pi-item pi-item-spacing pi-data pi-border-color">
  <div class="pi-font pi-data-value">Valore</div>
 </div>
</section>

Gruppo orizzontale[modifica | modifica sorgente]

Input Output
<group layout="horizontal">
 <header>Titolo del gruppo</header>
 <data source="value1"><label>Etichetta</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">Titolo del gruppo</caption>
  <thead>
   <tr>
    <th class="pi-secondary-font pi-horizontal-group-item pi-data-label pi-border-color pi-item-spacing">Etichetta</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td class="pi-font pi-horizontal-group-item pi-data-value pi-border-color pi-item-spacing">Valore</td>
   </tr>
  </tbody>
 </table>
</section>

Gruppo intelligente[modifica | modifica sorgente]

Input Output
<group row-items="3">
    <header>Intestazione</header>
    <data source="row3">
      <label>Etichetta</label>
    </data>
    <data source="row4">
      <label>Etichetta</label>
    </data>
    <data source="row5">
      <label>Etichetta</label>
    </data>
    <data source="row6">
      <label>Etichetta</label>
    </data>
    <data source="row7">
      <label>Etichetta</label>
    </data>
    <data source="row8" layout="default">
      <label>Etichetta</label>
    </data>
    <data source="row9" layout="default">
      <label>Etichetta</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">Intestazione</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%);">Etichetta</h3>
            
                <h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">Etichetta</h3>
            
                <h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">Etichetta</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%);">Etichetta</h3>
            
                <h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">Etichetta</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">Etichetta</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">Etichetta</h3>
	
	<div class="pi-data-value pi-font">III</div>
</div>
</section>

header[modifica | modifica sorgente]

Attributi Nessuno
Tag figli Nessuno

Il tag header tag denota l'inizio di una sezione o di un gruppo di tag.

Input Output
<header>Testo del titolo</header>
Gruppo di default
<h2 class="pi-item pi-secondary-font pi-item-spacing pi-secondary-background pi-header">Testo del titolo</h2>
Gruppo orizzontale


<caption class="pi-secondary-font pi-secondary-background pi-item-spacing pi-header">Testo del titolo</caption>

navigation[modifica | modifica sorgente]

Attributi Nessuno
Tag figli Nessuno

Usato per inserire qualsiasi wikitext.

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>

Note[modifica | modifica sorgente]

I contenuti della comunità sono disponibili sotto la licenza CC-BY-SA a meno che non sia diversamente specificato.