การจัดรูปแบบที่กำหนดเองของ 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>