Табвью

Табвью (англ. tabview) — интерактивный элемент, предназначенный для распределения контента статьи между несколькими вкладками, каждая из которых содержит в себе информацию с указанных страниц.

Ранее это расширение было подключено на всех вики по умолчанию. После перехода на единую платформу Фэндом отказался от использования этого элемента, так как загрузка на одну страницу информации с других страниц отрицательно сказывалась на рейтинге в поисковых системах. На новые вики этот элемент перестали добавлять. Некоторое время волонтёры также посещали вики, готовящиеся к переносу на единую платформу, и предлагали свою помощь в замене табвью на другие способы подачи информации на странице. Однако по многочисленным отзывам было решено временно оставить табвью на тех вики, где они использовались до переноса. Тем не менее, сотрудники не отказываются от желания и необходимости полностью удалить этот элемент на всех вики

Описание

Табвью выглядит как небольшая область с вкладками, внутри которых находится текст. По умолчанию область элемента содержит только названия вкладок и границу, которая отделяет названия от содержимого. Почти сразу после открытия страницы будет загружена и показана первая вкладка. В мобильной версии элемент работает иначе — пользователь видит только названия вкладок, оформленный в виде ссылок.

При использовании элемента есть ряд условий, несоблюдение которых приведёт к его некорректной работе:

• Нельзя использовать в качестве вкладки страницу, на которой уже есть табвью — это приведёт к некорректному поведению всей страницы даже после переключения на другую, «правильную» вкладку.
• На некоторой странице нельзя использовать в качестве вкладки её саму.

Использование

Для создания табвью нужно использовать тег <tabview></tabview>, в котором содержимое добавляется следующим образом:

• Внутри кода используется формат: Текст|Заголовок; каждая следующая вкладка отделяется от другой переносом строки.
• Если страница из вкладки часто обновляется, то вы можете добавить Текст|Заголовок|false, чтобы содержимое вкладки обновлялось при каждой загрузке страницы.
• Если нужно сделать так, чтобы при загрузке табвью автоматически открывалась не первая вкладка, а другая, нужно использовать параметр true для нужной вкладки (Текст|Заголовок||true). Стоит отметить, что параметр отделён двумя вертикальными чертами, так как между ними можно указать параметр для обновления вкладки.

Ниже приведён код, который создаёт три вкладки с содержимым разных статей (при этом первой должна открыться вкладка про содержание).

<tabview>
Fandom Helper|Helpers
Содержание|Toc||true
Fandom Star|Stars
</tabview>

Полученный результат можно увидеть ниже (цвета приглушены умышленно для отделения примера от текста статьи):

• Helpers
• Toc
• Stars

Оформление

/*** Основные классы TabView ***/
ul.tabs {/*список вкладок*/}
ul.tabs > [data-tab="flytabs_00"] {/*1-я вкладка*/}
ul.tabs > [data-tab="flytabs_01"] {/*2-я вкладка*/}
...
ul.tabs li.selected {/*активная (выбранная) вкладка*/}
div.tabBody .selected {/*отображаемое содержимое*/}
 /** Содержимое **/
div[id$="content-wrapper"] {
	/*стиль контейнера основного содержимого*/
}
div.tabbody selected  {
	/*стиль контейнера отображаемого содержимого*/
}

/*** Классы в случае использования id ***/
/** <tabview id="Example"> позволит создать уникальный стиль для отдельного элемента **/
/* id не должны повторяться, иначе произойдет путаница с правилами */
div#flytabs_Example {
	/*стиль контейнера вкладок*/
}
div#flytabs_Example ul.tabs {/*список вкладок*/}
div#flytabs_Example ul.tabs [data-tab="flytabs_Example0"] {/*1-я вкладка*/}
div#flytabs_Example ul.tabs [data-tab="flytabs_Example1"] {/*2-я вкладка*/}
...
div#flytabs_Example ul.tabs li.selected {/*активная (выбранная) вкладка*/}
 /** Содержимое **/
div#flytabs_Example-content-wrapper {
	/*стиль контейнера основного содержимого*/
}
 /*контейнер содержимого первой/второй/т.д. вкладок*/
div[data-tab-body="flytabs_Example0"],div[data-tab-body="flytabs_Example1"],...

Применение

Табвью может использоваться для того, чтобы отобразить на странице большое количество информации, но при этом сохранить некоторую простоту редактирования (например, не нужно копаться в редакторе в поисках нужного места; вместо этого достаточно открыть нужную страницу). В иных случаях табвью может использоваться для объединения содержимого подстраниц в одном месте.

Кроме того, табвью может использоваться в качестве вложенного элемента таббера, поскольку использование таббера внутри другого таббера приводит к их некорректной работе. Такая особенность может пригодиться в тех случаях, когда необходимо использовать вкладки внутри вкладок.