Định kiểu tuỳ chỉnh cho Bộ giao diện người dùng của Places

Places UI Kit hỗ trợ nhiều chế độ cài đặt và thuộc tính CSS tuỳ chỉnh để định cấu hình các phần tử hiển thị. Hãy sử dụng Công cụ tuỳ chỉnh và bảng tham chiếu thuộc tính CSS bên dưới để xem cách áp dụng các thuộc tính này cho Bộ công cụ giao diện người dùng.

Các thuộc tính CSS được liên kết với các phần tử trong Places UI Kit

Bộ công cụ giao diện người dùng Places cung cấp một phương pháp tiếp cận hệ thống thiết kế để tuỳ chỉnh hình ảnh dựa trên Material Design (với một số điểm sửa đổi dành riêng cho Google Maps). Hãy xem thông tin tham khảo của Material Design về Màu sắc và Kiểu chữ. Theo mặc định, kiểu này tuân thủ ngôn ngữ thiết kế trực quan của Google Maps.

Công cụ tuỳ chỉnh

Sử dụng công cụ này để trực quan hoá các cấu hình tuỳ chỉnh trong một phần tử Places UI Kit.

Thuộc tính CSS

Thuộc tính Phần tử thu gọn chi tiết Phần tử chi tiết Cách sử dụng
Màu (hệ thống)
--gmp-mat-color-surface ✔ ✔ Nền vùng chứa và hộp thoại
--gmp-mat-color-on-surface ✔ ✔ Tiêu đề, nội dung hộp thoại
--gmp-mat-color-on-surface-variant ✔ ✔ Thông tin về địa điểm
--gmp-mat-color-primary ✔ ✔ Đường liên kết, chỉ báo tải, biểu tượng tổng quan
--gmp-mat-color-disabled-surface ✔ Điểm xếp hạng theo sao chưa được điền
--gmp-mat-color-positive ✔ ✔ Gắn nhãn "Mở cửa" cho địa điểm
--gmp-mat-color-positive-container ✔ Huy hiệu bộ sạc xe điện có sẵn
--gmp-mat-color-on-positive-container ✔ Nội dung huy hiệu bộ sạc xe điện hiện có
--gmp-mat-color-negative ✔ ✔ Nhãn "Đã đóng" hiện tại của địa điểm
--gmp-mat-color-info ✔ ✔ Biểu tượng lối vào có hỗ trợ xe lăn
--gmp-mat-color-secondary-container ✔ ✔ Nền của nút
--gmp-mat-color-on-secondary-container ✔ ✔ Văn bản và biểu tượng của nút
--gmp-mat-color-neutral-container ✔ ✔ Xem huy hiệu ngày, các hình dạng giữ chỗ khi tải
--gmp-mat-color-on-neutral-container ✔ ✔ Ngày đánh giá, lỗi tải
--gmp-mat-color-outline-decorative ✔ ✔ Đường viền vùng chứa
Kiểu chữ (hệ thống)
--gmp-mat-font-family ✔ ✔ Bộ phông chữ cơ bản cho tất cả kiểu chữ
--gmp-mat-font-display-small ✔ Tên địa điểm
--gmp-mat-font-headline-medium ✔ ✔ Tiêu đề hộp thoại
--gmp-mat-font-title-small ✔ Tên địa điểm
--gmp-mat-font-body-medium ✔ Thông tin về địa điểm, nội dung hộp thoại
--gmp-mat-font-body-small ✔ Thông tin về địa điểm
--gmp-mat-font-label-large ✔ ✔ Nội dung nút
--gmp-mat-font-label-medium ✔ Nội dung huy hiệu
Vùng chứa (thành phần)
border (trên :host) ✔ ✔ Vùng chứa
border-radius (trên :host) ✔ ✔ Vùng chứa

Hoạt động phân bổ thương hiệu trên Google Maps

Thuộc tính Phần tử thu gọn chi tiết Phần tử chi tiết Cách sử dụng
(đen | trắng | xám) ✔ ✔ Thông tin ghi nhận quyền sở hữu thương hiệu trên Google Maps,
nút công bố trên Google Maps

Điều khoản dịch vụ của Google Maps yêu cầu bạn sử dụng một trong ba màu thương hiệu cho thông tin ghi nhận quyền sở hữu của Google Maps. Thông tin ghi nhận quyền tác giả này phải xuất hiện và có thể truy cập được khi bạn thực hiện các thay đổi tuỳ chỉnh. Hãy xem Yêu cầu về việc ghi công để biết thêm thông tin.

Chúng tôi cung cấp 3 lựa chọn màu thương hiệu mà bạn có thể đặt độc lập cho giao diện sáng và tối: 

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