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] .
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 >
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 >
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
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
<h3 class = "pi-secondary-font pi-data-label" > Nome</ h3 >
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
<div class = "pi-font pi-data-value" > John</ div >
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
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
<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 >
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 >
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 >
Attributi
layout
show
collapse
row-items
Tag figli
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
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
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
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 >
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 >
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 >
↑ Introduzione all'xml di Wikibooks
↑ http://portability.wikia.com/wiki/Thread:3033#15