Pomoc:Infoboksy/Tagi

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.

<infobox>

Tag <infobox> zawiera wszystkie inne tagi oraz określa zakres całego infoboksu.

Poprawne tagi

Tagi macierzyste	Tagi pochodne
Brak	<title> <image> <header> <navigation> <data> <group> <panel>

Atrybuty

theme

Nazwa motywu, który ma zostać zastosowany. Dodaje do infoboksu klasę według schematu .pi-theme-$1, ze spacjami przekształcanymi w dywizy (-). Nie nadpisuje theme-source lub type.

theme-source

Nazwa parametru, którego wartość zostanie użyta jako motyw. Dodaje do infoboksu klasę według schematu .pi-theme-$1, ze spacjami przekształcanymi w dywizy (-). Nie nadpisuje theme lub type.type.

type

Nazwa typu, który ma zostać zastosowany. Dodaje do infoboksu klasę według schematu .type-$1, ze spacjami przekształcanymi w dywizy (-). Nie nadpisuje theme lub theme-source.

accent-color-source

Nazwa parametru, którego wartość zostanie użyta jako akcentowany kolor.

accent-color-default

Domyślny akcentowany kolor. Akceptuje 3 i 6-cyfrowe kody szesnastkowe, np. #f00 lub #ff0000.

accent-color-text-source

Nazwa parametru, którego wartość zostanie użyta jako akcentowany kolor tekstu.

accent-color-text-default

Domyślny akcentowany kolor tekstu. Akceptuje 3 i 6-cyfrowe kody szesnastkowe, np. #f00 lub #ff0000.

layout

Dostępne wartości: default, stacked.

name

Wewnętrzna nazwa elementu i jego elementów pochodnych. Przypisana do atrybutu data-item-name w wygenerowanym kodzie HTML.

Wyjście HTML

Przykład użycia

<infobox>
    <title source="źródło_tytułu" />
</infobox>

Wyjście

<aside class="portable-infobox pi-background pi-theme-wikia pi-layout-default">
    <h2 class="pi-item pi-item-spacing pi-title" data-source="źródło_tytułu">Tytuł</h2>
</aside>

<title>

Tag <title> określa tytuł infoboksu. Obrazy używane w tagu title nie pojawiają się w wersji mobilnej.

Poprawne tagi

Tagi macierzyste	Tagi pochodne
<infobox> <group>	<default> <format>

Atrybuty

source

Nazwa parametru do użycia.

name

Wewnętrzna nazwa elementu i jego elementów pochodnych. Przypisana do atrybutu data-item-name w wygenerowanym kodzie HTML.

Wyjście HTML

Przykład użycia

<title source="źródło_tytułu">
    <default>{{PAGENAME}}</default>
</title>

Wyjście

<h2 class="pi-item pi-item-spacing pi-title" data-source="źródło_tytułu">Nazwa strony</h2>

<data>

Tag <data> jest standardowym tagiem wartości w infoboksie.

Poprawne tagi

Tagi macierzyste	Tagi pochodne
<infobox> <group>	<default> <label> <format>

Atrybuty

source

Nazwa parametru do użycia.

span

Liczba kolumnt w zakresie. Dostępny tylko w inteligentnych grupach.

layout

Dostępne wartości: default. Dostępny tylko w inteligentnych grupach.

name

Wewnętrzna nazwa elementu i jego elementów pochodnych. Przypisana do atrybutu data-item-name w wygenerowanym kodzie HTML.

Wyjście HTML

Przykład użycia

<data source="nazwa">
    <label>Imię</label>
    <default>Janek</default>
</data>

Wyjście

<div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="nazwa">
    <h3 class="pi-data-label pi-secondary-font">Imię</h3>
    <div class="pi-data-value pi-font">Janek</div>
</div>

<label>

Tag <label> może być używany wyłącznie wewnątrz innych tagów, sprawdź listę tagów pochodnych aby dowiedzieć się więcej. Akceptuje wikitekst.

Poprawne tagi

Tagi macierzyste	Tagi pochodne
<data> <section>	Brak

Atrybuty

Brak.

Wyjście HTML

Przykład użycia

<label>Imię</label>

Wyjście

<h3 class="pi-data-label pi-secondary-font">Imię</h3>

<default>

Tag <default> jest używany gdy wartość parametru „source” nie została podana. Może być używany wyłącznie wewnątrz innych tagów, sprawdź listę tagów pochodnych aby dowiedzieć się więcej. Akceptuje wikitekst.

Poprawne tagi

Tagi macierzyste	Tagi pochodne
<title> <data> <image> <alt> <caption>	Brak

Atrybuty

Brak.

Wyjście HTML

Przykład użycia

<default>Janek</default>

