Places UI Kit 自定义样式

请选择平台： Android iOS JavaScript

Places 界面套件支持多种设置和自定义 CSS 属性，用于配置显示元素。请使用下面的自定义工具和 CSS 属性参考表，了解如何将这些属性应用于界面套件。

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 上）	✔	✔	Container
border-radius（在 :host 上）	✔	✔	Container

默认配色方案

默认情况下，Places 界面套件组件会自动适应用户偏好的配色方案，检测用户是否已将浏览器或系统设置为浅色或深色模式。组件的外观将自动调整以符合用户的偏好设置。

应用您自己的自定义样式时，请务必在浅色模式和深色模式下测试您的更改，以防止出现视觉不一致的情况。如果您的应用使用固定的单一主题，自动切换主题可能会导致用户体验不佳。例如，深色主题组件可能会显示在浅色主题应用中。为防止这种情况，您可以在 CSS 中设置 color-scheme，强制组件始终以特定主题进行渲染。

Google 地图品牌归因

属性	详细信息紧凑型元素	详细信息元素	用法
（黑色 | 白色 | 灰色）	✔	✔	Google 地图品牌提供方信息， Google 地图披露信息按钮

《Google 地图服务条款》要求您使用三种品牌颜色之一来显示 Google 地图提供方信息。 在进行自定义更改后，此提供方信息必须可见且可访问。 如需了解详情，请参阅署名要求。

我们提供三种品牌颜色供您选择，您可以为浅色主题和深色主题分别设置这些颜色：

• 浅色主题：PlaceAttributionElement.lightSchemeColor，包含白色、灰色和黑色属性。
• 深色主题：PlaceAttributionElement.darkSchemeColor，包含白色、灰色和黑色属性。

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