Centre des communautés
S'inscrire
Advertisement
Centre des communautés

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

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

Balises valides[]

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

Attributs[]

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

Code
<infobox>
    <title source="titre_source" />
</infobox>
Rendu
<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="titre_source">Titre</h2>
</aside>

title[]

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

Balises valides[]

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

Attributs[]

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

Code
<title source="titre_source">
    <default>{{PAGENAME}}</default>
</title>
Rendu
<h2 class="pi-item pi-item-spacing pi-title pi-secondary-background" data-source="titre_source">Nom de page</h2>

data[]

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

Balises valides[]

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

Attributs[]

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

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

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. Sur mobile, les balises HTML dans <label> seront supprimées, ne laissant que leur contenu.

Balises valides[]

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

Attributs[]

Aucun.

Rendu HTML[]

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

default[]

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

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

Attributs[]

Aucun.

Rendu HTML[]

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

format[]

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

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

Attributs[]

Aucun.

Rendu HTML[]

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

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

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

Attributs[]

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

Code
<image source="image" />
Rendu
<figure class="pi-item pi-image" data-source="image">
    <a class="image image-thumbnail" href="…/Fichier: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[]

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

Balises valides[]

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

Attributs[]

source
Le nom du paramètre à utiliser.

Rendu HTML[]

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 class="image image-thumbnail" href="…/Fichier:Image.jpg/revision/latest/…" title="Texte alt par défaut">
        <img class="pi-image-thumbnail" src="…Image.jpg…" srcset="…Image.jpg… 2x" alt="Texte alt par défaut" data-image-key="Image.jpg" data-image-name="Image.jpg" width="" height="">
    </a>
</figure>

caption[]

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

Balises valides[]

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

Attributs[]

source
Le nom du paramètre à utiliser.

Rendu HTML[]

Code
<image source="image">
    <caption source="caption">
        <default>Ma légende</default>
    </caption>
</image>
Rendu sur bureau
<figcaption class="pi-item-spacing pi-caption">Ma légende</figcaption>
Rendu sur mobile
Pas de rendu. La balise caption est ignorée et n'apparaît pas sur les navigateurs mobile.

group[]

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

Balises parentes Balises enfants
  • <infobox>
  • <group>
  • <section>
  • <data>
  • <header>
  • <image>
  • <title>
  • <group> (non disponible dans les groupes horizontaux, mais autorisé dans les groupes intelligents)
  • <navigation>
  • <panel>

Attributs[]

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

Groupe par défaut[]

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

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

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 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="valeur1">Libellé 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="valeur2">Libellé 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="valeur3">Libellé 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="valeur1">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="valeur2">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="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 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="valeur5">Libellé 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="valeur6">Libellé 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="valeur5">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="valeur6">FFF</div>
        </section>
    </section>
</section>

header[]

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

Balises valides[]

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

Attributs[]

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

Rendu HTML[]

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

La balise <navigation> est généralement utilisée pour afficher des liens de page pour naviguer. Elle accepte le wikitexte.

Balises valides[]

Balises parentes Balises enfants
Aucun

Attributs[]

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

Rendu HTML[]

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

panel[]

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

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

Attributs[]

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

Rendu HTML[]

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 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="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="wds-tab__content">
        <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>
</section>

section[]

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

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

Attributs[]

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

Rendu HTML[]

Code
<section>
    <label>A</label>
    <data source="un" />
    <data source="deux" />
</section>
Rendu
<div class="wds-tab__content">
    <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[]

Advertisement