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

<infobox>[modifier le wikicode]

La balise <infobox> contient toutes les autres et délimite la portée de l'infobox.

Balises valides[modifier le wikicode]

Balises parentes Balises enfants
Aucune
  • <title>
  • <image>
  • <header>
  • <navigation>
  • <data>
  • <group>
  • <panel>

Attributs[modifier le wikicode]

theme
Le nom du thème à appliquer. Ajoute une classe à l'infobox de la forme .pi-theme-$1, avec les espaces transformées en tirets (-). N'écrase pas theme-source ou type.
theme-source
Le nom du paramètre à utiliser comme thème. Ajoute une classe à l'infobox de la forme .pi-theme-$1, avec les espaces transformées en tirets (-). N'écrase pas theme ou type.
type
Le nom du type à appliquer. Ajoute une classe à l'infobox de la forme .type-$1, les espaces étant transformées en tirets (-). N'écrase pas theme ou theme-source.
accent-color-source
Le nom du paramètre à utiliser comme couleur accentuée.
accent-color-default
La couleur accentuée par défaut. Accepte un code couleur hexadécimal à 3 ou 6 chiffres, par exemple #f00 ou #ff0000.
accent-color-text-source
Le nom du paramètre à utiliser comme couleur accentuée du texte.
accent-color-text-default
La couleur accentuée du texte par défaut. Accepte un code couleur hexadécimal à 3 ou 6 chiffres, par exemple #f00 ou #ff0000.
layout
Valeurs possibles : default, stacked.
name
Nom interne de l'élément et de ses enfants. Attribué à l'attribut data-item-name dans le HTML résultant.

Rendu HTML[modifier le wikicode]

Code
<infobox>
    <title source="titre_source" />
</infobox>
Rendu
<aside class="portable-infobox pi-background pi-theme-wikia pi-layout-default">
    <h2 class="pi-item pi-item-spacing pi-title" data-source="titre_source">Titre</h2>
</aside>

<title>[modifier le wikicode]

La balise <title> indique le titre de l'infobox. Les images utilisées dans les balises <title> n'apparaissent pas sur mobile.

Balises valides[modifier le wikicode]

Balises parentes Balises enfants
  • <infobox>
  • <group>
  • <default>
  • <format>

Attributs[modifier le wikicode]

source
Le nom du paramètre à utiliser.
name
Nom interne de l'élément et de ses enfants. Attribué à l'attribut data-item-name dans le HTML résultant.

Rendu HTML[modifier le wikicode]

Code
<title source="titre_source">
    <default>{{PAGENAME}}</default>
</title>
Rendu
Modèle:Defn

<data>[modifier le wikicode]

La balise <data> est la balise clé de valeur standard.

Balises valides[modifier le wikicode]

Balises parentes Balises enfants
  • <infobox>
  • <group>
  • <default>
  • <label>
  • <format>

Attributs[modifier le wikicode]

source
Le nom du paramètre à utiliser.
span
Le nombre de colonnes à afficher. Disponible uniquement dans les groupes intelligents.
layout
Valeurs possibles : default. Disponible uniquement dans les groupes intelligents.
name
Nom interne de l'élément et de ses enfants. Attribué à l'attribut data-item-name dans le HTML résultant.

Rendu HTML[modifier le wikicode]

Code
<data source="nom">
    <label>Prénom</label>
</data>
Rendu
<div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="nom">
    <h3 class="pi-data-label pi-secondary-font">Prénom</h3>
    <div class="pi-data-value pi-font">John</div>
</div>

<label>[modifier le wikicode]

La balise <label> ne peut être utilisé qu'à l'intérieur d'autres balises, consultez la colonne des balises enfant pour plus d'informations. Accepte le wikitexte.

Balises valides[modifier le wikicode]

Balises parentes Balises enfants
  • <data>
  • <section>
Aucune

Attributs[modifier le wikicode]

Aucun.

Rendu HTML[modifier le wikicode]

Code
<label>First name</label>
Rendu
<h3 class="pi-data-label pi-secondary-font">First name</h3>

<default>[modifier le wikicode]

