Розмітка інфобоксів складається з тегів. Використовуючи і комібнуючи їх, можна створити такий інфобокс, який потрібний саме вашій вікі. Про те, як задати інфобоксам індивідуальний стиль, дивіться статтю Довідка:Інфобокси/CSS.

<infobox>[ред. | ред. код]

Тег <infobox> є загальним тегом, який виявляє межи коду інфобоксу і може задати стиль усього інфобоксу.

Допустимі теги[ред. | ред. код]

Зовнішні теги Дочірні теги
Не існують
  • <title>
  • <image>
  • <header>
  • <navigation>
  • <data>
  • <group>
  • <panel>

Параметри[ред. | ред. код]

theme
Застосовує до інфобоксу стиль, прописаний в CSS як theme. В CSS прописується стиль у форматі .pi-theme-$1. Даний параметр не приховує параметри theme-source або type.
theme-source
Дозволяє задати інфобоксу стиль, в залежності від змісту якогось рядка всередині інфобоксу. В CCS прописується як .pi-theme-$1. Даний параметр не приховує значення параметрів theme або type.
type
Дозволяє задати інфобоксу якийсь логічний стиль. В CSS прописується як .type-$1. Даний параметр не приховує параметри theme или theme-source.
accent-color-source
Використовується для акцентного кольору інфобоксу (який приховує інші стилі).
accent-color-default
Акцентний колір інфобоксу за замовчуванням. Можна прописати колір в стандартному коді #f00 або #ff0000.
accent-color-text-source
Використовується для акцентного кольору тексту.
accent-color-text-default
Використовується для акцентного кольору тексту за замовчуванням. Можна прописати колір у стандартному коді #f00 або #ff0000.
layout
Можу бути двух варіантів: default або stacked. Використовується для форматування тексту всередині інфобоксу.
name
Внутрішня назва для елементів інфобоксу. Пов'язано з кодом data-item-name в HTML.

Приклад[ред. | ред. код]

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

<syntaxhighlight lang="html5" style="margin:1em 0 1em 1em; width:550px;"> <aside class="portable-infobox pi-background pi-theme-wikia pi-layout-default">

Title

</aside>

<infobox layout="stacked" theme="MyInfobox">
 <title source="title_source" />
</infobox>

<title>[ред. | ред. код]

Тег <title> використовується один раз в коді інфобоксу для заголовка інфобоксу в цілому. Якщо всередині тега розмістити зображення, то воно не з'явиться в мобільному скіні.

Допустимі теги[ред. | ред. код]

Зовнішні теги Дочірні теги
  • <infobox>
  • <group>
  • <default>
  • <format>

Параметри[ред. | ред. код]

source
Назва рядка всередині інфобоксу.
name
Внутрішня назва елемента та його дочірніх тегів. Може використовуватися як data-item-name в HTML.

Приклад[ред. | ред. код]

<title source="ім'я персонажа"><default>{{PAGENAME}}</default></title>

<h2 class="pi-item pi-item-spacing pi-title">Ім'я</h2>

<data>[ред. | ред. код]

<data> — тег, який використовується для завдання змінних всередині інфобоксу.

Допустимі теги[ред. | ред. код]

Зовнішні теги Дочірні теги
  • <infobox>
  • <group>
  • <default>
  • <label>
  • <format>

Параметри[ред. | ред. код]

source
Назва рядка всередині інфобоксу.
span
Кількість колонок. Може використовуватися в «розумному» макеті.
layout
Можливе значення: default. Може використовуватися в «розумному» макеті.
name
Внутрішня назва елементу і його дочірніх тегів. Може використовуватися як data-item-name в HTML.

Приклад[ред. | ред. код]

<data source="Титул">
 <label>Титул персонажа</label>
 <default>немає титула</default>
</data>

<div class="pi-item pi-item-spacing pi-data pi-border-color">
 <h3 class="pi-secondary-font pi-data-label">Титул персонажа</h3>
 <div class="pi-font pi-data-value">немає титула</div>
</div>

<data source="конфлікт"><label>Конфлікт</label></data>
<data source="дата"><label>Дата</label></data>
<data source="місце"><label>Місце</label></data>

<label>[ред. | ред. код]

