Tab
Last updated
Was this helpful?
Last updated
Was this helpful?
Вкладки или Табы группируют контент и помогают в навигации. Табы переключают вкладки на странице и позволяют пользователю перемещаться между группами информации.
Label. Название
Бордер. Маркирует активный таб
Группа Tabs содержат как минимум два элемента
Одновременно активна одна вкладка (tab) - она выделена цветом и помечена специальным маркером — горизонтальной линией (бордер)
Содержимое любого из табов может быть сгруппировано по смыслу любыми способами, в том числе, распределятся по табам второго, третьего уровней.
Когда табам не хватает места для размещения в блоке:
Табы перемещаются при клике на кнопки-иконки (шевроны влево и право).
Если пользователь долистал до конца, то кнопка, смотрящая в этом направлении становится неактивной.
Под блоком с кнопкой-шевроном появляется тень (ShMini-Left и ShMini-Right). Когда вкладки заканчиваются, тень исчезает и шеврон становится неактивным.
Дополнительно можно выводить список всех табов при помощи overlay-панели, вызываемой при клике на кнопку-кебаб:
Вкладки используются для группировки разного, но связанного контента, что позволяет пользователям перемещаться по представлениям, не покидая страницы, например:
Для второстепенной навигации
Для группировки или фильтрации контента
Для перехода между представлениями В качестве разделителей шагов в мастерах (будет доделан и описан на отдельной странице “Master”)
Для главного меню приложения.
Вкладки можно использовать на полностраничных макетах или в таких компонентах, как модальные окна, карточки, боковые панели и т.д.
Для сложной навигации. Если tab-ы становятся слишком сложными, рассмотрите возможность использования стандартного шаблона навигации.
Для индикации прогресса
Если пользователь сравнивает информацию в двух вкладках (это приведет к тому, что пользователю придется щелкать назад и вперед, чтобы выполнить задачу).
Название вкладки должно однозначно говорить, что увидит пользователь после нажатия на вкладку
Называйте вкладки существительными или прилагательными в значении существительных. Например, «Документы», «Информация», «Сообщения»
Не называйте вкладки глаголами — в названии вкладок не должно быть действия
Хорошо, если текст будет коротким и лаконичным, а табы — примерно одинаковой длины.
Владка при необходимости может иметь иконку, как правило, иконка позволяет добавить визуальную привязку к контенту для лучшего понимания пользователем содержимого вкладки
Вкладка может содержать счетчик - предлагается использовать
для уведомлений о некорректном заполнении вкладки (невалидность заполнения полей или незаполнение обязательных полей).
для уведомлений о событиях на вкладке.
Для счетчиков используется цветовая индикация компонента-родителя Counter.
Табы любого вложенного уровня должны визуально отличаться от табов верхнего уровня. Панель табов меньше по высоте, шрифт мельче. Остальное визуальное оформление табов второго и ниже уровней должно быть идентичным описанному для первого уровня.
Обычно используется внутри компонентов или для контента, использующего всю страницу для макета.
Обычно используется для определенных областей содержимого (подстраницы, карточки и др.).
Табы, находящиеся в контейнере, могут выступать в роли вкладок - с возможностью закрытия вкладки. При использовании такого паттерна необходимо предусмотреть сценарий, когда все вкладки будут закрыты (например, обязательно должна остаться одна вкладка - без возможности закрытия, или “нулевая страница”).
не используйте возможность закрытия для табов-иконок
возможность закрытия не может быть использована совместно с заблокированным табом.
Есть 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. Он появляется в момент выбора таба с помощью клавиатуры или при клике в выбранный элемент, и может быть совмещен с состоянием Selected, Hover и Unselected. Невозможен в состоянии Disabled.
При переходе к меню клавишей Tab первая вкладка получает фокус. Стрелками можно перемещать фокус между вкладками. Если нажать клавишу Enter — произойдет переход на вкладку, находящуюся в фокусе в настоящий момент.
Состояние Focus отсутствует в компонентах для выбора и используется исключительно для разработки.