Le texte de la balise <default> est utilisé lorsqu'aucune donnée n'est spécifiée dans « source », il ne peut être utilisé qu'à l'intérieur d'autres balises, consultez la colonne des balises enfants pour plus d'informations. Accepte le wikitexte.

Balises valides[modifier le wikicode]

Balises parentes Balises enfants
  • <title>
  • <data>
  • <image>
  • <alt>
  • <caption>
Aucune

Attributs[modifier le wikicode]

Aucun.

Rendu HTML[modifier le wikicode]

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

<format>[modifier le wikicode]

La balise <format> ne peut être utilisée qu'à l'intérieur d'autres balises, consultez la colonne des balises enfants pour plus d'informations. Accepte le wikitexte.

Balises valides[modifier le wikicode]

Balises parentes Balises enfants
  • <title>
  • <data>
  • <caption>
Aucune

Attributs[modifier le wikicode]

Aucun.

Rendu HTML[modifier le wikicode]

Code
<data source="euros">
    <label>Prix habituel</label>
    <format>{{{euros}}}&nbsp;</format>
</data>
Rendu
<div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="euros">
    <h3 class="pi-data-label pi-secondary-font">Prix habituel</h3>
    <div class="pi-data-value pi-font">15&nbsp;</div>
</div>

<image>[modifier le wikicode]

La balise <image> est utilisée pour insérer des images ou des vidéos dans une infobox. Elle ne peut être stylisée qu'à l'aide des balises CSS et ne peut être redimensionnée manuellement. Les images sont normalisées, de sorte que [[Fichier:Exemple.jpg]] et Exemple.jpg font la même chose. Plusieurs images peuvent être transmises en utilisant une balise <gallery>.

Ici, la balise <default> est utilisée pour spécifier une image à utiliser lorsqu'aucune image n'a été choisie sur un article. Par exemple, <default>Exemple.jpg</default>.

Balises valides[modifier le wikicode]

Balises parentes Balises enfants
  • <infobox>
  • <group>
  • <alt>
  • <caption>
  • <default>

Attributs[modifier le wikicode]

source
Le nom du paramètre à utiliser.
name
Nom interne de l'élément et de ses enfants. Attribué à l'attribut data-item-name dans le HTML résultant.

Rendu HTML[modifier le wikicode]

Code
<image source="image" />
Rendu
<figure class="pi-item pi-image" data-source="image">
    <a href="…/Fichier:Image.jpg" class="image image-thumbnail" title="">
        <img src="Image.jpg" srcset="Image.jpg 1x, Image.jpg 2x" class="pi-image-thumbnail" alt="" data-image-key="Image.jpg" data-image-name="Image.jpg" width="" height="">
    </a>
</figure>

<alt>[modifier le wikicode]

La balise <alt> ne peut être utilisée qu'à l'intérieur de la balise <image>.

Balises valides[modifier le wikicode]

Balises parentes Balises enfants
  • <image>
  • <default>

Attributs[modifier le wikicode]

source
Le nom du paramètre à utiliser.

Rendu HTML[modifier le wikicode]

Code
<image source="image">
    <alt source="titre_alternatif">
        <default>Texte alt par défaut</default>
    </alt>
</image>
Rendu
<figure class="pi-item pi-image" data-source="image">
    <a href="…/Fichier:Image.jpg" class="image image-thumbnail" title="Texte alt par défaut">
        <img src="Image.jpg" srcset="Image.jpg 1x, Image.jpg 2x" class="pi-image-thumbnail" alt="Texte alt par défaut" data-image-key="Image.jpg" data-image-name="Image.jpg" width="" height="">
    </a>
</figure>

<caption>[modifier le wikicode]

La balise <caption> ne peut être utilisée qu'à l'intérieur de la balise <image>.

Balises valides[modifier le wikicode]

Balises parentes Balises enfants
  • <image>
  • <default>
  • <format>

Attributs[modifier le wikicode]

source
Le nom du paramètre à utiliser.

Rendu HTML[modifier le wikicode]

Code
<image source="image">
    <caption source="caption">
        <default>Ma légende</default>
    </caption>
</image>
Rendu
<figcaption class="pi-item-spacing pi-caption">Ma légende</figcaption>

<group>[modifier le wikicode]

