Properti CSS untuk menyesuaikan Kit UI Places

Pilih platform: Android iOS JavaScript

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

Gunakan Alat penyesuaian untuk memvisualisasikan pengaruh berbagai kumpulan properti terhadap tampilan elemen Detail Tempat dan mengakses kode di HTML/CSS, Kotlin/XML, dan Swift.

Properti CSS yang dipetakan ke elemen Places UI Kit

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

Properti CSS

Properti Elemen Ringkas Detail Elemen Detail 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 tidak terisi
--gmp-mat-color-positive ✔ ✔ Label "Buka" untuk tempat
--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 ✔ ✔ Label "Tutup" untuk tempat
--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 ✔ ✔ Meninjau badge tanggal, memuat bentuk placeholder
--gmp-mat-color-on-neutral-container ✔ ✔ Tanggal ulasan, error saat memuat
--gmp-mat-color-outline-decorative ✔ ✔ Batas container
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
Container (komponen)
border (di :host) ✔ ✔ Penampung
border-radius (di :host) ✔ ✔ Penampung

Skema warna default

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

Elemen Places UI Kit 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, peralihan tema otomatis dapat menyebabkan pengalaman pengguna yang buruk. Misalnya, komponen bertema gelap dapat muncul di aplikasi bertema terang. Untuk mencegah hal ini, Anda dapat memaksa komponen agar selalu dirender dalam tema tertentu dengan menetapkan color-scheme di CSS.

Atribusi merek Google Maps

Properti Elemen Ringkas Detail Elemen Detail Penggunaan
(hitam | putih | abu-abu) ✔ ✔ Atribusi merek Google Maps,
Tombol pengungkapan Google Maps

Persyaratan layanan Google Maps mewajibkan 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 mengetahui informasi selengkapnya.

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

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