Tabs
Описание
Компонент вкладок (Tabs) позволяет организовать контент, разделяя его на несколько разделов, которые пользователь может переключать для просмотра. Вкладки используются для группировки связанных разделов и обеспечивают быстрый доступ к каждому из них.
Размеры
Вкладки могут иметь три размера:
- M (Medium) — этот размер рекомендуется для общего использования на страницах, внутри отдельных блоков
- L (Large) — рекомендуется, если табы служат в то же время подзаголовками страницы. В этом варианте контент табов является отдельным разделом на странице, а табы являются подзаголовками этого раздела
- XL (Extra Large) — подходит, когда табы служат в то же время заголовками страницы. В этом варианте при переключении табов меняется контент на всей странице.
Состояния
Вкладки могут иметь следующие состояния:
- Неактивна (Inactive) — вкладка находится в неактивном состоянии, когда она не выбрана. В этом состоянии вкладка имеет более бледный цвет, чтобы выделить активную вкладку.
- Активна (Active) — этот статус присваивается выбранной вкладке, которая отображает текущий активный раздел контента. Вкладка в активном состоянии имеет более насыщенный цвет и подчеркивание для выделения.
- Наведение (Hover) — когда пользователь наводит указатель мыши на вкладку, она меняет свой стиль для обозначения возможности взаимодействия.
- Заблокирована (Disabled) — вкладка может быть заблокированной, если она временно или постоянно недоступна для выбора. Она отображается в сером цвете и неактивна для взаимодействия.
Свойства
У каждой вкладки есть возможность включить/выключить следующие элементы:
- Иконка. Используется по усмотрению дизайнера для визуализации типа контента внутри вкладки.
- Лейбл. Название раздела в текстовом формате.
- Счетчик. Может использоваться для обозначения количества сущностей, находящихся внутри вкладки, либо для обозначения количества новых сущностей, появившихся во вкладке.
- Лейбл. Может использоваться для обозначения статуса раздела, за который отвечает вкладка.
Рекомендации по использованию
Используйте вкладки для организации больших объемов контента или для разделения информации на логические разделы. Обеспечьте ясную и легко читаемую структуру заголовков вкладок.
Выбирайте стиль и цвета вкладок, которые соответствуют общему дизайну вашего проекта. Обязательно выделяйте активные вкладки, чтобы пользователи могли легко определить текущий раздел.
По возможности старайтесь, чтобы блок табов размеров M и L по высоте вмещался в один экран. Так проще визуально сопоставлять контент с названием вкладки, а также видеть, где заканчивается контент табов и начинается следующий блок.