FANDOM


Les infoboxes portables incluent une grande variété de balises et options que vous pouvez utiliser pour que l'infobox soit affichée à votre guise. Nous avons listé ci-dessous toutes les balises standards, avec des exemples de wikitexte et rendu HTML, pour vous aider à identifier ce que vous avez besoin d'utiliser et comment les relooker avec le CSS (voir aussi Aide:Infoboxes portables/CSS). Notez que les fonctions parseurs peuvent également être utilisées.

Tous les champs de l'infobox doivent être déclarés en utilisant la convention XML, avec des attributs utilisés pour la configuration des champs[1]

Balises de baseModifier

infoboxModifier

Attributs
  • theme
  • theme-source
  • layout
  • accent-color-source
  • accent-color-text-source
  • accent-color-default
  • accent-color-text-default
Balises utilisables
  • title
  • image
  • header
  • navigation
  • data
  • group

Balise qui englobe toutes les autres et délimite le cadre de l'infobox.

Exemple d'utilisation Rendu HTML
<infobox>
	<title source="titre" />
</infobox>
<aside class="portable-infobox pi-background pi-theme-wikia pi-layout-default">
	<h2 class="pi-item pi-item-spacing pi-title">Title</h2>
</aside>

titleModifier

Attributs
  • source
Balises utilisables
  • default
  • format

Déclare le titre de l'infobox. Les images utilisées dans la balise title n'apparaissent pas sous version mobile[2].

Exemple d'utilisation Rendu HTML
<title source="title_source">
	<default>{{PAGENAME}}</default>
</title>
<h2 class="pi-item pi-item-spacing pi-title">Nom de la page</h2>

dataModifier

Attributs
  • source
  • span
  • layout
Balises utilisables
  • default
  • label
  • format

Clé de valeur standard.

Exemple d'utilisation Rendu HTML
<data source="nom">
	<label>Prénom</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">Prénom</h3>
	<div class="pi-font pi-data-value">John</div>
</div>

Éditeurs de rendu HTMLModifier

labelModifier

Attributs None
Balises utilisables None

Libellé, ne peut être utilisée qu'à l'intérieur d'autres balises, consulter la colonne « Balises utilisables » pour plus d'informations. Accepte le wikitexte.

Exemple d'utilisation Rendu HTML
<label>Prénom</label>
<h3 class="pi-secondary-font pi-data-label">Prénom</h3>

defaultModifier

Attributs None
Balises utilisables None

La balise de valeur par défaut n'est utilisée que quand la « source » de la valeur n'est pas précisée, ne peut être utilisée qu'à l'intérieur d'autres balises, consulter la colonne « Balises utilisables » pour plus d'informations. Accepte le wikitexte.

Exemple d'utilisation Rendu HTML
<default>John</default>
<div class="pi-font pi-data-value">John</div>

formatModifier

Attributs None
Balises utilisables None

Formatage, ne peut être utilisée qu'à l'intérieur d'autres balises, consulter la colonne « Balises enfants » pour plus d'informations. Accepte le wikitexte.

Exemple d'utilisation Rendu HTML
<data source="dollars">
	<label>Prix</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">Prix</h3>
	<div class="pi-font pi-data-value">$15</div>
</div>

Balises d'imageModifier

imageModifier

Attributs
  • source
Balises utilisables
  • alt
  • caption
  • default

Balise d'image, utilisée pour insérer des images ou des vidéos dans l'infobox. Son style ne peut être modifié qu'en utilisant le CSS, et ne peut pas être modifiée manuellement. Plusieurs images peuvent être insérées en utilisant une balise gallery.

Ici, la balise default est utilisée pour indiquer une image à utiliser pour des articles n'ayant pas d'image précisée, comme par exemple, <default>Example.jpg</default>.

Exemple d'utilisation Rendu HTML
<image source="image" />
<figure class="pi-item pi-image">
	<a href=".../Fichier: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>

altModifier

Attributs
  • source
Balises utilisables
  • default

Ne peut être utilisée qu'à l'intérieur de la balise image.

Exemple d'utilisation Rendu HTML
<image source="image">
	<alt source="titre_alternatif">
		<default>Texte alternatif par défaut</default>
	</alt>
