Hilfe:Infoboxen/Tags

Die Portablen Infoboxen beinhalten einige Tags und Optionen, die dir dazu dienen, die Infobox so darzustellen, wie du willst.

Unten sind alle Standard-Tags mit jeweils einem Wikitext-Beispiel und dessen HTML-Ausgabe aufgelistet, die dir helfen sollen zu erkennen, welche Tags du benutzen musst und wie du die Infoboxen mit CSS anpassen kannst. Bedenke, dass in einigen Fällen auch Parser-Funktionen genutzt werden können.

Alle Infoboxen sollten gemäß der XML-Konvention mit Attributen deklariert werden, die zur Feldkonfiguration verwendet werden.

Hilfeseiten zu den portablen Infoboxen:

Übersicht • Styling • Tags • Bearbeitungsoptionen

`<infobox>`[]

Das <infobox>-Tag beinhaltet alle anderen und bestimmt den Geltungsbereich der Infobox.

Gültige Tags[]

Parent Tags	Child Tags
Keine	`<title>` `<image>` `<header>` `<navigation>` `<data>` `<group>` `<panel>`

Attribute[]

theme: Der Name des zusätzlichen Themes, das für Styling nützlich sein kann. Fügt eine Klasse im Form .pi-theme-$1 zur Infobox hinzu, wobei Leerzeichen in Bindestriche (-) umgewandelt werden. Überschreibt weder theme-source, noch type.
theme-source: Der Name des Parameters, dessen Wert den Theme-Namen definiert. Fügt eine Klasse im Form .pi-theme-$1 zur Infobox hinzu, wobei Leerzeichen in Bindestriche (-) umgewandelt werden. Überschreibt weder theme-source, noch type.
type: Der Name des Infobox-Typen, der für Styling nützlich sein kann. Fügt eine Klasse im Form .pi-type-$1 zur Infobox hinzu, wobei Leerzeichen in Bindestriche (-) umgewandelt werden. Überschreibt weder theme, noch theme-source.
accent-color-source: Der Name des Parameters, dessen Wert die Akzentfarbe der Infobox definiert.
accent-color-default: Die voreingestellte Akzentfarbe der Infobox. Nimmt einen Hexadezimalfarbcode aus 3 oder 6 Ziffern an (z.B.: #f00 oder #ff0000).
accent-color-text-source: Der Name des Parameters, dessen Wert die Text-Akzentfarbe der Infobox definiert.
accent-color-text-default: Die voreingestellte Text-Akzentfarbe der Infobox. Nimmt einen Hexadezimalfarbcode aus 3 oder 6 Ziffern an (z.B.: #f00 oder #ff0000).
layout: Mögliche Werte: default, stacked.
name: Der interne Name für das Element und seiner Kinder. Wird im HTML-Quellcode dem data-item-name-Attribut zugewiesen.

Beispiel[]

Eingabe

<infobox>
    <title source="titel_source" />
</infobox>

Ausgabe

<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="titel_source">Beispiel</h2>
</aside>

`<title>`[]

Das <title>-Tag gibt den Titel der Infobox an (sollte nur einmal pro Infobox verwendet werden). Bilder, die innerhalb eines title-Tags verwendet werden, werden in der mobilen Ansicht nicht angezeigt.

Gültige Tags[]

Parent Tags	Child Tags
`<infobox>` `<group>`	`<default>` `<format>`

Attribute[]

source: Der Name des gewünschten Parameters.
name: Der interne Name für das Element und seiner Kinder. Wird im HTML-Quellcode dem data-item-name-Attribut zugewiesen.

Beispiel[]

Eingabe

<title source="title_source">
    <default>{{PAGENAME}}</default>
</title>

Ausgabe

<aside class="portable-infobox pi-background pi-theme-wikia pi-layout-default">
    <h2 class="pi-item pi-item-spacing pi-title pi-secondary-background" data-source="titel_source">Hilfe:Infobox/Tags</h2>
</aside>

`<data>`[]

Das <data>-Tag ist das Standard-Tag eines Schlüsselwerts.

Gültige Tags[]

Parent Tags	Child Tags
`<infobox>` `<group>`	`<default>` `<label>` `<format>`

Attribute[]

source: Der Name des gewünschten Parameters.
span: Die Anzahl der Spalten, über den das Element erstrecken soll. Nur in intelligenten Gruppen verfügbar.
layout: Mögliche Werte: default. Nur in intelligenten Gruppen verfügbar.
name: Der interne Name für das Element und seiner Kinder. Wird im HTML-Quellcode dem data-item-name-Attribut zugewiesen.

Beispiel[]

Eingabe

<data source="name">
    <label>Vorname</label>
    <default>Max</default>
</data>

Ausgabe

<div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="name">
    <h3 class="pi-data-label pi-secondary-font">Vorname</h3>
    <div class="pi-data-value pi-font">Max</div>
</div>

`<label>`[]

Das <label>-Tag ändert die Darstellung des Parameters in der Infobox. Bei Registerkarten ändert es den Namen des jeweiligen Reiters. Es kann nur innerhalb von anderen Tags verwendet werden (Siehe: „Parent Tags“). Akzeptiert Wikitext.

Gültige Tags[]

Parent Tags	Child Tags
`<data>` `<section>`	Keine

Attribute[]

Keine.

Beispiel[]

Eingabe
<label>Vorname</label>
Ausgabe
<h3 class="pi-data-label pi-secondary-font">Vorname</h3>

`<default>`[]

Das <default>-Tag wird in Fällen verwendet, wo zum jeweiligen Parameter kein Wert angegeben wurde. Es kann nur innerhalb von anderen Tags verwendet werden (Siehe: „Parent Tags“). Akzeptiert Wikitext.

Gültige Tags[]

Parent Tags	Child Tags
`<title>` `<data>` `<image>` `<alt>` `<caption>`	Keine

Attribute[]

Keine.

Beispiel[]

Eingabe
<default>Max</default>
Ausgabe
<div class="pi-data-value pi-font">Max</div>

`<format>`[]

Das <format>-Tag ändert die Darstellung des Parameter-Wertes in der Infobox. Es kann nur innerhalb von anderen Tags verwendet werden (Siehe: „Parent Tags“). Akzeptiert Wikitext.

Gültige Tags[]

Parent Tags	Child Tags
`<title>` `<data>` `<caption>`	Keine

Attribute[]

Keine.

Beispiel[]

Eingabe

<data source="dollars">
    <label>normaler Preis</label>
    <format>${{{dollars}}}</format>
</data>

Ausgabe

<div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="dollars">
    <h3 class="pi-data-label pi-secondary-font">normaler Preis</h3>
    <div class="pi-data-value pi-font">$15</div>
</div>

`<image>`[]

Das <image>-Tag wird benutzt, um Dateien (Bilder oder Videos) in eine Infobox einzubetten. Es kann mithilfe von CSS in der jeweiligen Community gestaltet werden, wobei die Größe der Datei nicht manuell geändert werden kann. Die Einbettung der Bilder wurde normalisiert, weshalb [[Datei:Beispiel.jpg]] und Beispiel.jpg gleich funktionieren. Mehrere Bilder können mit dem <gallery>-Tag angeordnet werden.

Hier wird das default-Tag benutzt, um ein Standardbild anzuzeigen, wenn beim Einbinden der Infobox kein Bild gewählt wird (z.B.: <default>Beispiel.jpg</default>).

Gültige Tags[]

Parent Tags	Child Tags
`<infobox>` `<group>`	`<alt>` `<caption>` `<default>`

Attribute[]

source: Der Name des gewünschten Parameters.
name: Der interne Name für das Element und seiner Kinder. Wird im HTML-Quellcode dem data-item-name-Attribut zugewiesen.

Beispiel[]

Eingabe

<image source="Bild" />

Ausgabe

<figure class="pi-item pi-image" data-source="Bild">
    <a class="image image-thumbnail" href=".../Bild.jpg/revision/latest/..." title="">
        <img class="pi-image-thumbnail" src="...Bild.jpg..." srcset="...Bild.jpg... 2x" alt="" data-image-key="Bild.jpg" data-image-name="Bild.jpg" width="" height="">
    </a>
</figure>

`<alt>`[]

Das <alt>-Tag kann nur innerhalb eines <image>-Tags verwendet werden und gibt dem Bild einen Alternativtitel.

Gültige Tags[]

Parent Tags	Child Tags
`<image>`	`<default>`

Attribute[]

source: Der Name des gewünschten Parameters.

Beispiel[]

Eingabe

<image source="Bild">
    <alt source="Alternativtitel">
        <default>Mein Alternativtitel</default>
    </alt>
</image>

Ausgabe

<figure class="pi-item pi-image" data-source="Bild">
    <a class="image image-thumbnail" href=".../Bild.jpg/revision/latest/..." class="image image-thumbnail" title="Mein Alternativtitel">
        <img src="...Bild.jpg..." srcset="...Bild.jpg... 2x" class="pi-image-thumbnail" alt="Mein Alternativtitel" data-image-key="Bild.jpg" data-image-name="Bild.jpg" width="" height="">
    </a>
</figure>

`<caption>`[]

Das <caption>-Tag kann nur innerhalb eines <image>-Tags verwendet werden und gibt dem Bild eine Beschreibung.

Gültige Tags[]

Parent Tags	Child Tags
`<image>`	`<default>` `<format>`

Attribute[]

source: Der Name des gewünschten Parameters.

Beispiel[]

Eingabe

<image source="Bild">
    <caption source="Bildbeschreibung">
        <default>Meine Bildbeschreibung</default>
    </caption>
</image>

Ausgabe

<figcaption class="pi-item-spacing pi-caption">Meine Bildbeschreibung</figcaption>

`<group>`[]

Das <group>-Tag wird für die Gruppierung der Daten verwendet und akzeptiert eine Kopfzeile (<header>) pro Gruppe. Die Gruppe sowie seine Kopfzeile werden nicht angezeigt, wenn keiner seiner Datenfelder besetzt sind. Wenn aber das show-Attribut auf incomplete gestellt ist, werden alle Felder innerhalb der Gruppe angezeigt, sobald mindestens ein Feld besetzt ist.

Gültige Tags[]

Parent Tags	Child Tags
`<infobox>` `<group>`	`<data>` `<header>` `<image>` `<title>` `<group>` `<navigation>` `<panel>`

Attribute[]

layout: Mögliche Werte: default, horizontal
show: Mögliche Werte: default, incomplete
collapse: Mögliche Werte: open, closed. Nur verfügbar, wenn das erste Unterelement ein <header>-Tag ist.
row-items: Wandelt die Gruppe in eine intelligente Gruppe mit n Spalten um. Intelligente Gruppen ordnen ihre Zellen horizontal, wobei automatisch in eine neue Zeile umgebrochen wird, sobald das angegebene Limit überschritten wird. Zellen in der letzten Zeile füllen automatisch leere Spalten auf.
name: Der interne Name für das Element und seiner Kinder. Wird im HTML-Quellcode dem data-item-name-Attribut zugewiesen.

Beispiele[]

Einfache Gruppe[]

Eingabe

<group>
    <header>Gruppenname</header>
    <data source="parameter1" />
</group>

Ausgabe

<section class="pi-item pi-group pi-border-color">
    <h2 class="pi-item pi-header pi-secondary-font pi-item-spacing pi-secondary-background">Gruppenname</h2>
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="parameter1">
        <div class="pi-data-value pi-font">Wert 1</div>
    </div>
</section>

Horizontale Gruppe[]

Eingabe

<group layout="horizontal">
    <header>Gruppenname</header>
    <data source="parameter1">
        <label>Label 1</label>
    </data>
</group>

Ausgabe

<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">Gruppenname</caption>
        <thead>
            <tr>
                <th class="pi-horizontal-group-item pi-data-label pi-secondary-font pi-border-color pi-item-spacing" data-source="parameter1">Label 1</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="pi-horizontal-group-item pi-data-value pi-font pi-border-color pi-item-spacing" data-source="parameter1">Data value</td>
            </tr>
        </tbody>
    </table>
</section>

Intelligente Gruppe[]

Eingabe

<group row-items="3">
    <header>Kopfzeile</header>
    <data source="parameter 1">
        <label>Label 1</label>
    </data>
    <data source="parameter 2">
        <label>Label 2</label>
    </data>
    <data source="parameter 3">
        <label>Label 3</label>
    </data>
    <data source="parameter 4" layout="default">
        <label>Label 4</label>
    </data>
    <data source="parameter 5">
        <label>Label 5</label>
    </data>
    <data source="parameter 6">
        <label>Label 6</label>
    </data>
</group>

Ausgabe

<section class="pi-item pi-group pi-border-color">
    <h2 class="pi-item pi-header pi-secondary-font pi-item-spacing pi-secondary-background">Kopfzeile</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="parameter 1">Label 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="parameter 2">Label 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="parameter 3">Label 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" style="width: calc(1 / 3 * 100%);" data-source="parameter 1">AAA</div>
            <div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 3 * 100%);" data-source="parameter 2">BBB</div>
            <div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 3 * 100%);" data-source="parameter 3">CCC</div>
        </section>
    </section>
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="parameter 4">
        <h3 class="pi-data-label pi-secondary-font">Label 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="parameter 5">Label 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="parameter 6">Label 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="parameter 5">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="parameter 6">FFF</div>
        </section>
    </section>
