Properti CSS untuk menyesuaikan Kit UI Places

Pilih platform: Android iOS JavaScript

Kit UI Places mendukung berbagai setelan dan properti CSS kustom untuk mengonfigurasi elemen tampilan. Gunakan tabel referensi properti CSS ini untuk melihat cara properti ini dapat diterapkan ke UI Kit.

Gunakan Alat penyesuaian untuk memvisualisasikan pengaruh berbagai kumpulan properti terhadap tampilan elemen Place Details dan mengakses kode dalam HTML/CSS, Kotlin/XML, dan Swift.

Properti CSS yang dipetakan ke elemen Places UI Kit

Kit UI Tempat menawarkan pendekatan sistem desain untuk penyesuaian visual yang secara umum didasarkan pada Desain Material (dengan beberapa modifikasi khusus Google Maps). Lihat referensi Desain Material untuk Warna dan Tipografi. Secara default, gaya ini mengikuti bahasa desain visual Google Maps.

Properti CSS

Properti Elemen Ringkas Detail Elemen Details Penggunaan
Warna (sistem)
--gmp-mat-color-surface ✔ ✔ Latar belakang penampung dan dialog
--gmp-mat-color-on-surface ✔ ✔ Judul, konten dialog
--gmp-mat-color-on-surface-variant ✔ ✔ Informasi tempat
--gmp-mat-color-primary ✔ ✔ Link, indikator pemuatan, ikon ringkasan
--gmp-mat-color-disabled-surface ✔ Rating bintang yang belum diisi
--gmp-mat-color-positive ✔ ✔ Tempatkan label "Buka" sekarang
--gmp-mat-color-positive-container ✔ Badge pengisi daya EV yang tersedia
--gmp-mat-color-on-positive-container ✔ Konten badge pengisi daya EV yang tersedia
--gmp-mat-color-negative ✔ ✔ Tempatkan label "Tutup" sekarang
--gmp-mat-color-info ✔ ✔ Ikon pintu masuk khusus difabel
--gmp-mat-color-secondary-container ✔ ✔ Latar tombol
--gmp-mat-color-on-secondary-container ✔ ✔ Teks dan ikon tombol
--gmp-mat-color-neutral-container ✔ ✔ Badge tanggal ulasan, bentuk placeholder pemuatan
--gmp-mat-color-on-neutral-container ✔ ✔ Tanggal ulasan, error pemuatan
--gmp-mat-color-outline-decorative ✔ ✔ Batas penampung
--gmp-popular-times-bar-color ✔ Batang histogram waktu populer untuk jam yang tidak sedang berlangsung
--gmp-popular-times-bar-current-hour-color ✔ Batang histogram waktu populer untuk jam saat ini
--gmp-popular-times-bar-current-hour-live-color ✔ Status teks dan batang histogram waktu populer untuk jam saat ini saat data real-time tersedia
Tipografi (sistem)
--gmp-mat-font-family ✔ ✔ Jenis font dasar untuk semua tipografi
--gmp-mat-font-display-small ✔ Nama tempat
--gmp-mat-font-headline-medium ✔ ✔ Judul dialog
--gmp-mat-font-title-small ✔ Nama tempat
--gmp-mat-font-body-medium ✔ Informasi tempat, konten dialog
--gmp-mat-font-body-small ✔ Informasi tempat
--gmp-mat-font-label-large ✔ ✔ Konten tombol
--gmp-mat-font-label-medium ✔ Konten badge
Penampung (komponen)
border (di :host) ✔ ✔ Penampung
border-radius (di :host) ✔ ✔ Penampung

Skema warna default

Secara default, komponen Kit UI Tempat otomatis beradaptasi dengan skema warna pilihan pengguna, mendeteksi apakah pengguna telah menyetel browser atau sistemnya ke mode terang atau gelap. Tampilan komponen akan otomatis disesuaikan agar sesuai dengan preferensi pengguna.

Elemen Kit UI Tempat dalam mode terang dan gelap

Saat menerapkan gaya kustom Anda sendiri, pastikan Anda menguji perubahan dalam mode terang dan gelap untuk mencegah inkonsistensi visual. Jika aplikasi Anda menggunakan satu tema tetap, pengalihan tema otomatis dapat menyebabkan pengalaman pengguna yang buruk. Misalnya, komponen bertema gelap mungkin muncul di aplikasi bertema terang. Untuk mencegahnya, Anda dapat memaksa komponen untuk selalu dirender dalam tema tertentu dengan menetapkan color-scheme di CSS.

Atribusi merek Google Maps

Properti Elemen Ringkas Detail Elemen Details Penggunaan
(black | white | gray) ✔ ✔ Atribusi merek Google Maps,
Tombol pengungkapan Google Maps

Persyaratan layanan Google Maps mengharuskan Anda menggunakan salah satu dari tiga warna merek untuk atribusi Google Maps. Atribusi ini harus terlihat dan dapat diakses saat perubahan penyesuaian telah dilakukan. Lihat Persyaratan atribusi untuk informasi selengkapnya.

Kami menawarkan pilihan tiga warna merek yang dapat ditetapkan secara terpisah untuk tema terang dan gelap: 

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