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

Разметка инфобоксов состоит из тегов. Используя и комбинируя их, можно создать такой инфобокс, который нужен именно вашей вики. О том, как задать инфобоксам индивидуальный стиль, смотрите статью Справка:Инфобоксы/CSS.

<infobox>

Тег <infobox> является основным тегом, который определяет границы кода инфобокса и может задавать стиль всего инфобокса.

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

Параметры

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> используется один раз в коде инфобокса для заголовка инфобокса в целом. Если внутри тега разместить изображение, то оно не появится в мобильном скине.

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

Параметры

source

Название строки внутри инфобокса.

name

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

Пример

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

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

<data>

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

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

Параметры

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. Задаёт заголовок для переменной, если это необходимо. Для заголовков можно использовать викитекст.

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

Параметры

Не существуют.

Пример

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

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

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

<default>

<default> может использоваться внутри других тегов, показывая значение переменной по умолчанию. Воспринимает викитекст.

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

Параметры

Не существуют.

Пример

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

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

<format>

<format> - можно использовать, если к переменной нужно добавить стандартную информацию (описание, иконку, категорию и пр.) Воспринимает викитекст.

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

Параметры

Не существуют.

Пример

<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>.

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

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 для текста, который всплывает при наведении курсора на изображение в инфобоксе.

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

Параметры

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, если необходимо добавить подпись к изображению.

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

Параметры

source

Название строки в инфобоксе.

Пример

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

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

<group>

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

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

Параметры

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> - используется, чтобы задать заголовок секции внутри инфобокса, в том числе и внутри тега.

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

Параметры

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>.

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

Параметры

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>.

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

Параметры

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>