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

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

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

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

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

Используйте этот инструмент для визуализации пользовательских конфигураций в элементе 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 Maps

Условия предоставления услуг Google Maps требуют, чтобы вы использовали один из трех фирменных цветов для атрибуции Google Maps. Эта атрибуция должна быть видимой и доступной после внесения изменений в настройки. Для получения дополнительной информации см. Требования к атрибуции .

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

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