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

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

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

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

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

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

พร็อพเพอร์ตี้ 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-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 (on :host) ✔ ✔ คอนเทนเนอร์
border-radius (on :host) ✔ ✔ คอนเทนเนอร์

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

พร็อพเพอร์ตี้ องค์ประกอบแบบกะทัดรัดของรายละเอียด องค์ประกอบรายละเอียด การใช้งาน
(black | white | gray) ✔ ✔ การระบุแหล่งที่มาของแบรนด์ 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>