FANDOM


Przenośne infoboksy zawierają w sobie wiele tagów i opcji, dzięki którym możesz dostosować infoboks do własnych potrzeb. Poniżej przedstawiono wszystkie standardowe tagi, z przykładem użycia oraz wyjściem HTML, które pomogą ci wybrać potrzebne ci aspekty szablonu oraz odpowiednio zmodyfikować CSS (zobacz też Pomoc:Infoboksy/CSS). Uwaga Funkcje parsera mogą być również używane.

Wszystkie pola infoboksu powinny być zadeklarowane używając konwencji XML, z atrybutami używanymi do konfiguracji danego pola. 

Podstawowe tagi

infobox

Atrybuty
  • theme
  • theme-source
  • layout
  • accent-color-source
  • accent-color-text-source
  • accent-color-default
  • accent-color-text-default
Pochodne tagi
  • title
  • image
  • header
  • navigation
  • data
  • group

Tag zawierający wszystkie inne i określający zakres infoboksu.

Przykład użycia Wyjście HTML
<infobox>
	<title source="tytuł" />
</infobox>
<aside class="portable-infobox pi-background pi-theme-wikia pi-layout-default">
	<h2 class="pi-item pi-item-spacing pi-title">Tytuł</h2>
</aside>

title

Atrybuty
  • source
Pochodne tagi
  • default
  • format

Określa tytuł infoboksu, może zostać użyty tylko raz na szablon. Obrazy używane w tagu title nie pojawiają się w wersji mobilnej.

Przykład użycia Wyjście HTML
<title source="tytuł">
	<default>{{PAGENAME}}</default>
</title>
<h2 class="pi-item pi-item-spacing pi-title">Nazwa strony</h2>

data

Atrybuty
  • source
  • span
  • layout
Pochodne tagi
  • default
  • label
  • format

Podstawowy tag wartości.

Przykład użycia Wyjście HTML
<data source="imię">
	<label>Imię</label>
	<default>Jan</default>
</data>
<div class="pi-item pi-item-spacing pi-data pi-border-color">
	<h3 class="pi-secondary-font pi-data-label">Imię</h3>
	<div class="pi-font pi-data-value">Jan</div>
</div>

Modyfikatory wyjścia

label

Atrybuty None
Pochodne tagi None

Tag etykiety, który może być używany jedynie wewnątrz innych znaczników. Akceptuje wikitekst.

Przykład użycia Wyjście HTML
<label>Imię</label>
<h3 class="pi-secondary-font pi-data-label">Imię</h3>

default

Atrybuty None
Pochodne tagi None

Tag określający domyślną wartość innych znaczników. Akceptuje wikitekst.

Przykład użycia Wyjście HTML
<default>Jan</default>
<div class="pi-font pi-data-value">Jan</div>

format

Atrybuty None
Pochodne tagi None

Tag formatujący, który może zostać użyty jedynie wewnątrz innych znaczników. Akceptuje wikitekst.

Przykład użycia Wyjście HTML
<data source="pieniądze">
	<label>Domyślna cena</label>
	<format>{{{pieniądze}}}zł</format>
</data>
<div class="pi-item pi-item-spacing pi-data pi-border-color">
	<h3 class="pi-secondary-font pi-data-label">Domyślna cena</h3>
	<div class="pi-font pi-data-value">15zł</div>
</div>

Tagi obrazów

image

Atrybuty
  • source
Pochodne tagi
  • alt
  • caption
  • default

Tag pozwalający dodać obraz do infoboksu. Może zostać ostylowany tylko za pomocą lokalnego CSS, i nie może być ręcznie powiększony. Kilka obrazów może zostać dodanych za pomocą tagów galerii.

Tutaj tag default używany jest do określenia obrazu, gdy nie zostanie dodany żaden obraz do infoboksu. Dla przykładu, <default>Przykład.jpg</default>.

Przykład użycia Wyjście HTML
<image source="obraz" />
<figure class="pi-item pi-image">
	<a href=".../Plik:Obraz.jpg" class="image image-thumbnail" title="">
		<img src="Obraz.jpg" class="pi-image-thumbnail" alt="" width="" height="" data-image-key="Obraz.jpg" data-image-name="Obraz.jpg">
	</a>
</figure>

alt

Atrybuty
  • source
Pochodne tagi
  • default

Może zostać użyty jedynie w znaczniku obrazu.