<label> використовується всередині тега data. Задає заголовок для змінної, якщо це необхідно. Для заголовків можна використовувати вікі-текст.

Допустимі теги[ред. | ред. код]

Зовнішні теги Дочірні теги
  • <data>
  • <section>
Не існують

Параметри[ред. | ред. код]

Не існують.

Приклад[ред. | ред. код]

<label>Титул</label>

<h3 class="pi-secondary-font pi-data-label">Титул</h3>

<label>[[Сезон серіалу|Сезон]]</label>

<default>[ред. | ред. код]

<default> може використовуватися всередині інших тегів, показуючи значення змінної за замовчуванням. Сприймає вікі=текст.

Допустимі теги[ред. | ред. код]

Зовнішні теги Дочірні теги
  • <title>
  • <data>
  • <image>
  • <alt>
  • <caption>
Не існують

Параметри[ред. | ред. код]

Не існують.

Приклад[ред. | ред. код]

<default>[[:Категорія:Просто люди|немає титула]]</default>

<div class="pi-font pi-data-value">немає титула</div>

<format>[ред. | ред. код]

<format> — можна використовуватися, якщо джо змінної потрібно додати стандартну інформацію (опис, іконку, категорію та інше). Сприймає вікі-текст.

Допустимі теги[ред. | ред. код]

Зовнішні теги Дочірні теги
  • <title>
  • <data>
  • <caption>
Не існують

Параметри[ред. | ред. код]

Не існують.

Приклад[ред. | ред. код]

<data source="ціна">
 <label>Ціна предмету</label>
 <format>{{{ціна}}} монет</format>
</data>

<div class="pi-item pi-item-spacing pi-data pi-border-color">
 <h3 class="pi-secondary-font pi-data-label">Ціна предмету</h3>
 <div class="pi-font pi-data-value">15 монет</div>
</div>

<data source="ціна">
 <label>Ціна предмету</label>
 <format>{{{ціна}}} [[Файл:ЗолотаМонета.png]]</format>
</data>

<image>[ред. | ред. код]

<image> — використовується для вставлення зображення у інфобокс. При цьому значення змінної у вихідному коді повинно вказуватися у форматі Ім'яФайла.png або [[Файл:Ім'яФайла.png]]. Для декількох зображень з вкладками використовуйте всередині тег <gallery>.

При використанні <default> можна задати інфобоксу зображення, яке буде додаватись у інфобокс, якщо користувач не вказав будь-яке зображення. Для цього використовується код типу <default>ИмяФайла.jpg</default>.

Допустимі теги[ред. | ред. код]

Зовнішні теги Дочірні теги
  • <infobox>
  • <group>
  • <alt>
  • <caption>
  • <default>

Attributes[ред. | ред. код]

source
Назва рядка інфобоксу.
name
Внутрішня назва елементу та його дочірніх тегів. Може використовуватися як data-item-name в HTML.

Приклад[ред. | ред. код]

<image source="зобр" />

<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>[ред. | ред. код]

<alt> — використовується всередині тегу image для тексту, який спливає при наведенні курсору на зображення у інфобоксі.

Допустимі теги[ред. | ред. код]

Зовнішні теги Дочірні теги
  • <image>
  • <default>

Параметри[ред. | ред. код]

source
Назва рядку у інфобоксі.

Приклад[ред. | ред. код]

<image source="зобр">
 <alt source="опис зобр">
  <default>Невідоме зображення</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>[ред. | ред. код]

<caption> — використовується тільки всередині тегу image, якщо необхідно додати підпис до зображення.

Допустимі теги[ред. | ред. код]

Зовнішні теги Дочірні теги
  • <image>
  • <default>
  • <format>

Параметри[ред. | ред. код]

source
Назва рядка у інфобоксі.

Приклад[ред. | ред. код]

<image source="зобр">
 <caption source="підпис">
  <default>Невідоме зображення</default>
 </caption>
</image>

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

<group>[ред. | ред. код]

<group> — використовується для групування рядок інфобоксу, в тому числі і під одним заголовком. Якщо рядки зі змінними всередині групи будуть порожніми, то уся група, включаючи заголовок, показана не буде. Однак можна використати параметр show як incomplete. Тоді усі рядки інфобоксу будуть показані, якщо хоча б один рядок всередині групи буде заповнена.