</section>

`<header>`[]

Das <header>-Tag zeigt seinen Wert in einer Kopfzeile an und soll den Beginn einer Sektion oder einer Gruppe von Tags markieren.

Gültige Tags[]

Parent Tags	Child Tags
`<infobox>` `<group>` `<panel>`	Keine

Attribute[]

name: Der interne Name für das Element und seiner Kinder. Wird im HTML-Quellcode dem data-item-name-Attribut zugewiesen.

Beispiel[]

Eingabe
<header>Kopfzeile</header>
Ausgabe (in einer einfachen Gruppe)
<h2 class="pi-item pi-header pi-secondary-font pi-item-spacing pi-secondary-background">Kopfzeile</h2>
Ausgabe (in einer horizontalen Gruppe)
<caption class="pi-header pi-secondary-font pi-secondary-background pi-item-spacing">Kopfzeile</caption>

`<navigation>`[]

Das <navigation>-Tag dient zur allgemeinen Verwendung von Wikitext.

Gültige Tags[]

Parent Tags	Child Tags
`<infobox>` `<group>` (nicht verfügbar bei horizontalen Gruppen)	Keine

Attribute[]

name: Der interne Name für das Element und seiner Kinder. Wird im HTML-Quellcode dem data-item-name-Attribut zugewiesen.

