Places UI Kit поддерживает различные настройки и пользовательские свойства CSS для настройки элементов отображения. В таблице ниже показано, как свойства CSS можно применять к UI Kit.
Используйте инструмент настройки, чтобы посмотреть, как разные наборы свойств влияют на внешний вид элемента с информацией о месте, и получить код на HTML/CSS, Kotlin/XML и Swift.
Places UI Kit предлагает подход к визуальной настройке на основе системы проектирования, которая в целом соответствует Material Design (с некоторыми изменениями, характерными для Google Карт). Ознакомьтесь с рекомендациями по использованию цветов и шрифтов в Material Design. По умолчанию стиль соответствует системе визуального дизайна Google Карт.
Свойства CSS
| Свойство | Компактный элемент с подробными сведениями | Элемент "Подробности" | Использование |
|---|---|---|---|
| Цвет (система) | |||
--gmp-mat-color-surface |
✔ | ✔ | Фон контейнера и диалогового окна |
--gmp-mat-color-on-surface |
✔ | ✔ | Заголовки, содержимое диалогового окна |
--gmp-mat-color-on-surface-variant |
✔ | ✔ | Информация о месте |
--gmp-mat-color-primary |
✔ | ✔ | Ссылки, индикатор загрузки, значки обзора |
--gmp-mat-color-disabled-surface |
✔ | Незаполненная звезда рейтинга | |
--gmp-mat-color-positive |
✔ | ✔ | Разместить ярлык "Открыто" |
--gmp-mat-color-positive-container |
✔ | Значок "Есть устройство для зарядки ЭМ" | |
--gmp-mat-color-on-positive-container |
✔ | Доступные значки устройств для зарядки ЭМ | |
--gmp-mat-color-negative |
✔ | ✔ | Добавьте ярлык "Закрыто" |
--gmp-mat-color-info |
✔ | ✔ | Значок входа для людей с ограниченными возможностями |
--gmp-mat-color-secondary-container |
✔ | ✔ | Фон кнопки |
--gmp-mat-color-on-secondary-container |
✔ | ✔ | Текст и значок кнопки |
--gmp-mat-color-neutral-container |
✔ | ✔ | Значок даты отзыва, загрузка фигур-плейсхолдеров |
--gmp-mat-color-on-neutral-container |
✔ | ✔ | Дата проверки, ошибка загрузки |
--gmp-mat-color-outline-decorative |
✔ | ✔ | Граница контейнера |
| Типографика (система) | |||
--gmp-mat-font-family |
✔ | ✔ | Базовое семейство шрифтов для всей типографики |
--gmp-mat-font-display-small |
✔ | Название места | |
--gmp-mat-font-headline-medium |
✔ | ✔ | Заголовки диалоговых окон |
--gmp-mat-font-title-small |
✔ | Название места | |
--gmp-mat-font-body-medium |
✔ | Информация о месте, содержимое диалогового окна | |
--gmp-mat-font-body-small |
✔ | Информация о месте | |
--gmp-mat-font-label-large |
✔ | ✔ | Контент кнопки |
--gmp-mat-font-label-medium |
✔ | Содержимое значка | |
| Контейнер (компонент) | |||
border (в :host) |
✔ | ✔ | Контейнер |
border-radius (в :host) |
✔ | ✔ | Контейнер |
Цветовая схема по умолчанию
По умолчанию компоненты Places UI Kit автоматически адаптируются к предпочитаемой пользователем цветовой схеме, определяя, установлен ли в браузере или системе светлый или темный режим. Внешний вид компонента будет автоматически подстраиваться под предпочтения пользователя.
Применяя собственные стили, обязательно протестируйте изменения как в светлом, так и в темном режиме, чтобы избежать визуальных несоответствий. Если в вашем приложении используется одна фиксированная тема, автоматическое переключение тем может привести к ухудшению пользовательского опыта. Например, в приложении со светлой темой может появиться компонент с темной темой. Чтобы этого не происходило, вы можете принудительно задать для компонента определенную тему, установив color-scheme в CSS.
Атрибуция бренда Google Карт
| Свойство | Компактный элемент с подробными сведениями | Элемент "Подробности" | Использование |
|---|---|---|---|
| (black | white | gray) | ✔ | ✔ | Атрибуция бренда Google Карт, кнопка раскрытия информации Google Карт |
Согласно Условиям использования Google Карт, для атрибуции Google Карт необходимо использовать один из трех фирменных цветов. Это указание авторства должно быть видно и доступно после внесения изменений в настройку. Подробнее о требованиях к указанию авторства…
Мы предлагаем на выбор три фирменных цвета, которые можно независимо настроить для светлой и тёмной тем:
- Светлая тема:
PlaceAttributionElement.lightSchemeColorс атрибутами для белого, серого и черного цветов. - Тёмная тема:
PlaceAttributionElement.darkSchemeColorс атрибутами для белого, серого и чёрного цветов.
<gmp-place-details-compact>
<gmp-place-details-place-request place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
<gmp-place-name></gmp-place-name>
<gmp-place-rating></gmp-place-rating>
<gmp-place-attribution
light-scheme-color="black"
dark-scheme-color="white"
></gmp-place-attribution>
</gmp-place-details-compact>