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

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) ✔ ✔ คอนเทนเนอร์

การระบุแหล่งที่มาของแบรนด์ 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>