Aiuto:Infobox/Tag

Gli infobox portatili includono una grande varietà di tag e opzioni che possono essere usati per cambiare il layout dell'infobox come desideri. Qui di seguito trovi una lista dei tag standard, con esempi di wikitext e relativo 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..

infobox

Il tag <infobox> contiene tutti gli altri e delimita l'area (scope) dell'infobox.

Tag validi

Tag padre	Tag figli
Nessuno	<title> <image> <header> <navigation> <data> <group> <panel>

Attributi

theme

Il nome del tema da applicare. Aggiunge una classe della forma .pi-theme-$1, con gli spazi convertiti in trattini (-). Non sovrascrive theme-source o type.

theme-source

Il nome del parametro da usare come tema. Aggiunge una classe all'infobox della forma .pi-theme-$1, con gli spazi trasformati in trattini (-). Non sovrascrive theme o type.

type

Il nome del tipo da applicare. Aggiunge una classe all'infobox della forma .type-$1, con gli spazi trasformati in trattini (-). Non sovrascrive theme o theme-source.

accent-color-source

Il nome del parametro da usare come colore secondario.

accent-color-default

Il colore secondario di default. Accetta codici colore esadecimali da 3 o 6 cifre, per esempio #f00 o #ff0000.

accent-color-text-source

Il nome del parametro da usare come colore secondario per il testo.

accent-color-text-default

Il colore secondardio per il testo di default. Accetta codici colore esadecimali da 3 o 6 cifre, per esempio #f00 o #ff0000.

layout

Valori possibili: default, stacked.

name

Nome interno per l'elemento e i suoi figli. Assegnato all'attributo data-item-name nell'HTML risultante.

Output HTML

Input

<infobox>
    <title source="title_source" />
</infobox>

Output

<aside class="portable-infobox pi-background pi-border-color pi-theme-wikia pi-layout-default">
    <h2 class="pi-item pi-item-spacing pi-title pi-secondary-background" data-source="title_source">Titolo</h2>
</aside>

title

Il tag <title> riporta il titolo dell'infobox. Le immagini usate nel tag <title> non appaiono sui dispositivi mobili.

Tag validi

Tag padre	Tag figli
<infobox> <group>	<default> <format>

Attributi

source

Il nome del parametro da usare.

name

Nome interno per l'elemento e i suoi figli. Assegnato all'attributo data-item-name nell'HTML risultante.

Output HTML

Input

<title source="titolo">
    <default>{{PAGENAME}}</default>
</title>

Output

<h2 class="pi-item pi-item-spacing pi-title pi-secondary-background" data-source="titolo">Titolo della pagina</h2>

data

Il tag <data> è il tag standard per chavi dei valori

Tag validi

Tag padre	Tag figli
<infobox> <group>	<default> <label> <format>

Attributi

source

Il nome del parametro da usare.

span

Il numero di colonne da coprire. Disponibile solo nei gruppi intelligenti.

layout

Possibili valori: default. Disponibile solo nei gruppi intelligenti.

name

Nome interno per l'elemento e i suoi figli. Assegnato all'attributo data-item-name nell'HTML risultante.

Output HTML

Input

<data source="nome">
 <label>Nome</label>
 <default>John</default>
</data>

Output

<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>

label

Il tag <label> può essere usato solo all'interno di altri tag, controlla la colonna dei tag padre per maggiori informazioni. Accetta wikitext.

Tag validi

Tag padre	Tag figli
<data> <section>	Nessuno

Attributi

Nessuno.

Output HTML

Input

<label>Nome</label>

Output

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

default

Il tag <default> mostra il testo di default quando non viene specificato nulla in "source"; può essere usato solo all'interno di altri tag, controlla la colonna dei tag padre per maggiori informazioni. Accetta wikitext.

Tag validi

Tag padre	Tag figli
<title> <data> <image> <alt> <caption>	Nessuno

Attributi

Nessuno.

Output HTML

Input

<default>John</default>

Output

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

format

Il tag <format> può essere usato solo all'interno di altri tag, controlla la colonna dei tag padre per maggiori informazioni. Accetta wikitext.

Tag validi

Tag padre	Tag figli
<title> <data> <caption>	Nessuno