La balise <group> est utilisée pour regrouper les champs, et accepte une en-tête optionnelle pour chaque groupe. Un groupe ne sera pas affiché (y compris les en-têtes) si tous les champs sont vides. Cependant, si l'attribut show est défini sur incomplete, il affichera tous les champs du groupe si au moins un champ n'est pas vide.

Balises valides[modifier le wikicode]

Balises parentes Balises enfants
  • <infobox>
  • <group>
  • <data>
  • <header>
  • <image>
  • <title>
  • <group>
  • <navigation>
  • <panel>

Attributs[modifier le wikicode]

layout
Valeurs possibles : default. Disponible uniquement dans les groupes intelligents.
show
Valeurs possibles : default, incomplete.
collapse
Valeurs possibles : open, closed. Disponible uniquement si le premier enfant du groupe est une balise <header>.
row-items
Transforme le groupe en un groupe intelligent comprenant « n » colonnes. Les groupes intelligents organisent leurs cellules (balises <data>) horizontalement, et passent automatiquement sur une nouvelle ligne dès que la ligne actuelle dépasse cette limite. Les cellules sont étirées pour prendre le plus de place possible sur la dernière ligne.
name
Nom interne de l'élément et de ses enfants. Attribué à l'attribut data-item-name dans le HTML résultant.

Rendu HTML[modifier le wikicode]

Groupe par défaut[modifier le wikicode]

Code
<group layout="horizontal">
    <header>Nom de groupe</header>
    <data source="valeur1">
        <label>Libellé de donnée</label>
    </data>
</group>
Rendu
<section class="pi-item pi-group pi-border-color">
    <h2 class="pi-item pi-header pi-secondary-font pi-item-spacing pi-secondary-background">Nom de groupe</h2>
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="valeur1">
        <div class="pi-data-value pi-font">Valeur de donnée</div>
    </div>
</section>

Groupe horizontal[modifier le wikicode]

Code
<group layout="horizontal">
    <header>Nom de groupe</header>
    <data source="valeur1">
        <label>Libellé de donnée</label>
    </data>
</group>
Rendu
<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">Nom de groupe</caption>
        <thead>
            <tr>
                <th class="pi-horizontal-group-item pi-data-label pi-secondary-font pi-border-color pi-item-spacing" data-source="valeur1">Libellé de donnée</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">Valeur de donnée</td>
            </tr>
        </tbody>
    </table>
</section>

Groupe intelligent[modifier le wikicode]

Code
<group row-items="3">
    <header>En-tête de section</header>
    <data source="valeur1">
        <label>Libellé 1</label>
    </data>
    <data source="valeur2">
        <label>Libellé 2</label>
    </data>
    <data source="valeur3">
        <label>Libellé 3</label>
    </data>
    <data source="valeur4" layout="default">
        <label>Libellé 4</label>
    </data>
    <data source="valeur5">
        <label>Libellé 5</label>
    </data>
    <data source="valeur6">
        <label>Libellé 6</label>
    </data>
</group>
Rendu
<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%);" data-source="valeur1">Libellé 1</h3>
            <h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 3 * 100%);" data-source="valeur2">Libellé 2</h3>
            <h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 3 * 100%);" data-source="valeur3">Libellé 3</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%);" data-source="valeur1">AAA</div>
            <div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 3 * 100%);" data-source="valeur2">BBB</div>
            <div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 3 * 100%);" data-source="valeur3">CCC</div>
        </section>
    </section>
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="valeur4">
        <h3 class="pi-data-label pi-secondary-font">Libellé 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">
            <h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 2 * 100%);" data-source="valeur5">Libellé 5</h3>
            <h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 2 * 100%);" data-source="valeur6">Libellé 6</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%);" data-source="valeur5">EEE</div>
            <div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 2 * 100%);" data-source="valeur6">FFF</div>
        </section>
    </section>
</section>

<header>[modifier le wikicode]

La balise <header> indique le début d'une section ou d'un groupe de balises.

Balises valides[modifier le wikicode]

Balises parentes Balises enfants
  • <infobox>
  • <group>
  • <panel>
Aucun

Attributs[modifier le wikicode]

