自訂 Places UI Kit 的 CSS 屬性

選取平台： Android iOS JavaScript

Places UI Kit 支援多種設定和自訂 CSS 屬性，可設定顯示元素。請參閱這份 CSS 屬性參考資料表，瞭解如何將這些屬性套用至 UI Kit。

使用自訂工具，預覽不同屬性組合對地點詳細資料元素外觀的影響，並以 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-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 上) ✔ ✔ 容器

預設色彩配置

根據預設，Places UI Kit 元件會自動配合使用者偏好的色彩配置，偵測使用者是否將瀏覽器或系統設為淺色或深色模式。元件的外觀會自動調整，以符合使用者的偏好設定。

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

套用自訂樣式時，請務必在淺色和深色模式下測試變更，以免出現視覺不一致的情況。如果應用程式使用單一固定主題，自動切換主題可能會導致使用者體驗不佳。舉例來說，深色主題的元件可能會出現在淺色主題的應用程式中。如要避免這種情況，請在 CSS 中設定 color-scheme，強制元件一律以特定主題算繪。

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>