Допустимі теги[ред. | ред. код]

Зовнішні теги Дочірні теги
  • <infobox>
  • <group>
  • <data>
  • <header>
  • <image>
  • <title>
  • <group>
  • <navigation>
  • <panel>

Параметри[ред. | ред. код]

layout
Допустимі значення: default, horizontal.
show
Допустимі значення: default, incomplete.
collapse
Допустимі значення: open, closed. Працює тільки у тому випадку, якщо першим дочірнім тегом у групі є тег <header>.
row-items
Додають стовпці у групу, перетворюючи її в «розумний» макет. Цей макет має свої осередки з тегами <data>, розташованими горизонтально.
name
Внутрішня назва елементу та його дочірніх тегів. Може використовуватися як data-item-nameв HTML.

Приклад[ред. | ред. код]

<group>
 <header>Інформація</header>
 <data source="конфлікт"><label>Конфлікт</label></data>
 <data source="дата"><label>Дата</label></data>
</group>

<group layout="horizontal" show="incomplete">
 <header>Стороні конфлікту</header>
 <data source="Сторона1" />
 <data source="Сторона2" />
</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>
<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>

<header>[ред. | ред. код]

<header> — використовується, щоб задати заголовок секції всередині інфобоксу, в тому числі і всередині тегу.

Допустимі теги[ред. | ред. код]

Зовнішні теги Дочірні теги
  • <infobox>
  • <group>
  • <panel>
Не існують

Параметри[ред. | ред. код]

name
Внутрішня назва елементу та його дочірніх тегів. Може використовуватися як data-item-name в HTML.

Приклад[ред. | ред. код]

<header>Додаткова інформація</header>

<h2 class="pi-item pi-secondary-font pi-item-spacing pi-secondary-background pi-header">Header Text</h2>

<navigation>[ред. | ред. код]

<navigation> — використовується для додання всередині інфобоксу будь-якого вікі-тексту.

Допустимі теги[ред. | ред. код]

Зовнішні теги Дочірні теги
Не існують

Параметри[ред. | ред. код]

name
Внутрішня назва елементу та його дочірніх тегів. Може використовуватися як data-item-name в HTML.

Приклад[ред. | ред. код]

<navigation>[[Посилання]]</navigation>

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

<panel>[ред. | ред. код]

<panel> — використовується, щоб створити вкладки всередині інфобоксу. Контент для кожної вкладки розміщується всередині тегу <section>.

Допустимі теги[ред. | ред. код]

Зовнішні теги Дочірні теги
  • <infobox>
  • <group>
  • <header>
  • <section>

Параметри[ред. | ред. код]

name
Внутрішня назва елементу та його дочірніх тегів. Може використовуватися як data-item-name в HTML.

Приклад[ред. | ред. код]

<panel>
    <section>
        <label>A</label>
        <data source="one" />
        <data source="two" />
    </section>
    <section>
        <label>B</label>
        <data source="three" />
        <data source="four" />
    </section>
</panel>

<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="one">
                <div class="pi-data-value pi-font">1st</div>
            </div>
            <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="two">
                <div class="pi-data-value pi-font">2nd</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="three">
                <div class="pi-data-value pi-font">3rd</div>
            </div>
            <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="four">
                <div class="pi-data-value pi-font">4th</div>
            </div>
        </div>
    </div>
</section>

<section>[ред. | ред. код]

<section> — використовується всередині тегу <panel>, для контенту вкладок. Назва кожної вкладки задається за допомогою тегу <label>.

Допустимі теги[ред. | ред. код]

Зовнішні теги Дочірні теги
  • <panel>
  • <title>
  • <data>
  • <label>
  • <image>
  • <group>
  • <header>
  • <navigation>

Параметри[ред. | ред. код]

name
Внутрішня назва елементу та його дочірніх тегів. Може використовуватися як data-item-name в HTML.

Приклад[ред. | ред. код]

<section>
    <label>A</label>
    <data source="one" />
    <data source="two" />
</section>

<div class="pi-section-content" data-ref="0">
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="one">
        <div class="pi-data-value pi-font">1st</div>
    </div>
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="two">
        <div class="pi-data-value pi-font">2nd</div>
    </div>
</div>

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