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

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) ✔ ✔ Контейнер

Атрибуция бренда 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>