Beispiel[]

Eingabe
<navigation>[[Link]]</navigation>
Ausgabe
<nav class="pi-navigation pi-item-spacing pi-secondary-font"> <a href="/de/wiki/Link" title="Link">Link</a> </nav>

`<panel>`[]

Das <panel>-Tag ist der Grundbaustein für ein Layout mit Registerkarten, wobei jeder neue Reiter mit dem <section>-Tag geöffnet wird.

Gültige Tags[]

Parent Tags	Child Tags
`<infobox>` `<group>`	`<header>` `<section>`

Attribute[]

name: Der interne Name für das Element und seiner Kinder. Wird im HTML-Quellcode dem data-item-name-Attribut zugewiesen.

Beispiel[]

Eingabe

<panel>
    <section>
        <label>A</label>
        <data source="eins" />
        <data source="zwei" />
    </section>
    <section>
        <label>B</label>
        <data source="drei" />
        <data source="vier" />
    </section>
</panel>

Ausgabe

<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="eins">
            <div class="pi-data-value pi-font">Erstens</div>
        </div>
        <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="zwei">
            <div class="pi-data-value pi-font">Zweitens</div>
        </div>
    </div>
    <div class="wds-tab__content">
        <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="drei">
            <div class="pi-data-value pi-font">Drittens</div>
        </div>
        <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="vier">
            <div class="pi-data-value pi-font">Viertens</div>
        </div>
    </div>
