Tab
Общая информация
Вкладки или Табы группируют контент и помогают в навигации. Табы переключают вкладки на странице и позволяют пользователю перемещаться между группами информации.
Анатомия
Label. Название
Бордер. Маркирует активный таб
Описание работы
Группа Tabs содержат как минимум два элемента
Одновременно активна одна вкладка (tab) - она выделена цветом и помечена специальным маркером — горизонтальной линией (бордер)
Уровни вкладок
Содержимое любого из табов может быть сгруппировано по смыслу любыми способами, в том числе, распределятся по табам второго, третьего уровней.
Прокрутка
Когда табам не хватает места для размещения в блоке:
Табы перемещаются при клике на кнопки-иконки (шевроны влево и право).
Если пользователь долистал до конца, то кнопка, смотрящая в этом направлении становится неактивной.
Под блоком с кнопкой-шевроном появляется тень (ShMini-Left и ShMini-Right). Когда вкладки заканчиваются, тень исчезает и шеврон становится неактивным.
Список
Дополнительно можно выводить список всех табов при помощи overlay-панели, вызываемой при клике на кнопку-кебаб:
Варианты использования
Вкладки используются для группировки разного, но связанного контента, что позволяет пользователям перемещаться по представлениям, не покидая страницы, например:
Для второстепенной навигации
Для группировки или фильтрации контента
Для перехода между представлениями В качестве разделителей шагов в мастерах (будет доделан и описан на отдельной странице “Master”)
Для главного меню приложения.
Вкладки можно использовать на полностраничных макетах или в таких компонентах, как модальные окна, карточки, боковые панели и т.д.
Когда не использовать
Для сложной навигации. Если tab-ы становятся слишком сложными, рассмотрите возможность использования стандартного шаблона навигации.
Для индикации прогресса
Если пользователь сравнивает информацию в двух вкладках (это приведет к тому, что пользователю придется щелкать назад и вперед, чтобы выполнить задачу).
Оформление
Название (Label)
Название вкладки должно однозначно говорить, что увидит пользователь после нажатия на вкладку
Называйте вкладки существительными или прилагательными в значении существительных. Например, «Документы», «Информация», «Сообщения»
Не называйте вкладки глаголами — в названии вкладок не должно быть действия
Хорошо, если текст будет коротким и лаконичным, а табы — примерно одинаковой длины.
Иконки
Владка при необходимости может иметь иконку, как правило, иконка позволяет добавить визуальную привязку к контенту для лучшего понимания пользователем содержимого вкладки
Счетчики (Counter)
Вкладка может содержать счетчик - предлагается использовать
для уведомлений о некорректном заполнении вкладки (невалидность заполнения полей или незаполнение обязательных полей).
для уведомлений о событиях на вкладке.
Для счетчиков используется цветовая индикация компонента-родителя Counter.
Табы любого вложенного уровня должны визуально отличаться от табов верхнего уровня. Панель табов меньше по высоте, шрифт мельче. Остальное визуальное оформление табов второго и ниже уровней должно быть идентичным описанному для первого уровня.
Виды
1. Линейный
Обычно используется внутри компонентов или для контента, использующего всю страницу для макета.
2. Контейнер
Обычно используется для определенных областей содержимого (подстраницы, карточки и др.).
Табы, находящиеся в контейнере, могут выступать в роли вкладок - с возможностью закрытия вкладки. При использовании такого паттерна необходимо предусмотреть сценарий, когда все вкладки будут закрыты (например, обязательно должна остаться одна вкладка - без возможности закрытия, или “нулевая страница”).
не используйте возможность закрытия для табов-иконок
возможность закрытия не может быть использована совместно с заблокированным табом.
Типы
Есть 4 типа табов:
Text. Текст
Text + Icon. Текст с иконкой
Text + Counter. Текст с счётчиком
Icon. Иконка
Размеры
Внешние размеры
Есть два размера tab-ов по высоте:
Табы верхнего уровня - M - 48 рх
Табы подуровней - S - 40 рх
Ширина таба зависит от содержимого (наименования и наличия иконок, счетчиков).
| Элемент | Значение |
|---|---|
Иконки | 16px * 16px |
Каунтер | 16px * 16px |
Боредер | 2px |
Разделитель | 1px |
Таб | Height: 48px/40px Focus border: 2px |
Типографика
| Элемент | Название стиля | Гарнитура | Кегль | Начертание |
|---|---|---|---|---|
Название | .Button&Links/btn-14px | Inter | 14px | Semi Bold |
Внутренние размеры
Внутренние отступы едины для всех размеров:
Состояния
Существует 3 основных состояния табов:
Selected. Выбрано
Hover. При наведении
Unselected. Не выбрано
Disabled. Заблокировано
Фокус (Focus)
Так же существует состояние Focus. Он появляется в момент выбора таба с помощью клавиатуры или при клике в выбранный элемент, и может быть совмещен с состоянием Selected, Hover и Unselected. Невозможен в состоянии Disabled.
При переходе к меню клавишей Tab первая вкладка получает фокус. Стрелками можно перемещать фокус между вкладками. Если нажать клавишу Enter — произойдет переход на вкладку, находящуюся в фокусе в настоящий момент.
Состояние Focus отсутствует в компонентах для выбора и используется исключительно для разработки.
Цвета
Last updated
