自訂 Places UI Kit 的 CSS 屬性

選取平台： Android iOS JavaScript

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

使用自訂工具，以視覺化方式呈現不同屬性組合對 Place Details 元素外觀的影響，並存取 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-popular-times-bar-color ✔ 非目前時段的熱門時段直方圖長條
--gmp-popular-times-bar-current-hour-color ✔ 目前時段的熱門時段直方圖長條
--gmp-popular-times-bar-current-hour-live-color ✔ 有即時資料時，目前時段的熱門時段直方圖長條和狀態文字
字體排版 (系統)
--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 地圖品牌歸屬

屬性 精簡詳細資料元素 詳細資料元素 用量
(黑色 | 白色 | 灰色) ✔ ✔ Google 地圖品牌歸屬、
Google 地圖揭露按鈕

根據《Google 地圖服務條款》規定，您必須使用三種品牌顏色之一，標示 Google 地圖出處。進行自訂變更後，這項出處資訊必須清楚可見且可存取。 詳情請參閱出處規定。

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

<gmp-place-details-compact>
  <gmp-place-details-place-request place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
  <gmp-place-name></gmp-place-name>
  <gmp-place-rating></gmp-place-rating>
  <gmp-place-attribution
      light-scheme-color="black"
      dark-scheme-color="white"
  ></gmp-place-attribution>
</gmp-place-details-compact>