</section>

`<section>`[]

Das <section>-Tag repräsentiert den Inhalt eines Reiters. Der Text beim anklickbaren Schalter kann mit dem <label>-Tag modifiziert werden. Wenn kein Wert angegeben wird, wird die Kennziffer des Reiters (von 0 anfangend) angezeigt. Wenn keiner der Reiter benannt worden ist, werden sie wie Gruppen vertikal aufgereiht.

Gültige Tags[]

Parent Tags	Child Tags
`<panel>`	`<title>` `<data>` `<label>` `<image>` `<group>` `<header>` `<navigation>`

Attribute[]

name: Der interne Name für das Element und seiner Kinder. Wird im HTML-Quellcode dem data-item-name-Attribut zugewiesen.

Beispiel[]

Eingabe

<section>
    <label>A</label>
    <data source="eins" />
    <data source="zwei" />
</section>

Ausgabe

<div class="wds-tab__content">
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="eins">
        <div class="pi-data-value pi-font">Erstens</div>
    </div>
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="zwei">
        <div class="pi-data-value pi-font">Zweitens</div>
    </div>
</div>

Anmerkungen[]

Mehr Hilfe[]

Ein Stichwortverzeichnis zu verschiedensten Hilfeseiten findest du auf Hilfe:Index.
Einen geordneten Einstieg zur Hilfe gibt es auf der Seite Hilfe:Übersicht.
Fragen an andere Benutzer kannst du in den Diskussionen des Community-Wikis stellen.
Anmerkungen zu dieser Hilfeseite kannst du auf der dazugehörigen Diskussionsseite hinterlassen.
Um Fehler zu melden, kontaktiere bitte einen Ansprechpartner oder nutze das entsprechende Kontaktformular.