</image>
<figure class="pi-item pi-image">
	<a href=".../Fichier:Image.jpg" class="image image-thumbnail" title="Texte alternatif par défaut">
		<img src="Image.jpg" class="pi-image-thumbnail" alt="Texte alternatif par défaut" width="" height="" data-image-key="Image.jpg" data-image-name="Image.jpg">
	</a>
</figure>

captionModifier

Attributs
  • source
Balises utilisables
  • default
  • format

Ne peut être utilisée qu'à l'intérieur de la balise image.

Exemple d'utilisation Rendu HTML
<image source="image">
	<caption source="légende">
		<default>Ma légende</default>
	</caption>
</image>
<figcaption class="pi-item-spacing pi-caption">Ma légende</figcaption>

Autres balisesModifier

groupModifier

Attributs
  • layout
  • show
  • collapse
  • row-items
Balises utilisables
  • data
  • header
  • image
  • title
  • navigation

Utilisée pour grouper des champs, peut indiquer un en-tête pour chaque groupe. Le groupe ne sera pas affiché (en-tête y compris) quand tous les champs sont vides. En revanche, si l'attribut show est défini comme incomplete, cela affichera toutes les lignes du groupe si au moins une ligne n'est pas vide.

Groupe par défautModifier

Exemple d'utilisation Rendu HTML
<group>
	<header>Nom du groupe</header>
	<data source="valeur1" />
</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">Nom du groupe</h2>
	<div class="pi-item pi-item-spacing pi-data pi-border-color">
		<div class="pi-font pi-data-value">Valeur</div>
	</div>
</section>

Groupe horizontalModifier

Exemple d'utilisation Rendu HTML
<group layout="horizontal">
	<header>Nom du groupe</header>
	<data source="valeur1">
		<label>Label</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">Nom du groupe</caption>
		<thead>
			<tr>
				<th class="pi-secondary-font pi-horizontal-group-item pi-data-label pi-border-color pi-item-spacing">Label</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td class="pi-font pi-horizontal-group-item pi-data-value pi-border-color pi-item-spacing">Valeur</td>
			</tr>
		</tbody>
	</table>
</section>

Smart groupModifier

Exemple d'utilisation Rendu HTML
<group row-items="3">
    <header>En-tête de section</header>
    <data source="ligne3">
      <label>Label</label>
    </data>
    <data source="ligne4">
      <label>Label</label>
    </data>
    <data source="ligne5">
      <label>Label</label>
    </data>
    <data source="ligne6">
      <label>Label</label>
    </data>
    <data source="ligne7">
      <label>Label</label>
    </data>
    <data source="ligne8" layout="default">
      <label>Label</label>
    </data>
    <data source="ligne9" layout="default">
      <label>Label</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">En-tête de section</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%);">Label</h3>
 
                <h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">Label</h3>
 
                <h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">Label</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%);">Label</h3>
 
                <h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">Label</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">Label</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">Label</h3>
 
	<div class="pi-data-value pi-font">III</div>
</div>
</section>

headerModifier

Attributs None
Balises utilisables None

Désigne le début d'une section ou groupe de balises.

Exemple d'utilisation Rendu HTML
<header>Texte de l'en-tête</header>
Groupe par défaut
<h2 class="pi-item pi-secondary-font pi-item-spacing pi-secondary-background pi-header">Texte de l'en-tête</h2>
Groupe horizontal


<caption class="pi-secondary-font pi-secondary-background pi-item-spacing pi-header">Texte de l'en-tête</caption>

navigationModifier

Attributs None
Balises utilisables None

Utilisée pour indiquer tout wikitexte.

Exemple d'utilisation Rendu HTML
<navigation>[[Lien]]</navigation>
<nav class="pi-item-spacing pi-secondary-background pi-secondary-font pi-navigation">
	<a href="/wiki/Link" title="Lien">Lien</a>
</nav>

RéférencesModifier

  1. Introduction au XML de Wikibooks (en anglais)
  2. Assemblée virtuelle autour de la portabilité du contenu du 26 novembre 2015 (en anglais)
Sauf mention contraire, le contenu de la communauté est disponible sous licence CC-BY-SA  .