Attributi

Nessuno.

Output HTML

Input

<data source="dollars">
 <label>Prezzo regolare</label>
 <format>${{{dollars}}}</format>
</data>

Output

<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>

image

Il tag <image> viene usato per inserire immagini o video in un infobox. Può essere personalizzato solo attraverso il CSS della community. Le immagini sono normalizzato, in mddo che [[File:Esempio.jpg]] e Esempio.jpg facciano la stessa cosa. 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>.

Tag validi

Tag padre	Tag figli
<infobox> <group>	<alt> <caption> <default>

Attributi

source

Il nome del parametro da usare.

name

Nome interno per l'elemento e i suoi figli. Assegnato all'attributo data-item-name nell'HTML risultante.

Output HTML

Input

<image source="image" />

Output

<figure class="pi-item pi-image" data-source="image">
    <a class="image image-thumbnail" href=".../Image.jpg/revision/latest/..." title="">
        <img class="pi-image-thumbnail" src="...Image.jpg..." srcset="...Image.jpg... 2x" alt="" data-image-key="Image.jpg" data-image-name="Image.jpg" width="" height="">
    </a>
</figure>

alt

Il tag <alt> può essere usato solo dentro un tag <image>.

Tag validi

Tag padre	Tag figli
<image>	<default>

Attributi

source

Il nome del parametro da usare.

Output HTML

Input

<image source="image">
 <alt source="alternative_title">
  <default>Testo alternativo di default</default>
 </alt>
</image>

Output

<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

Il tag <caption> può essere usato solo dentro un tag <image>.

Tag validi

Tag padre	Tag figli
<image>	<default> <format>

Attributi

source

Il nome del parametro da usare.

Output HTML

Input

<image source="image">
 <caption source="caption">
  <default>La mia didascalia</default>
 </caption>
</image>

Output

<figcaption class="pi-item-spacing pi-caption">La mia didascalia</figcaption>

group

Il tag <group> è utilizzato per raggruppare i campo, e in modo opzionale accetta un titolo (header) per ciascun 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.

Tag validi

Tag padre	Tag figli
<infobox> <group> <section>	<data> <header> <image> <title> <group> <navigation> <panel>

Attributi

layout

Possibili valori: default, horizontal.

show

Possibili valori: default, incomplete.

collapse

Possibili valori: open, closed. Disponibile solo il primo figlio del gruppo è un tag <header>.

row-items

Trasforma il gruppo in un gruppo intelligente che copre n colonne. I gruppi intelligente dispongono le proprie celle (i tag <data>) orizzontalmente, e passano automaticamente ad un nuova riga quando quella corrente supera il limite. Le celle sono allungate per coprire tutto lo spazio possibile dell'ultima riga.

name

Nome interno per l'elemento e i suoi figli. Assegnato all'attributo data-item-name nell'HTML risultante.

Output HTML

Gruppo di default

Input

<group>
 <header>Titolo del gruppo</header>
 <data source="value1" />
</group>

Output

<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-data pi-item-spacing pi-border-color" data-source="value1">
        <div class="pi-data-value pi-font">Valore</div>
    </div>
</section>

Gruppo orizzontale

Input

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

Gruppo intelligente

Input

<group row-items="3">
    <header>Intestazione</header>
    <data source="value 1">
        <label>Etichetta 1</label>
    </data>
    <data source="value 2">
        <label>Etichetta 2</label>
    </data>
    <data source="value 3">
        <label>Etichetta 3</label>
    </data>
    <data source="value 4" layout="default">
        <label>Etichetta 4</label>
    </data>
    <data source="value 5">
        <label>Etichetta 5</label>
    </data>
    <data source="value 6">
        <label>Etichetta 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">Intestazione</h2>
    <section class="pi-item pi-smart-group pi-border-color">
        <section class="pi-smart-group-head pi-border-color">
            <h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing pi-border-color" style="width: calc(1 / 3 * 100%);" data-source="value 1">Etichetta 1</h3>
            <h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing pi-border-color" style="width: calc(1 / 3 * 100%);" data-source="value 2">Etichetta 2</h3>
            <h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing pi-border-color" style="width: calc(1 / 3 * 100%);" data-source="value 3">Etichetta 3</h3>
        </section>
        <section class="pi-smart-group-body pi-border-color">
            <div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing pi-border-color" 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 pi-border-color" 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 pi-border-color" 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">Etichetta 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 pi-border-color">
            <h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing pi-border-color" style="width: calc(1 / 2 * 100%);" data-source="value 5">Etichetta 5</h3>
            <h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing pi-border-color" style="width: calc(1 / 2 * 100%);" data-source="value 6">Etichetta 6</h3>
        </section>
        <section class="pi-smart-group-body pi-border-color">
            <div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing pi-border-color" 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 pi-border-color" style="width: calc(1 / 2 * 100%);" data-source="value 6">FFF</div>
        </section>
    </section>
