Places UI Kit 自定义样式

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

与 Places UI Kit 元素对应的 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 地图提供方信息。 在进行自定义更改后,此提供方信息必须可见且可访问。 如需了解详情,请参阅署名要求

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

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