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 屬性

屬性 Details Compact 元素 詳細資料元素 用量
顏色 (系統)
--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 ✔ ✔ 放置「Closed」now 標籤
--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 地圖品牌歸屬

屬性 Details Compact 元素 詳細資料元素 用量
(黑色 | 白色 | 灰色) ✔ ✔ 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>