การจัดรูปแบบที่กำหนดเองของ Places UI Kit

เลือกแพลตฟอร์ม: Android iOS JavaScript

UI Kit ของ Places รองรับการตั้งค่าและพร็อพเพอร์ตี้ CSS ที่กำหนดเองต่างๆ เพื่อกำหนดค่าองค์ประกอบการแสดงผล ใช้เครื่องมือปรับแต่งและตารางอ้างอิงพร็อพเพอร์ตี้ CSS ด้านล่างเพื่อดูวิธีใช้พร็อพเพอร์ตี้เหล่านี้กับ UI Kit

พร็อพเพอร์ตี้ CSS ที่แมปกับองค์ประกอบ UI Kit ของ Places

UI Kit ของ Places มีแนวทางระบบการออกแบบสำหรับการปรับแต่งภาพโดยอิงตาม Material Design (มีการแก้ไขบางอย่างที่เฉพาะเจาะจงสำหรับ Google Maps ) ดูข้อมูลอ้างอิงของ Material Design สำหรับ สีและ การพิมพ์ โดยค่าเริ่มต้น สไตล์จะเป็นไปตามภาษาการออกแบบภาพของ Google Maps

เครื่องมือปรับแต่ง

ใช้เครื่องมือนี้เพื่อแสดงภาพการกำหนดค่าที่กำหนดเองในองค์ประกอบ Places UI Kit

พร็อพเพอร์ตี้ CSS

พร็อพเพอร์ตี้ Details Compact Element องค์ประกอบรายละเอียด การใช้งาน
สี (ระบบ)
--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 ✔ ป้ายที่ชาร์จ EV ที่พร้อมให้บริการ
--gmp-mat-color-on-positive-container ✔ เนื้อหาป้ายที่ชาร์จ EV ที่พร้อมใช้งาน
--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 ในโหมดสว่างและโหมดมืด

เมื่อใช้สไตล์ที่กำหนดเอง โปรดทดสอบการเปลี่ยนแปลงทั้งในโหมดสว่างและโหมดมืด เพื่อป้องกันความไม่สอดคล้องกันของภาพ หากแอปพลิเคชันใช้ธีมเดียวแบบคงที่ การสลับธีมอัตโนมัติอาจทำให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ไม่ดี เช่น คอมโพเนนต์ที่มีธีมมืดอาจปรากฏในแอปที่มีธีมสว่าง หากต้องการป้องกันไม่ให้เกิดกรณีนี้ คุณสามารถบังคับให้คอมโพเนนต์ แสดงผลในธีมที่เฉพาะเจาะจงเสมอได้โดยการตั้งค่า color-scheme ใน CSS

การระบุแหล่งที่มาของแบรนด์ Google Maps

พร็อพเพอร์ตี้ Details Compact Element องค์ประกอบรายละเอียด การใช้งาน
(ดำ | ขาว | เทา) ✔ ✔ การระบุแหล่งที่มาของแบรนด์ใน Google Maps
ปุ่มการเปิดเผยข้อมูลของ Google Maps

ข้อกำหนดในการให้บริการของ Google Maps กำหนดให้คุณใช้สีแบรนด์ 1 ใน 3 สีสำหรับการระบุแหล่งที่มาของ Google Maps การระบุแหล่งที่มานี้ต้องมองเห็นได้และเข้าถึงได้เมื่อมีการเปลี่ยนแปลงการปรับแต่ง ดูข้อมูลเพิ่มเติมได้ที่ข้อกำหนด การระบุแหล่งที่มา

เรามีตัวเลือกสีแบรนด์ 3 สีที่ตั้งค่าแยกกันสำหรับธีมสว่างและธีมมืดได้ ดังนี้ 

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