Przykład użycia Wyjście HTML
<image source="obraz">
	<alt source="tekst_alternatywny">
		<default>Domyślny tekst alternatywny</default>
	</alt>
</image>
<figure class="pi-item pi-image">
	<a href=".../Plik:Obraz.jpg" class="image image-thumbnail" title="Domyślny tekst alternatywny">
		<img src="Obraz.jpg" class="pi-image-thumbnail" alt="Domyślny tekst alternatywny" width="" height="" data-image-key="Obraz.jpg" data-image-name="Obraz.jpg">
	</a>
</figure>

caption

Atrybuty
  • source
Pochodne tagi
  • default
  • format

Może zostać użyty jedynie w znaczniku obrazu.

Przykład użycia Wyjście HTML
<image source="image">
	<caption source="podpis">
		<default>Mój podpis</default>
	</caption>
</image>
<figcaption class="pi-item-spacing pi-caption">Mój podpis</figcaption>

Pozostałe tagi

group

Atrybuty
  • layout
  • show
  • collapse
  • row-items
Pochodne tagi
  • data
  • header
  • image
  • title
  • navigation

Używany do grupowania pól, do każdej grupy można dodać nagłówek. Grupa nie wyświetli się (włączając nagłówki), jeśli żadne z pól nie zostanie określone. Jednakże, jeśli atrybut show zostanie ustawiony na incomplete, wtedy pojawią się wszystkie pola z grupy, jeśli jedno z nich nie będzie puste.

Domyślna grupa

Przykład użycia Wyjście HTML
<group>
	<header>Nazwa grupy</header>
	<data source="wartość1" />
</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">Nazwa grupy</h2>
	<div class="pi-item pi-item-spacing pi-data pi-border-color">
		<div class="pi-font pi-data-value">Wartość</div>
	</div>
</section>

Grupa pozioma

Przykład użycia Wyjście HTML
<group layout="horizontal">
	<header>Nazwa grupy</header>
	<data source="wartość1">
		<label>Tekst</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">Nazwa grupy</caption>
		<thead>
			<tr>
				<th class="pi-secondary-font pi-horizontal-group-item pi-data-label pi-border-color pi-item-spacing">Tekst</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td class="pi-font pi-horizontal-group-item pi-data-value pi-border-color pi-item-spacing">Wartość</td>
			</tr>
		</tbody>
	</table>
</section>

Inteligentne grupowanie

Przykład użycia Wyjście HTML
<group row-items="3">
    <header>Nagłówek sekcji</header>
    <data source="row3">
      <label>Tekst</label>
    </data>
    <data source="row4">
      <label>Tekst</label>
    </data>
    <data source="row5">
      <label>Tekst</label>
    </data>
    <data source="row6">
      <label>Tekst</label>
    </data>
    <data source="row7">
      <label>Tekst</label>
    </data>
    <data source="row8" layout="default">
      <label>Tekst</label>
    </data>
    <data source="row9" layout="default">
      <label>Tekst</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">Nagłówek sekcji</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%);">Tekst</h3>
 
                <h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">Tekst</h3>
 
                <h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 3 * 100%);">Tekst</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%);">Tekst</h3>
 
                <h3 class="pi-smart-data-label pi-data-label pi-secondary-font pi-item-spacing" style="width: calc(1 / 2 * 100%);">Tekst</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">Tekst</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">Tekst</h3>
 
	<div class="pi-data-value pi-font">III</div>
</div>
</section>

header

Atrybuty None
Pochodne tagi None

Tag nagłówka, pozwalający określić nagłówek grupy.

Przykład użycia Wyjście HTML
<header>Tekst nagłówka</header>
Domyślna grupa
<h2 class="pi-item pi-secondary-font pi-item-spacing pi-secondary-background pi-header">Tekst nagłówka</h2>
Pozioma grupa


<caption class="pi-secondary-font pi-secondary-background pi-item-spacing pi-header">Tekst nagłówka</caption>

navigation

Atrybuty None
Pochodne tagi None

Używany do wstawienia każdego z wikitekstów.

Przykład użycia Wyjście HTML
<navigation>[[Linki]]</navigation>
<nav class="pi-item-spacing pi-secondary-background pi-secondary-font pi-navigation">
	<a href="/wiki/Linki" title="Linki">Linki</a>
</nav>
Treści społeczności są dostępne na podstawie licencji CC-BY-SA , o ile nie zaznaczono inaczej.