Запросить демо

Вебинар о Лучших практиках единого источника · 25 июня 2024, 18:00 (МСК)

Зарегистрироваться
Запросить демо
Документерра: руководство пользователя

Вставка вкладок

С помощью вкладок можно разделить контент документации на подразделы и сократить объем страницы. Одним из наиболее распространенных примеров использования вкладок является предоставление удобного сниппета кода на различных языках программирования.

Вставка контента с вкладками

Вот как можно создать вкладки:

  1. Откройте вкладку Вставка в верхней панели и найдите группу Текстовые блоки.
  2. Нажмите кнопку «Вкладки». Откроется всплывающее окно конфигурации:
    Диалоговое окно «Вставка вкладок»
  3. Укажите количество вкладок, которые необходимо вставить (количество ограничено до 100), и нажмите кнопку OK.

После вставки вкладок в режиме редактирования они будут выглядеть как таблица:

Вкладки в режиме редактирования

В первом столбце можно задать название для каждой вкладки, а во втором — ввести контент соответствующей вкладки. 

После разблокировки страницы вкладки будут отображаться как элемент с вкладками — так же, как они будут отображаться для читателей:

Вкладки в режиме просмотра

Вложенные вкладки 

Поскольку в режиме редактирования вкладки представлены в виде таблицы, в ячейку «Название вкладки» и в ячейку «Контент вкладки» можно поместить практически любой контент. Это позволяет создавать и вложенные вкладки. Глубина вложенных вкладок не ограничена, но мы не рекомендуем злоупотреблять многоуровневыми вкладками.

Вложенные вкладки в режиме просмотра

Стилизация вкладок

Вкладки можно стилизовать с помощью CSS-файлов, как и любой другой контент. По умолчанию в файле Style.css существует несколько стилей вкладок.

Щелкните здесь, чтобы просмотреть стандартный CSS-файл вкладок

CSS
/* Tabs */

.CHTabs_container
{
}

.CHTabs_tabCaptionsContainer
{
}

.CHTabs_tabCaption
{
}

.CHTabs_tabCaption:hover
{
color: #2196F3;
background-color: #E9F5FE;
}

.CHTabs_tabCaption.CHTabs_tabCaptionSelected,
.CHTabs_tabCaptionSelected:hover
{
color: #2196F3;
background-color: #cfe0ed;
}

.CHTabs_tabContentContainer
{
}

Вы можете настроить их так, чтобы вкладки выглядели в соответствии с вашими потребностями: изменить цвета, шрифт, кегль и т.д.:

Настраиваемые вкладки в режиме редактирования

Условные вкладки

Можно также сделать вкладки условными, чтобы некоторые вкладки отображались (или не отображались) с определенными условными тегами.

Для этого сделайте следующее:

  1. Поместите курсор в заголовок или ячейку контента вкладки, которую необходимо сделать условной.
  2. В инспекторе тегов, расположенном под верхней панелью, выберите тег tr (это строка, соответствующая вкладке).
  3. В верхней панели в группе Условный контент вкладки Публикация из единого источника укажите условный тег и нажмите кнопку Сделать включением или Сделать исключением.

Вы увидите пунктирную границу, которая указывает на то, что соответствующая вкладка теперь является условной:

Условные вкладки в режиме редактирования

Примеры кода на нескольких языках программирования

Чтобы показать один и тот же пример кода на нескольких языках программирования, можно использовать вкладки.

  1. Вставьте элемент «Вкладки» с нужным количеством вкладок.
  2. Измените названия вкладок в соответствии с языками.
  3. Вставьте Пример кода в ячейку контента вкладки, выбрав макет Только код.
Примеры кода, вставляемые во вкладки

Вкладки в печатных форматах

Поскольку вкладки основаны на JavaScript, который не работает в печатных форматах, в печатных версиях документации они отображаются в виде таблиц, чтобы сохранить контент в удобочитаемом виде.