</section>

header

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

Tag validi

Tag padre	Tag figli
<infobox> <group> <panel>	Nessuno

Attributi

name

Nome interno per l'elemento e i suoi figli. Assegnato all'attributo data-item-name nell'HTML risultante.

Output HTML

Input

<header>Testo del titolo</header>

Output gruppo di default

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

Output gruppo orizzontale

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

navigation

Il tag <navigation> è utilizzato per inserire qualsiasi tipo di wikitext.

Tag validi

Tag padre	Tag figli
<infobox> <group> (non disponibile nei gruppi orizzontali)	Nessuno

Attributi

name

Nome interno per l'elemento e i suoi figli. Assegnato all'attributo data-item-name nell'HTML risultante.

Output HTML

Input

<navigation>[[Link]]</navigation>

Output

<nav class="pi-navigation pi-item-spacing pi-secondary-font">
    <a href="/wiki/Link" title="Link">Link</a>
</nav>

panel

Il tag <panel> è utilizzato per creare un'interfaccia con più schede, dove ciascuna scheda è all'interno di un tag <section>.

Tag validi

Tag padre	Tag figli
<infobox> <group>	<header> <section>

Attributi

name

Nome interno dell'elemento e dei suoi figli. Assegnato all'attributo data-item-name nell'HTML risultante.

Output HTML

Input

<panel>
    <section>
        <label>A</label>
        <data source="uno" />
        <data source="due" />
    </section>
    <section>
        <label>B</label>
        <data source="tre" />
        <data source=""quattro" />
    </section>
</panel>

Output

<section class="pi-item pi-panel pi-border-color wds-tabber">
    <div class="wds-tabs__wrapper">
        <div class="wds-tabs__arrow-left" />
        <ul class="wds-tabs">
            <li class="wds-tabs__tab wds-is-current">
                <div class="wds-tabs__tab-label">A</div>
            </li>
            <li class="wds-tabs__tab">
                <div class="wds-tabs__tab-label">B</div>
            </li>
        </ul>
        <div class="wds-tabs__arrow-right" />
    </div>
    <div class="wds-tab__content wds-is-current">
        <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="uno">
            <div class="pi-data-value pi-font">Primo</div>
        </div>
        <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="due">
            <div class="pi-data-value pi-font">Secondo</div>
        </div>
    </div>
    <div class="wds-tab__content">
        <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="tre">
            <div class="pi-data-value pi-font">Terzo</div>
        </div>
        <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="quattro">
            <div class="pi-data-value pi-font">Quarto</div>
        </div>
    </div>
</section>

section

Il tag <section> rappresenta il contenuto di una scheda. L'etichetta cliccabile è rappresentata da un tag <label>. Le etichette se omesse hanno come default il loro indice che parte da zero; se tutte le schede di un pannello non hanno etichette, sono allora disposte verticalmente..

Tag validi

Tag padre	Tag figli
<panel>	<title> <data> <label> <image> <group> <header> <navigation>

Attributi

name

Nome interno per l'elemento e i suoi figli. Assegnato all'attributo data-item-name nell'HTML risultante

Output HTML

Input

<section>
    <label>A</label>
    <data source="uno" />
    <data source="due" />
</section>

Output

<div class="wds-tab__content">
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="uno">
        <div class="pi-data-value pi-font">Primo</div>
    </div>
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="due">
        <div class="pi-data-value pi-font">Secondo</div>
    </div>
</div>