Довідка:Інфобокси/теги

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

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

Допустимі теги[]

Зовнішні теги	Дочірні теги
`<infobox>` `<group>` (not available in horizontal groups)	Не існують

Параметри[]

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>

Довідка:Інфобокси/теги

<infobox>[]

Допустимі теги[]

Параметри[]

Приклад[]

Title

<title>[]

Допустимі теги[]

Параметри[]

Приклад[]

<data>[]

Допустимі теги[]

Параметри[]

Приклад[]

<label>[]

Допустимі теги[]

Параметри[]

Приклад[]

<default>[]

Допустимі теги[]

Параметри[]

Приклад[]

<format>[]

Допустимі теги[]

Параметри[]

Приклад[]

<image>[]

Допустимі теги[]

Attributes[]

Приклад[]

<alt>[]

Допустимі теги[]

Параметри[]

Приклад[]

<caption>[]

Допустимі теги[]

Параметри[]

Приклад[]

<group>[]

Допустимі теги[]

Параметри[]

Приклад[]

<header>[]

Допустимі теги[]

Параметри[]

Приклад[]

<navigation>[]

Допустимі теги[]

Параметри[]

Приклад[]

<panel>[]

Допустимі теги[]

Параметри[]

Приклад[]

<section>[]

Допустимі теги[]

Параметри[]

Приклад[]

Fan Feed

`<infobox>`[]

`<title>`[]

`<data>`[]

`<label>`[]

`<default>`[]

`<format>`[]

`<image>`[]

`<alt>`[]

`<caption>`[]

`<group>`[]

`<header>`[]

`<navigation>`[]

`<panel>`[]

`<section>`[]