FANDOM

Wiki della Community
Wiki della Community
654 Pagine
Crea nuova pagina
in:
Aiuto

Aiuto:Infobox/Tag

< Aiuto:Infobox
Modifica
Condividi

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 baseModifica

infoboxModifica

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>

titleModifica

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>

dataModifica

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

labelModifica

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>

defaultModifica

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>

formatModifica

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 immaginiModifica

imageModifica

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>

altModifica

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>

captionModifica

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 tagModifica

groupModifica

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 defaultModifica

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 orizzontaleModifica

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 intelligenteModifica

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>

headerModifica

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>

navigationModifica

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>

NoteModifica

  1. ↑ Introduzione all'xml di Wikibooks
  2. ↑ http://portability.wikia.com/wiki/Thread:3033#15
Estratto da "http://it.community.wikia.com/wiki/Aiuto:Infobox/Tag?oldid=34147"