Wyjście

<div class="pi-data-value pi-font">Janek</div>

<format>

Tag <format> może być używany wyłącznie wewnątrz innych tagów, sprawdź listę tagów pochodnych aby dowiedzieć się więcej. Akceptuje wikitekst.

Poprawne tagi

Tagi macierzyste	Tagi pochodne
<title> <data> <caption>	Brak

Atrybuty

Brak.

Wyjście HTML

Przykład użycia

<data source="złote">
    <label>Cena</label>
    <format>{{{złote}}}zł</format>
</data>

Wyjście

<div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="złote">
    <h3 class="pi-data-label pi-secondary-font">Cena</h3>
    <div class="pi-data-value pi-font">15zł</div>
</div>

<image>

Tag <image> jest używany w celu dodania obrazu lub pliku wideo do infoboksu. Może zostać ostylowany tylko za pomocą lokalnego CSS-u, i nie może być ręcznie powiększony. Obrazy są normalizowane, co oznacza, że [[Plik:Przykład.jpg]] oraz Przykład.jpg są interpretowane tak samo. Kilka obrazów może zostać dodanych za pomocą tagów galerii.

W tym tagi 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>.

Poprawne tagi

Tagi macierzyste	Tagi pochodne
<infobox> <group>	<alt> <caption> <default>

Atrybuty

source

Nazwa parametru do użycia.

name

Wewnętrzna nazwa elementu i jego elementów pochodnych. Przypisana do atrybutu data-item-name w wygenerowanym kodzie HTML.

Wyjście HTML

Przykład użycia

<image source="obraz" />

Wyjście

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

<alt>

Tag <alt> może być używany wyłącznie wewnątrzt tagu <image>.

Poprawne tagi

Tagi macierzyste	Tagi pochodne
<image>	<default>

Atrybuty

source

Nazwa parametru do użycia.

Wyjście HTML

Przykład użycia

<image source="obraz">
    <alt source="tytuł_alternatywny">
        <default>Domyślny tekst alternatywny</default>
    </alt>
</image>

Wyjście

<figure class="pi-item pi-image" data-source="obraze">
    <a href=".../Plik:Obraz.jpg" class="image image-thumbnail" title="Domyślny tekst alternatywny<">
        <img src="Obraz.jpg" srcset="Image.jpg 1x, Image.jpg 2x" class="pi-image-thumbnail" alt="Domyślny tekst alternatywny<" data-image-key="Obraz.jpg" data-image-name="Obraz.jpg" width="" height="">
    </a>
</figure>

<caption>

Tag <caption> może być używany wyłącznie wewnątrzt tagu <image>.

Poprawne tagi

Tagi macierzyste	Tagi pochodne
<image>	<default> <format>

Atrybuty

source

Nazwa parametru do użycia.

Wyjście HTML

Przykład użycia

<image source="obraz">
    <caption source="podpis">
        <default>Mój podpis</default>
    </caption>
</image>

Wyjście

<figcaption class="pi-item-spacing pi-caption">Mój podpis</figcaption>

<group>

Tag <group> używany jest do grupowania pól, opcjonalnie 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.

Poprawne tagi

Tagi macierzyste	Tagi pochodne
<infobox> <group>	<data> <header> <image> <title> <group> <navigation> <panel>

Atrybuty

layout

Dostępne wartości: default, horizontal.

show

Dostępne wartości: default, incomplete.

collapse

Dostępne wartości: open, closed. Dostępne tylko gdy pierwszym elementem pochodnym grupy jest tag <header>.

row-items

Przekształca grupę w grupę inteligentną z zakresem liczby kolumn wynoszącym n. Inteligentne grupy układają komórki (tagi <data>) poziomo i automatycznie przenoszą komórki do nowego wiersza po przekroczeniu tego limitu. Komórki są rozciągane, aby zajmowały jak najwięcej miejsca w ostatnim wierszu.

name

Wewnętrzna nazwa elementu i jego elementów pochodnych. Przypisana do atrybutu data-item-name w wygenerowanym kodzie HTML.

Wyjście HTML

Domyślna grupa

Przykład użycia

<group>
    <header>Nazwa grupy</header>
    <data source="wartość1" />
</group>

Wyjście

<section class="pi-item pi-group pi-border-color">
    <h2 class="pi-item pi-header pi-secondary-font pi-item-spacing pi-secondary-background">Nazwa grupy</h2>
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="wartość1">
        <div class="pi-data-value pi-font">Wartość danych</div>
    </div>
</section>

Grupa pozioma

Przykład użycia

<group layout="horizontal">
    <header>Nazwa grupy</header>
    <data source="wartość1">
        <label>Etykieta danych</label>
    </data>
</group>

Wyjście