name
Nom interne de l'élément et de ses enfants. Attribué à l'attribut data-item-name dans le HTML résultant.

Rendu HTML[modifier le wikicode]

Code
<header>Texte d'en-tête</header>
Rendu par défaut des groupes
<h2 class="pi-item pi-header pi-secondary-font pi-item-spacing pi-secondary-background">Texte d'en-tête</h2>
Rendu horizontal des groupes
<caption class="pi-header pi-secondary-font pi-secondary-background pi-item-spacing">Texte d'en-tête</caption>

<navigation>[modifier le wikicode]

La balise <navigation> est utilisée pour afficher n'importe quel wikitexte.

Balises valides[modifier le wikicode]

Balises parentes Balises enfants
Aucun

Attributs[modifier le wikicode]

name
Nom interne de l'élément et de ses enfants. Attribué à l'attribut data-item-name dans le HTML résultant.

Rendu HTML[modifier le wikicode]

Code
<navigation>[[Lien]]</navigation>
Rendu
<nav class="pi-navigation pi-item-spacing pi-secondary-background pi-secondary-font">
    <a href="/wiki/Lien" title="Lien">Lien</a>
</nav>

<panel>[modifier le wikicode]

La balise <panel> est utilisée pour créer des interfaces à onglets, où le contenu de chaque onglet est encapsulé dans une balise <section>.

Balises valides[modifier le wikicode]

Balises parentes Balises enfants
  • <infobox>
  • <group>
  • <header>
  • <section>

Attributs[modifier le wikicode]

name
Nom interne de l'élément et de ses enfants. Attribué à l'attribut data-item-name dans le HTML résultant.

Rendu HTML[modifier le wikicode]

Code
<panel>
    <section>
        <label>A</label>
        <data source="un" />
        <data source="deux" />
    </section>
    <section>
        <label>B</label>
        <data source="trois" />
        <data source="quatre" />
    </section>
</panel>
Rendu
<section class="pi-item pi-panel pi-border-color">
    <div class="pi-panel-scroll-wrapper">
        <ul class="pi-section-navigation">
            <li class="pi-section-tab pi-section-active" data-ref="0">
                <div class="pi-section-label">A</div>
            </li>
            <li class="pi-section-tab" data-ref="1">
                <div class="pi-section-label">B</div>
            </li>
        </ul>
    </div>
    <div class="pi-section-contents">
        <div class="pi-section-content pi-section-active" data-ref="0">
            <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="un">
                <div class="pi-data-value pi-font">1<sup>er</sup></div>
            </div>
            <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="deux">
                <div class="pi-data-value pi-font">2<sup>e</sup></div>
            </div>
        </div>
        <div class="pi-section-content" data-ref="1">
            <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="trois">
                <div class="pi-data-value pi-font">3<sup>e</sup></div>
            </div>
            <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="quatre">
                <div class="pi-data-value pi-font">4<sup>e</sup></div>
            </div>
        </div>
    </div>
</section>

<section>[modifier le wikicode]

La balise <section> représente le contenu d'un onglet. Le commutateur cliquable est représenté par une balise <label>. Par défaut, les libellés sont indexés à partir de zéro s'ils sont omis ; si tous les onglets d'un panel ne sont pas accompagnés d'un libellé, ils sont alors empilés verticalement.

Balises valides[modifier le wikicode]

Balises parentes Balises enfants
  • <panel>
  • <title>
  • <data>
  • <label>
  • <image>
  • <group>
  • <header>
  • <navigation>

Attributs[modifier le wikicode]

name
Nom interne de l'élément et de ses enfants. Attribué à l'attribut data-item-name dans le HTML résultant.

Rendu HTML[modifier le wikicode]

Code
<section>
    <label>A</label>
    <data source="un" />
    <data source="deux" />
</section>
Rendu
<div class="pi-section-content" data-ref="0">
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="un">
        <div class="pi-data-value pi-font">1<sup>er</sup></div>
    </div>
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="deux">
        <div class="pi-data-value pi-font">2<sup>e</sup></div>
    </div>
</div>

Références[modifier le wikicode]

Sauf mention contraire, le contenu de la communauté est disponible sous licence CC-BY-SA.