FANDOM


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:

<infobox> Bearbeiten

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

Gültige Tags Bearbeiten

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

Attribute Bearbeiten

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 Bearbeiten

Eingabe
<infobox>
    <title source="titel_source" />
</infobox>
Ausgabe
<aside class="portable-infobox pi-background pi-theme-wikia pi-layout-default">
    <h2 class="pi-item pi-item-spacing pi-title" data-source="titel_source">Beispiel</h2>
</aside>

<title> Bearbeiten

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

Gültige Tags Bearbeiten

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

Attribute Bearbeiten

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 Bearbeiten

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" data-source="titel_source">Hilfe:Infobox/Tags</h2>
</aside>

<data> Bearbeiten

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

Gültige Tags Bearbeiten

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

Attribute Bearbeiten

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 Bearbeiten

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> Bearbeiten

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 Bearbeiten

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

Attribute Bearbeiten

Keine.

Beispiel Bearbeiten

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

<default> Bearbeiten

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 Bearbeiten

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

Attribute Bearbeiten

Keine.

Beispiel Bearbeiten

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

<format> Bearbeiten

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 Bearbeiten

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

Attribute Bearbeiten

Keine.

Beispiel Bearbeiten

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> Bearbeiten

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 Bearbeiten

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

Attribute Bearbeiten

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 Bearbeiten

Eingabe
<image source="Bild" />
Ausgabe
<figure class="pi-item pi-image" data-source="Bild">
    <a href=".../Datei:Bild.jpg" class="image image-thumbnail" title="">
        <img src="Bild.jpg" srcset="Bild.jpg 1x, Bild.jpg 2x" class="pi-image-thumbnail" alt="" data-image-key="Bild.jpg" data-image-name="Bild.jpg" width="" height="">
    </a>
</figure>

<alt> Bearbeiten

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

Gültige Tags Bearbeiten

Parent Tags Child Tags
  • <image>
  • <default>

Attribute Bearbeiten

source
Der Name des gewünschten Parameters.

Beispiel Bearbeiten

Eingabe
<image source="Bild">
    <alt source="Alternativtitel">
        <default>Mein Alternativtitel</default>
    </alt>
</image>
Ausgabe
<figure class="pi-item pi-image" data-source="Bild">
    <a href=".../Datei:Bild.jpg" class="image image-thumbnail" title="Mein Alternativtitel">
        <img src="Bild.jpg" srcset="Bild.jpg 1x, 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> Bearbeiten

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

Gültige Tags Bearbeiten

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

Attribute Bearbeiten

source
Der Name des gewünschten Parameters.

Beispiel Bearbeiten

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> Bearbeiten

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 Bearbeiten

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

Attribute Bearbeiten

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 Bearbeiten

Einfache Gruppe Bearbeiten

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 Bearbeiten

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 Bearbeiten

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">
            <h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" 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" 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" style="width: calc(1 / 3 * 100%);" data-source="parameter 3">Label 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="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">
            <h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" 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" style="width: calc(1 / 2 * 100%);" data-source="parameter 6">Label 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="parameter 5">EEE</div>
            <div class="pi-smart-data-value pi-data-value pi-font pi-item-spacing" style="width: calc(1 / 2 * 100%);" data-source="parameter 6">FFF</div>
        </section>
    </section>
</section>

<header> Bearbeiten

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 Bearbeiten

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

Attribute Bearbeiten

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

Beispiel Bearbeiten

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> Bearbeiten

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

Gültige Tags Bearbeiten

Parent Tags Child Tags
Keine

Attribute Bearbeiten

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

Beispiel Bearbeiten

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

<panel> Bearbeiten

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 Bearbeiten

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

Attribute Bearbeiten

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

Beispiel Bearbeiten

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">
    <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="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="pi-section-content" data-ref="1">
            <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>
    </div>
</section>

<section> Bearbeiten

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 Bearbeiten

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

Attribute Bearbeiten

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

Beispiel Bearbeiten

Eingabe
<section>
    <label>A</label>
    <data source="eins" />
    <data source="zwei" />
</section>
Ausgabe
<div class="pi-section-content" data-ref="0">
    <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 Bearbeiten

  1. Englisches Portabilitäts-Hub, Office Hours-Diskussionsfaden

Mehr Hilfe Bearbeiten

Nutzung von Community-Inhalten gemäß CC-BY-SA , sofern nicht anders angegeben.