Infoboxen bevatten een grote verscheidenheid van elementen en opties die je kunt gebruiken om de infobox aan te passen naar jouw smaak. Hieronder staan alle standaard elementen, met voorbeeld wikitekst en HTML, zodat je kunt bepalen wat je nodig hebt en hoe je ze een CSS-makeover kunt geven.

Alle infobox velden moet worden gedefiniëerd met behulp van de XML opmaak, met HTML-attributen die wordt gebruikt voor het configureren van het veld.

Fundamentele elementen[bewerken | brontekst bewerken]

infobox[bewerken | brontekst bewerken]

Atributen
  • theme
  • theme-source
  • layout
  • accent-color-source
  • accent-color-text-source
  • accent-color-default
  • accent-color-text-default
Geldige geneste elementen
  • title
  • image
  • header
  • navigation
  • data
  • group

Dit element dient als basis voor alle andere element.

Invoer Resultaat
<infobox>
	<title source="title_source" />
</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>

title[bewerken | brontekst bewerken]

Atributen
  • source
Geldige geneste elementen
  • default
  • format
Invoer Resultaat
<title source="title_source">
	<default>{{PAGENAME}}</default>
</title>
<h2 class="pi-item pi-item-spacing pi-title">Page name</h2>

data[bewerken | brontekst bewerken]

Atributen
  • source
  • span
  • layout
Geldige geneste elementen
  • default
  • label
  • format

Element om een veld met informatie mee te tonen.

Invoer Resultaat
<data source="name">
	<label>Voornaam</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">Voornaam</h3>
	<div class="pi-font pi-data-value">John</div>
</div>

Resultaat modifiers[bewerken | brontekst bewerken]

label[bewerken | brontekst bewerken]

Atributen None
Geldige geneste elementen None

Label element, kan alleen worden gebruikt binnen andere elementen, kijk in de geldige geneste elementen kolom voor meer info. Accepteert ook 'wikitekst' .

Invoer Resultaat
<label>Voornaam</label>
<h3 class="pi-secondary-font pi-data-label">Voornaam</h3>

default[bewerken | brontekst bewerken]

Atributen None
Geldige geneste elementen None

Het standaard element wordt gebruikt als er voor het data element niets is opgegeven en kan alleen worden gebruikt binnen andere elementen. Kijk in de geldige geneste elementen kolom voor meer info. Accepteert ook 'wikitekst' .

Invoer Resultaat
<default>John</default>
<div class="pi-font pi-data-value">John</div>

format[bewerken | brontekst bewerken]

Atributen None
Geldige geneste elementen None

Format element, gebruikt om tekst op te maken met 'wikitekst' . Kan alleen worden gebruikt binnen andere elementen, kijk in de geldige geneste elementen kolom voor meer info.

Invoer Resultaat
<data source="dollars">
	<label>Regular price</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">Regular price</h3>
	<div class="pi-font pi-data-value">$15</div>
</div>

Afbeelding elementen[bewerken | brontekst bewerken]

image[bewerken | brontekst bewerken]

Atributen
  • source
Geldige geneste elementen
  • alt
  • caption
  • default

Afbeelding element, gebruikt om afbeeldingen of videos in te voegen in een infobox. Het kan alleen worden opgemaakt met behulp van CSS en kan niet handmatig worden aangepast.

Hier wordt het default element gebruikt om een afbeelding te tonen wanneer er geen is opgeven. Bijvoorbeeld, <default>Voorbeeld.jpg</ default>.

Invoer Resultaat
<image source="image" />
<figure class="pi-item pi-image">
	<a href=".../File: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>

alt[bewerken | brontekst bewerken]

Atributen
  • source
Geldige geneste elementen
  • default

Kan alleen binnen het image element worden gebruikt.

Invoer Resultaat
<image source="image">
	<alt source="alternative_title">
		<default>Default alt text</default>
	</alt>
</image>
<figure class="pi-item pi-image">
	<a href=".../File:Image.jpg" class="image image-thumbnail" title="Default alt text">
		<img src="Image.jpg" class="pi-image-thumbnail" alt="Default alt text" width="" height="" data-image-key="Image.jpg" data-image-name="Image.jpg">
	</a>
</figure>

caption[bewerken | brontekst bewerken]

Atributen
  • source
Geldige geneste elementen
  • default
  • format

Kan alleen binnen het image element worden gebruikt.

Invoer Resultaat
<image source="image">
	<caption source="caption">
		<default>My caption</default>
	</caption>
</image>
<figcaption class="pi-item-spacing pi-caption">My caption</figcaption>

Andere elementen[bewerken | brontekst bewerken]

group[bewerken | brontekst bewerken]

Atributen
  • layout
  • show
  • collapse
  • row-items
Geldige geneste elementen
  • data
  • header
  • image
  • title
  • navigation

Gebruikt voor het groeperen van velden en kan gecombineerd worden met een kop voor elke groep. Een groep wordt niet weergegeven (inclusief de kop) als alle velden leeg zijn. Echter, als het show attribuut is ingesteld op incomplete, wordt de groep getoont als ten minste 'één veld' niet leeg is.

Standaard groep[bewerken | brontekst bewerken]

Invoer Resultaat
<group>
	<header>Group name</header>
	<data source="value1" />
</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">Group name</h2>
	<div class="pi-item pi-item-spacing pi-data pi-border-color">
		<div class="pi-font pi-data-value">Data value</div>
	</div>
</section>

Horizontale groep[bewerken | brontekst bewerken]

Invoer Resultaat
<group layout="horizontal">
	<header>Group name</header>
	<data source="value1">
		<label>Data 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">Group name</caption>
		<thead>
			<tr>
				<th class="pi-secondary-font pi-horizontal-group-item pi-data-label pi-border-color pi-item-spacing">Data label</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td class="pi-font pi-horizontal-group-item pi-data-value pi-border-color pi-item-spacing">Data value</td>
			</tr>
		</tbody>
	</table>
</section>

Slimme groep[bewerken | brontekst bewerken]

Invoer Resultaat
<group row-items="3">
    <header>Section Header</header>
    <data source="row3">
      <label>Label</label>
    </data>
    <data source="row4">
      <label>Label</label>
    </data>
    <data source="row5">
      <label>Label</label>
    </data>
    <data source="row6">
      <label>Label</label>
    </data>
    <data source="row7">
      <label>Label</label>
    </data>
    <data source="row8" layout="default">
      <label>Label</label>
    </data>
    <data source="row9" 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">Section Header</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>

header[bewerken | brontekst bewerken]

Atributen None
Geldige geneste elementen None

Het kop element geeft het begin van een groep van elementen aan.

Invoer Resultaat
<header>Header Tekst</header>
Standaard groep
<h2 class="pi-item pi-secondary-font pi-item-spacing pi-secondary-background pi-header">Header Tekst</h2>
Horizontale groep


<caption class="pi-secondary-font pi-secondary-background pi-item-spacing pi-header">Header Tekst</caption>

navigation[bewerken | brontekst bewerken]

Atributen None
Geldige geneste elementen None

Dit element wordt gebruikt voor het invoegen van wikitekst.

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

Referenties[bewerken | brontekst bewerken]

Community content is available under CC-BY-SA unless otherwise noted.