Индивидуальный стиль набора пользовательского интерфейса Places

Выберите платформу: Android iOS JavaScript

UI Kit Places поддерживает различные настройки и пользовательские CSS-свойства для настройки отображаемых элементов. Используйте инструмент настройки и таблицу свойств CSS ниже, чтобы узнать, как эти свойства можно применить к UI Kit.

Свойства CSS, сопоставленные с элементами Places UI Kit

Набор инструментов Places UI Kit предлагает системный подход к визуальной настройке, основанный на Material Design (с некоторыми модификациями, специфичными для Google Карт). См. раздел Material Design по цвету и типографике . По умолчанию стиль соответствует языку визуального дизайна Google Карт.

Инструмент настройки

Используйте этот инструмент для визуализации пользовательских конфигураций в элементе Places UI Kit.

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 автоматически адаптируются к предпочитаемой пользователем цветовой схеме, определяя, настроен ли браузер или система на светлый или тёмный режим. Внешний вид компонента автоматически подстраивается под предпочтения пользователя.

Размещает элементы UI Kit в светлом и темном режимах

Применяя собственные стили, обязательно проверяйте изменения как в светлом, так и в тёмном режимах оформления, чтобы избежать визуальных несоответствий. Если в вашем приложении используется одна фиксированная тема, автоматическое переключение тем может ухудшить пользовательский опыт. Например, компонент в тёмной теме может появиться в приложении со светлой темой. Чтобы предотвратить это, вы можете принудительно отображать компонент в определённой теме, установив color-scheme в CSS.

Атрибуция бренда Google Maps

Свойство Детали Компактный Элемент Элемент деталей Использование
(черный | белый | серый) ✔ ✔ Атрибуция бренда Google Maps,
Кнопка раскрытия информации в Google Картах

Условия использования Google Карт требуют использовать один из трёх фирменных цветов для указания авторства Google Карт. Эта атрибуция должна быть видимой и доступной после внесения изменений в настройки. Подробнее см. в разделе « Требования к указанию авторства» .

Мы предлагаем на выбор три фирменных цвета, которые можно независимо устанавливать для светлой и темной темы:

<gmp-place-content-config>
  <gmp-place-attribution
      light-scheme-color="black"
      dark-scheme-color="white"
  ></gmp-place-attribution>
</gmp-place-content-config>