用于自定义 Places UI Kit 的 CSS 属性

请选择平台： Android iOS JavaScript

Places UI Kit 支持各种设置和自定义 CSS 属性，可用于配置显示元素。请使用此 CSS 属性参考表，了解如何将这些属性应用于界面套件。

使用自定义工具直观呈现不同属性集对地点详情元素外观的影响，并访问 HTML/CSS、Kotlin/XML 和 Swift 格式的代码。

映射到 Places UI Kit 元素的 CSS 属性

Places UI Kit 采用设计体系方法进行视觉自定义，大致基于 Material Design（并进行了一些针对 Google 地图的修改）。请参阅 Material Design 的颜色和排版参考文档。 默认情况下，样式遵循 Google 地图视觉设计语言。

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-popular-times-bar-color ✔ 非当前时段的热门时段直方图柱形
--gmp-popular-times-bar-current-hour-color ✔ 当前小时的热门时段直方图柱形
--gmp-popular-times-bar-current-hour-live-color ✔ 当前小时的繁忙时段直方图条形和状态文本（当实时数据可用时）
排版（系统）
--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 UI Kit 组件会自动适应用户的首选配色方案，检测用户的浏览器或系统是设置为浅色模式还是深色模式。组件的外观会自动调整，以匹配用户的偏好设置。

浅色和深色模式下的 Places UI Kit 元素

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

Google 地图品牌署名

属性 紧凑型详情元素 详细信息元素 用法
(black | white | gray) ✔ ✔ Google 地图品牌属性、
Google 地图披露按钮

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

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

<gmp-place-details-compact>
  <gmp-place-details-place-request place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
  <gmp-place-name></gmp-place-name>
  <gmp-place-rating></gmp-place-rating>
  <gmp-place-attribution
      light-scheme-color="black"
      dark-scheme-color="white"
  ></gmp-place-attribution>
</gmp-place-details-compact>