Places UI Kit 自定义样式

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

Places 界面套件提供了一种设计系统方法，用于进行视觉自定义，该方法大致基于 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

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>