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

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

`infobox`[]

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

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

Внешние теги	Дочерние теги
Не существуют	`<title>` `<image>` `<header>` `<navigation>` `<data>` `<group>` `<panel>`

Параметры[]

theme: Применяет к инфобоксу стиль, прописанный в CSS как theme. В CSS прописывается стиль в формате .pi-theme-$1. Данный параметр не перекрывает параметры theme-source или type.
theme-source: Позволяет задавать инфобоксу стиль, в зависимости от содержимого какой-либо строки внутри инфобокса. В CSS прописывается как .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 с множеством параметров -->
<infobox layout="stacked" theme="MyInfobox">
    <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>

`title`[]

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

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

Внешние теги	Дочерние теги
`<infobox>` `<group>`	`<default>` `<format>`

Параметры[]

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

Пример[]

    <title source="имя персонажа"><default>Имя</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>

`label`[]

<label> используется внутри тега data. Задаёт заголовок для переменной, если это необходимо. Для заголовков можно использовать викитекст.

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

Внешние теги	Дочерние теги
`<data>` `<section>`	Не существуют

Параметры[]

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

Пример[]

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

<h3 class="pi-secondary-font pi-data-label"><a href="/Сезоны">Сезоны сериала</a></h3>

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

Параметры[]

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.

Пример[]

Стандартная группа[]

Позволяет объединить ячейки в группу под заголовок, а также сделать его сворачиваемым через параметр collapse.

Код

<group collapse="open">
 <header>Заголовок</header>
 <data source="Первая"><label>Ячейка</label><format>с названием</format></data>
 <data source="Вторая" />
</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">Заголовок</h2>
 <div class="pi-item pi-item-spacing pi-data pi-border-color">
  <div class="pi-font pi-data-value">Данные</div>
 </div>
</section>

Результат

Горизонтальная группа[]

Позволяет создать группу с горизонтально расположенными в ней ячейками, используя параметр layout. Однако, в горизонтальной группе помещается только две ячейки. Для того, чтобы добавить более двух, можно добавить ещё одну горизонтальную группу или использовать уже «умную» группу

Код

<group layout="horizontal">
    <header>Название</header>
    <data source="Первая">
        <label>Первая</label><format>ячейка</format>
    </data>
    <data source="Вторая">
        <label>Вторая</label><format>ячейка</format>
    </data>
</group>

<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">Заголовок</caption>
  <thead>
   <tr>
    <th class="pi-secondary-font pi-horizontal-group-item pi-data-label pi-border-color pi-item-spacing">Название ячейки</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td class="pi-font pi-horizontal-group-item pi-data-value pi-border-color pi-item-spacing">Название ячейки</td>
   </tr>
  </tbody>
 </table>
</section>

Результат

«Умная» группа[]

Позволяет создавать табличную сетку из ячеек, используя параметр row-items

Код

<group row-items="3">
    <header>Заголовок</header>
    <data source="Первая">
        <label>Первая</label><default>Первая</default>
    </data>
    <data source="Вторая">
        <label>Вторая</label><default>Первая</default>
    </data>
    <data source="Третья">
        <label>Третья</label><default>Третья</default>
    </data>
    <data source="Четвёртая" layout="default">
        <label>Четвёртая</label><format>занимает три ячейки, параметр <code>default</code></format>
    </data>
    <data source="Пятая" layout="default"><format>А пятая без названия</format></data>
    <data source="Шестая">
        <label>Шестая</label><format>Оставшиеся две</format>
    </data>
    <data source="Седьмая">
        <label>Седьмая</label><format>также занимают всю ширину между собой</format>
    </data>
</group>

<section class="pi-item pi-group pi-border-color">
    <h2 class="pi-item pi-header pi-secondary-font pi-item-spacing pi-secondary-background">Section Header</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="value 1">Label 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="value 2">Label 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="value 3">Label 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="value 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="value 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="value 3">CCC</div>
        </section>
    </section>
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="value 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="value 5">Label 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="value 6">Label 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="value 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="value 6">FFF</div>
        </section>
    </section>
</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>` (недоступно для горизонтальных групп)	Не существуют

Параметры[]

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[]

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

Параметры[]

Пример[]

alt[]

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

Параметры[]

Пример[]

caption[]

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

Параметры[]

Пример[]

group[]

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

Параметры[]

Пример[]

Стандартная группа[]

Горизонтальная группа[]

«Умная» группа[]

header[]

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

Параметры[]

Пример[]

navigation[]

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

Параметры[]

Пример[]

panel[]

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

Параметры[]

Пример[]

section[]

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

Параметры[]

Пример[]

`infobox`[]

`title`[]

`data`[]

`label`[]

`default`[]

`format`[]

`image`[]

`alt`[]

`caption`[]

`group`[]

`header`[]

`navigation`[]

`panel`[]

`section`[]