Places UI Kit 自訂樣式

Places UI Kit 支援多種設定和自訂 CSS 屬性，可設定顯示元素。請使用自訂工具和下方的 CSS 屬性參考表格，瞭解如何將這些屬性套用至 UI Kit。

對應至 Places UI Kit 元素的 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 上) ✔ ✔ 容器
border-radius (在 :host 上) ✔ ✔ 容器

Google 地圖品牌歸因

屬性 詳細資料精簡元素 詳細資料元素 用量
(black | white | gray) ✔ ✔ 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>