Вкладки — это кнопки, которые всегда встречаются группами и зависят от состояния друг друга: в любой момент времени активной может быть только одна из них.
Компонент кнопок
Кнопки, не являющиеся вкладками, могут работать независимо от других кнопок.
Анатомия
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
Примеры
Вкладки свернуты Вкладки, вложенные в панель приложений
[null,null,["Последнее обновление: 2024-10-30 UTC."],[[["Tabs are interactive buttons displayed in groups, with only one active at a time, unlike independent buttons."],["They can be integrated into app bars with different alignment options or presented as standalone bars, adapting to various screen sizes."],["Tab styling incorporates specific typography, color palettes for different states and elements, and standardized sizing for icons and touch targets."],["Visual examples demonstrate tab implementations, including collapsed, app bar-nested, and standalone configurations."]]],[]]