พร็อพเพอร์ตี้ CSS เพื่อปรับแต่ง Places UI Kit

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

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

ใช้เครื่องมือปรับแต่งเพื่อดูว่าพร็อพเพอร์ตี้ชุดต่างๆ จะส่งผลต่อลักษณะที่ปรากฏขององค์ประกอบรายละเอียดสถานที่อย่างไร และเข้าถึงโค้ดใน HTML/CSS, Kotlin/XML และ Swift

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

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

พร็อพเพอร์ตี้ 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 ✔ ป้ายที่ชาร์จ 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-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 ในโหมดสว่างและโหมดมืด

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

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

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

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

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

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