Вкладки — это кнопки, которые всегда встречаются группами и зависят от состояния друг друга: в любой момент времени активной может быть только одна из них.
Вкладки
Анатомия
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-anatomy-1.png?authuser=2&hl=ru)
2. Значок неактивной вкладки.
3. Ярлык активной вкладки.
4. Ярлык неактивной вкладки.
Характеристики
Вкладки, вложенные в панель приложений, выровнены по левому краю.
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-spec-1.png?authuser=2&hl=ru)
Вкладки, вложенные в панель приложений – гибкое выравнивание
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-spec-3.png?authuser=2&hl=ru)
Вкладки свернуты в панели приложений – меню ящика
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-spec-4.png?authuser=2&hl=ru)
Отдельная панель вкладок – с выравниванием по левому краю
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-spec-6.png?authuser=2&hl=ru)
Отдельная панель вкладок – гибкое выравнивание
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-spec-5.png?authuser=2&hl=ru)
Переполнение строки метки вкладки
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-spec-2.png?authuser=2&hl=ru)
Масштабирование макетов
Эти эталонные макеты показывают, как адаптировать вкладки для экранов различной ширины и высоты. (Категории ширины и высоты определяются в разделе «Макет» .) Обратите внимание, что все значения пикселей находятся в визуализированных пикселях до того, как произойдет какая-либо понижающая или повышающая дискретизация.
Стандартные и широкие экраны в кронштейне небольшой высоты
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-ar-1.png?authuser=2&hl=ru)
Стандартные и широкие экраны в кронштейне стандартной высоты
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-ar-2.png?authuser=2&hl=ru)
Стандартные и широкие экраны в высоком кронштейне
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-ar-3.png?authuser=2&hl=ru)
Сверхширокие и сверхширокие экраны во всех вариантах высоты.
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-ar-4.png?authuser=2&hl=ru)
Стили
Типография
Тип стиля | Гарнитура | Масса | Размер (дп) |
---|---|---|---|
Тело 3 М | Робото | Середина | 24 |
Тело 3 | Робото | Обычный | 24 |
Цвет
Элемент | Цвет (дневной режим) | Цвет (ночной режим) |
---|---|---|
Основной тип/значки | Белый | Белый @ 88% |
Вторичный тип/значки | Белый @ 72% | Белый @ 60% |
Фон панели вкладок | Черный | Черный |
Фон панели вкладок при прокрутке | Черный @ 84% | Черный @ 88% |
Значок вкладки — активное состояние | Белый | Белый @ 88% |
Значок вкладки – неактивное состояние | Белый @ 56% | Белый @ 50% |
Размеры
Элемент | Размер (дп) |
---|---|
Основной значок | 44 |
Дополнительный значок | 36 |
Значок касания цели | 76 |
Примеры
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-mock-1.png?authuser=2&hl=ru)
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-mock-3.png?authuser=2&hl=ru)
![](https://developers.google.cn/cars/design/automotive-os/components/images/tabs-mock-2.png?authuser=2&hl=ru)