Вкладки

Вкладки — это кнопки, которые всегда встречаются группами и зависят от состояния друг друга: в любой момент времени активной может быть только одна из них.

значок выноски
Компонент кнопок
Кнопки, не являющиеся вкладками, могут работать независимо от других кнопок.

Анатомия

1. Значок активной вкладки
2. Значок неактивной вкладки.
3. Ярлык активной вкладки.
4. Ярлык неактивной вкладки.

Характеристики

Вкладки, вложенные в панель приложений, выровнены по левому краю.

значок выноски
Метки макета
Определения E, M, KL, P, Flex
значок выноски
Панель приложения и компонент заголовка
Спецификации, рекомендации по стилю и многое другое.

Вкладки, вложенные в панель приложений – гибкое выравнивание

Благодаря гибкому выравниванию конфигурация вкладок растягивается или сжимается в соответствии с доступным пространством.

Вкладки свернуты в панели приложений – меню ящика

значок выноски
Панель приложения и компонент заголовка
Спецификации, рекомендации по стилю и многое другое.

Отдельная панель вкладок – с выравниванием по левому краю

Отдельная панель вкладок – гибкое выравнивание

Благодаря гибкому выравниванию конфигурация вкладок растягивается или сжимается в соответствии с доступным пространством.

Переполнение строки метки вкладки


Масштабирование макетов

Эти эталонные макеты показывают, как адаптировать вкладки для экранов различной ширины и высоты. (Категории ширины и высоты определяются в разделе «Макет» .) Обратите внимание, что все значения пикселей находятся в визуализированных пикселях до того, как произойдет какая-либо понижающая или повышающая дискретизация.

значок выноски
Макет
Поля, ключевые линии и отступы для экранов различных размеров.
значок выноски
Метки макета
Определения E, M, KL, P, Flex

Стандартные и широкие экраны в кронштейне небольшой высоты

Стандартные и широкие экраны в кронштейне стандартной высоты

Стандартные и широкие экраны в высоком кронштейне

Сверхширокие и сверхширокие экраны во всех вариантах высоты.


Стили

значок выноски
Рекомендации по типографике
Ссылки на масштаб и сетку, типографские примеры и многое другое.
значок выноски
Рекомендации по цвету
Палитры, значения высоты и непрозрачности и многое другое.

Типография

Тип стиля Гарнитура Масса Размер (дп)
Тело 3 М Робото Середина 24
Тело 3 Робото Обычный 24

Цвет

Элемент Цвет (дневной режим) Цвет (ночной режим)
Основной тип/значки Белый Белый @ 88%
Вторичный тип/значки Белый @ 72% Белый @ 60%
Фон панели вкладок Черный Черный
Фон панели вкладок при прокрутке Черный @ 84% Черный @ 88%
Значок вкладки — активное состояние Белый Белый @ 88%
Значок вкладки – неактивное состояние Белый @ 56% Белый @ 50%

Размеры

Элемент Размер (дп)
Основной значок 44
Дополнительный значок 36
Значок касания цели 76

Примеры

Вкладки свернуты
Вкладки, вложенные в панель приложений
Отдельная панель вкладок