| Вариация | Использование |
|---|---|
| Вкладки первого уровня | Основной компонент для переключения контента |
| Вкладки второго уровня | Вспомогательный компонент для переключения дополнительного контента внутри основного таба |
Используется
Вкладки первого уровня
- Используются для переключения контента, который скрывается и отображается посредством переключения вкладок.
- Для быстрого перемещения между представлениями контента в одном контексте на странице.
Вкладки второго уровня
- Используются для переключения контента внутри вкладок 1-го уровня.
Не используется
Вкладки первого уровня
- Для многоуровневой навигации на странице. Для управления отображением контента внутри вкладки на странице используйте ContentSwitcher. для каждого смыслового блока.
- В качестве глобальной навигации в приложении. Табы не предназначены для навигации, используйте для этого Link.
Вкладки второго уровня
- В качестве основных вкладок.
Строение компонента
Вкладки первого уровня
- Вкладка
- Бордер
Вкладка
Наименование вкладки описывает её содержимое и должно соответствовать ожиданию пользователя. Состоит максимум из двух слов и предлога. Иконки в названиях вкладок не допускаются.
Бордер
Так же является визуальным индикатором, который указывает пользователю, на какой вкладке он находится на данный момент.
Вкладки второго уровня
- Вкладка
- Бордер
Вкладка
Наименование вкладки описывает её содержимое и должно соответствовать ожиданию пользователя. Состоит максимум из двух слов и предлога. Иконки в названиях вкладок не допускаются.
Бордер
Так же является визуальным индикатором, который указывает пользователю, на какой вкладке он находится на данный момент
Цвета
Размеры
Вкладки первого уровня
Вкладки второго уровня
Типографика
Поведение
Вкладки первого уровня
Вкладки второго уровня
- Максимальное количество вкладок в ряду — шесть. Нельзя использовать вложенность вкладок. Это необходимо для поддержания лаконичного пользовательского интерфейса и снижения когнитивной нагрузки для пользователей. Для обозначения следующего уровня вложенности контента используйте ContentSwitcher.
- По-умолчанию, если ширина экрана меньше breakpoint md (672px), компонент представлен в виде Dropdown. Изменить breakpoint можно управлением свойства breakpoint.