<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">Nazwa grupy</caption>
        <thead>
            <tr>
                <th class="pi-horizontal-group-item pi-data-label pi-secondary-font pi-border-color pi-item-spacing" data-source="wartość1">Etykieta danych</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="pi-horizontal-group-item pi-data-value pi-font pi-border-color pi-item-spacing" data-source="wartość1">Wartość danych</td>
            </tr>
        </tbody>
    </table>
</section>

Inteligentna grupa

Przykład użycia

<group row-items="3">
    <header>Nagłówek sekcji</header>
    <data source="wartość 1">
        <label>Etykieta 1</label>
    </data>
    <data source="wartość 2">
        <label>Etykieta 2</label>
    </data>
    <data source="wartość 3">
        <label>Etykieta 3</label>
    </data>
    <data source="wartość 4" layout="default">
        <label>Etykieta 4</label>
    </data>
    <data source="wartość 5">
        <label>Etykieta 5</label>
    </data>
    <data source="wartość 6">
        <label>Etykieta 6</label>
    </data>
</group>

Wyjście

<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%);" data-source="wartość 1">Etykieta 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="wartość 2">Etykieta 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="wartość 3">Etykieta 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="wartość 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="wartość 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="wartość 3">CCC</div>
        </section>
    </section>
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="wartość 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="wartość 5">Etykieta 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="wartość 6">Etykieta 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="wartość 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="wartość 6">FFF</div>
        </section>
    </section>
</section>

<header>

Tag <header> określa początek sekcji lub grupy tagów.

Poprawne tagi

Tagi macierzyste	Tagi pochodne
<infobox> <group> <panel>	Brak

Atrybuty

name

Wewnętrzna nazwa elementu i jego elementów pochodnych. Przypisana do atrybutu data-item-name w wygenerowanym kodzie HTML.

Wyjście HTML

Przykład użycia

<header>Tekst nagłówka</header>

Wyjście w grupie domyślnej

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

Wyjście w grupie inteligentnej

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

<navigation>

Tag <navigation> jest używany do wstawiania dowolnego wikitekstu.

Poprawne tagi

Tagi macierzyste	Tagi pochodne
<infobox> <group> (not available in horizontal groups)	Brak

Atrybuty

name

Wewnętrzna nazwa elementu i jego elementów pochodnych. Przypisana do atrybutu data-item-name w wygenerowanym kodzie HTML.

Wyjście HTML

Przykład użycia

<navigation>[[Link]]</navigation>

Wyjście

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

<panel>

Tag <panel> jest używany w celu stworzenia interfejsu opartego na zakładkach, gdzie zawartość każej z zakładek znajduje się wewnątrz tagu <section>.

Poprawne tagi

Tagi macierzyste	Tagi pochodne
<infobox> <group>	<header> <section>

Atrybuty

name

Wewnętrzna nazwa elementu i jego elementów pochodnych. Przypisana do atrybutu data-item-name w wygenerowanym kodzie HTML.

Wyjście HTML

Przykład użycia

<panel>
    <section>
        <label>A</label>
        <data source="raz" />
        <data source="dwa" />
    </section>
    <section>
        <label>B</label>
        <data source="trzy" />
        <data source="cztery" />
    </section>
</panel>

Wyjście

<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="raz">
                <div class="pi-data-value pi-font">Pierwszy</div>
            </div>
            <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="dwa">
                <div class="pi-data-value pi-font">Drugi</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="trzy">
                <div class="pi-data-value pi-font">Trzeci</div>
            </div>
            <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="cztery">
                <div class="pi-data-value pi-font">Czwarty</div>
            </div>
        </div>
    </div>
</section>

<section>

Tag <section> reprezentuje zawartość zakładki. Etykieta, którą można kliknąć dodawana jest przy użyciu tagu <label>. Jeżeli nie została podana etykieta, użyta zostanie liczba całkowita odpowiadajaca indeksowi sekcji, jeśli wszystkie zakładki nie posiadają etykiet, to zostaną ściśnięte pionowo.

Poprawne tagi

Tagi macierzyste	Tagi pochodne
<panel>	<title> <data> <label> <image> <group> <header> <navigation>

Atrybuty

name

Wewnętrzna nazwa elementu i jego elementów pochodnych. Przypisana do atrybutu data-item-name w wygenerowanym kodzie HTML.

Wyjście HTML

Przykład użycia

<section>
    <label>A</label>
    <data source="raz" />
    <data source="dwa" />
</section>

Wyjście

<div class="pi-section-content" data-ref="0">
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="raz">
        <div class="pi-data-value pi-font">Pierwszy</div>
    </div>
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="dwa">
        <div class="pi-data-value pi-font">Drugi</div>
    </div>
</div>