Gaya Visual Kustom Kit UI Tempat

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

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.

Alat penyesuaian

Gunakan alat ini untuk memvisualisasikan konfigurasi kustom dalam elemen Places UI Kit.

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

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>