Hilfe:Infoboxen/Tags

Hilfeseiten zu den portablen Infoboxen:

<infobox>[]

Gültige Tags[]

Attribute[]

Beispiel[]

<title>[]

Gültige Tags[]

Attribute[]

Beispiel[]

<data>[]

Gültige Tags[]

Attribute[]

Beispiel[]

<label>[]

Gültige Tags[]

Attribute[]

Beispiel[]

<default>[]

Gültige Tags[]

Attribute[]

Beispiel[]

<format>[]

Gültige Tags[]

Attribute[]

Beispiel[]

<image>[]

Gültige Tags[]

Attribute[]

Beispiel[]

<alt>[]

Gültige Tags[]

Attribute[]

Beispiel[]

<caption>[]

Gültige Tags[]

Attribute[]

Beispiel[]

<group>[]

Gültige Tags[]

Attribute[]

Beispiele[]

Einfache Gruppe[]

Horizontale Gruppe[]

Intelligente Gruppe[]

<header>[]

Gültige Tags[]

Attribute[]

Beispiel[]

<navigation>[]

Gültige Tags[]

Attribute[]

Beispiel[]

<panel>[]

Gültige Tags[]

Attribute[]

Beispiel[]

<section>[]

Gültige Tags[]

Attribute[]

Beispiel[]

Anmerkungen[]

Mehr Hilfe[]

`<infobox>`[]

`<title>`[]

`<data>`[]

`<label>`[]

`<default>`[]

`<format>`[]

`<image>`[]

`<alt>`[]

`<caption>`[]

`<group>`[]

`<header>`[]

`<navigation>`[]

`<panel>`[]

`<section>`[]