**Табы** — компонент интерфейса для переключения между связанными, но различными блоками контента в одной области просмотра. Они помогают организовать информацию в компактные, доступные секции, сохраняя контекст и уменьшая визуальный шум.
В основном табы используют для организации разных объектов одной группы, например, для переключения между смысловыми частями большой информационной статьи (как эта). Данный элемент нужно использовать осмысленно, когда содержимое действительно можно разделить на логические группы, а его объем слишком большой, поэтому нужно дать пользователю возможность быстро переключаться между его частями.
Основные элементы
Компонент состоит из панели вкладок и области контента. Панель может включать в себя табы, индикатор активной вкладки и, возможно, дополнительные элементы управления, например, стрелочки. Активный таб следует делать визуально связанным с контентной областью.
Структура таба
Каждый таб состоит из текстовой метки и может быть дополнен иконкой. Длина меток должна быть сбалансированной, при необходимости они могут сокращаться с многоточием, но лучше этого избегать. Расстояние между ними стоит сделать удобным для касания.
Варианты компоновки
Табы могут располагаться горизонтально (чаще всего сверху) или вертикально (слева). Возможны различные стили оформления: с подчеркиванием, в виде кнопок, с фоном.
Интерактивные состояния
Табам необходимо реагировать на наведение, например, подсветкой, а активный таб должен выделяться еще более заметно. Неактивные табы могут быть приглушены, а заблокированные — явно показывать невозможность выбора.
Переключение вкладок
При выборе таба происходит плавная, но достаточно быстрая смена контента, индикатор активной вкладки перемещается или происходит затухание старого и выделение выбранного таба. Возможно добавление ненавязчивой анимации для появления нового контента.
Мобильная версия
На узких экранах табы становятся прокручиваемыми по горизонтали. Активный таб автоматически попадает в область видимости. Метки могут быть сокращены до иконок, но в некоторых случаях лучше все-таки сохранить текст.
Планшетная версия
На средних экранах табы могут превращаться в выпадающий список при нехватке места. Появляются дополнительные возможности управления, например, кнопки прокрутки табов.
Десктопная версия
На десктопах система элементов управления может стать еще более расширенной. Соседние элементы следует сделать хоть немного видимыми, как и на планшетах. Если вы захотите реализовать автоматическую прокрутку, будет полезно добавить в интерфейс настройку скорости.
