Справка:Инфобоксы/теги

Разметка инфобоксов состоит из тегов. Используя и комбинируя их, можно создать такой инфобокс, который нужен именно вашей вики. О том, как задать инфобоксам индивидуальный стиль, смотрите статью Справка:Инфобоксы/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>

<aside class="portable-infobox pi-background pi-theme-wikia pi-layout-default">
 <h2 class="pi-item pi-item-spacing pi-title">Title</h2>
</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>{{{цена}}} [[Файл:ЗолотаяМонета.jpg]]</format>
</data>

`<image>`

<image> - используется для вставки изображения в инфобокс. При этом значение переменной в Исходном коде должно указываться в формате ИмяФайла.jpg или [[Файл:ИмяФайла.jpg]]. Для нескольких изображений с вкладками используйте внутри тег <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>

Допустимые теги

Параметры

Пример

<data>

Допустимые теги

Параметры

Пример

<label>

Допустимые теги

Параметры

Пример

<default>

Допустимые теги

Параметры

Пример

<format>

Допустимые теги

Параметры

Пример

<image>

Допустимые теги

Attributes

Пример

<alt>

Допустимые теги

Параметры

Пример

<caption>

Допустимые теги

Параметры

Пример

<group>

Допустимые теги

Параметры

Пример

<header>

Допустимые теги

Параметры

Пример

<navigation>

Допустимые теги

Параметры

Пример

<panel>

Допустимые теги

Параметры

Пример

<section>

Допустимые теги

Параметры

Пример

`<infobox>`

`<title>`

`<data>`

`<label>`

`<default>`

`<format>`

`<image>`

`<alt>`

`<caption>`

`<group>`

`<header>`

`<navigation>`

`<panel>`

`<section>`