Các thuộc tính CSS để tuỳ chỉnh Places UI Kit

Chọn nền tảng: Android iOS JavaScript

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 thành phần hiển thị. Hãy sử dụng bảng tham chiếu thuộc tính CSS này để xem cách áp dụng các thuộc tính này cho Bộ giao diện người dùng.

Sử dụng Công cụ tuỳ chỉnh để hình dung cách các nhóm thuộc tính khác nhau ảnh hưởng đến giao diện của một phần tử Chi tiết địa điểm và truy cập vào mã bằng HTML/CSS, Kotlin/XML và Swift.

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

Places UI Kit 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ố nội dung sửa đổi dành riêng cho Google Maps). Xem tài liệu 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.

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 đang 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 ✔ ✔ Đặt nhãn "Đang mở cửa"
--gmp-mat-color-positive-container ✔ Huy hiệu bộ sạc xe điện hiện có
--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 ✔ ✔ Đặt nhãn "Đã đóng cửa" ngay
--gmp-mat-color-info ✔ ✔ Biểu tượng lối vào cho 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 ✔ ✔ Huy hiệu ngày xem xét, hình dạng phần giữ chỗ đang tải
--gmp-mat-color-on-neutral-container ✔ ✔ Ngày xem xét, lỗi khi tải
--gmp-mat-color-outline-decorative ✔ ✔ Đường viền vùng chứa
--gmp-popular-times-bar-color ✔ Các thanh biểu đồ tần suất về giờ cao điểm cho những giờ không phải là giờ hiện tại
--gmp-popular-times-bar-current-hour-color ✔ Thanh biểu đồ tần suất về giờ cao điểm cho giờ hiện tại
--gmp-popular-times-bar-current-hour-live-color ✔ Thanh biểu đồ tần suất về giờ đông khách và văn bản trạng thái cho giờ hiện tại khi có dữ liệu trực tiếp
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

Bảng phối màu mặc định

Theo mặc định, các thành phần của Places UI Kit sẽ tự động điều chỉnh theo bảng phối màu mà người dùng ưu tiên, phát hiện xem người dùng đã đặt trình độ duyệt hoặc hệ thống của họ ở chế độ sáng hay chế độ tối. Giao diện của thành phần sẽ tự động điều chỉnh để phù hợp với lựa chọn ưu tiên của người dùng.

Các thành phần của Places UI Kit ở chế độ sáng và tối

Khi áp dụng kiểu tuỳ chỉnh của riêng bạn, hãy nhớ kiểm thử các thay đổi ở cả chế độ sáng và tối để tránh tình trạng không nhất quán về hình ảnh. Nếu ứng dụng của bạn sử dụng một giao diện cố định, thì việc chuyển đổi giao diện tự động có thể dẫn đến trải nghiệm người dùng kém. Ví dụ: một thành phần có giao diện tối có thể xuất hiện trong ứng dụng có giao diện sáng của bạn. Để ngăn chặn điều này, bạn có thể buộc thành phần luôn hiển thị trong một giao diện cụ thể bằng cách đặt color-scheme trong CSS.

Thuộc tính thương hiệu của 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) ✔ ✔ Thuộc tính thương hiệu của Google Maps,
Nút thông tin công bố của 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 tác giả của Google Maps. Thông tin ghi nhận tác giả này phải hiển thị và truy cập được khi có thay đổi về nội dung tuỳ chỉnh. Hãy xem phần Yêu cầu ghi công để biết thêm thông tin.

Chúng tôi cung cấp 3 màu thương hiệu có thể được đặt riêng cho giao diện sáng và Giao diện tối: 

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