Wiki della Community
Advertisement

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.[1].

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

Note[]

Advertisement