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

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

• Вставка контента с вкладками
• Вложенные вкладки
• Стилизация вкладок
• Условные вкладки
• Примеры кода на нескольких языках программирования
• Вкладки в печатных форматах

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

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

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

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

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

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

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

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

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

Вкладки можно стилизовать с помощью CSS-файлов, как и любой другой контент. По умолчанию в файле Style.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, который не работает в печатных форматах, в печатных версиях документации они отображаются в виде таблиц, чтобы сохранить контент в удобочитаемом виде.

Наверх