Places UI Kit 自訂樣式

選取平台： Android iOS JavaScript

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

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 上)	✔	✔	容器

預設色彩配置

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

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

Google 地圖品牌歸因

屬性	詳細資料精簡元素	詳細資料元素	用量
(black | white | gray)	✔	✔	Google 地圖品牌出處資訊、 Google 地圖揭露按鈕

根據 Google 地圖服務條款，您必須使用三種品牌顏色之一，標示 Google 地圖出處。 進行自訂變更後，必須顯示並提供存取此出處資訊的管道。 詳情請參閱註明出處規定。

我們提供三種品牌顏色供您選擇，且淺色和深色主題可分別設定：

• 淺色主題：PlaceAttributionElement.lightSchemeColor，具有白色、灰色和黑色的屬性。
• 深色主題：PlaceAttributionElement.darkSchemeColor，具有白色、灰色和黑色的屬性。

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