Places UI Kit Özel Stili

Places UI Kit, görüntüleme öğelerini yapılandırmak için çeşitli ayarları ve özel CSS özelliklerini destekler. Bu özelliklerin kullanıcı arayüzü kitine nasıl uygulanabileceğini görmek için aşağıdaki özelleştirme aracını ve CSS özellikleri referans tablosunu kullanın.

Places UI Kit öğeleriyle eşlenen CSS özellikleri

Places UI Kit, görsel özelleştirme için kabaca Material Design'a dayalı bir tasarım sistemi yaklaşımı sunar (Google Haritalar'a özgü bazı değişikliklerle). Renk ve Yazı Biçimi ile ilgili Materyal Tasarım referansına bakın. Varsayılan olarak stil, Google Haritalar'ın görsel tasarım diline uygundur.

Özelleştirme aracı

Özel yapılandırmaları bir Places UI Kit öğesinde görselleştirmek için bu aracı kullanın.

CSS özellikleri

Mülk Details Compact Element Ayrıntılar Öğesi Kullanım
Renk (sistem)
--gmp-mat-color-surface ✔ ✔ Kapsayıcı ve iletişim kutusu arka planı
--gmp-mat-color-on-surface ✔ ✔ Başlıklar, iletişim kutusu içeriği
--gmp-mat-color-on-surface-variant ✔ ✔ Yer bilgileri
--gmp-mat-color-primary ✔ ✔ Bağlantılar, yükleme göstergesi, genel bakış simgeleri
--gmp-mat-color-disabled-surface ✔ Doldurulmamış yıldız puanı
--gmp-mat-color-positive ✔ ✔ "Şu anda açık" etiketini yerleştirme
--gmp-mat-color-positive-container ✔ EV şarj noktası rozeti
--gmp-mat-color-on-positive-container ✔ Mevcut EV şarj cihazı rozeti içeriği
--gmp-mat-color-negative ✔ ✔ Yerlere "Kapalı" etiketi ekleme
--gmp-mat-color-info ✔ ✔ Tekerlekli sandalyeye uygun giriş simgesi
--gmp-mat-color-secondary-container ✔ ✔ Düğme arka planı
--gmp-mat-color-on-secondary-container ✔ ✔ Düğme metni ve simgesi
--gmp-mat-color-neutral-container ✔ ✔ Tarih rozetini ve yükleme yer tutucu şekillerini inceleme
--gmp-mat-color-on-neutral-container ✔ ✔ İnceleme tarihi, yükleme hatası
--gmp-mat-color-outline-decorative ✔ ✔ Kapsayıcı kenarlığı
Yazı biçimi (sistem)
--gmp-mat-font-family ✔ ✔ Tüm tipografi için temel yazı tipi ailesi
--gmp-mat-font-display-small ✔ Yer adı
--gmp-mat-font-headline-medium ✔ ✔ İletişim kutusu başlıkları
--gmp-mat-font-title-small ✔ Yer adı
--gmp-mat-font-body-medium ✔ Yer bilgileri, iletişim kutusu içeriği
--gmp-mat-font-body-small ✔ Yer bilgileri
--gmp-mat-font-label-large ✔ ✔ Düğme içeriği
--gmp-mat-font-label-medium ✔ Rozet içeriği
Kapsayıcı (bileşen)
border (on :host) ✔ ✔ Kapsayıcı
border-radius (on :host) ✔ ✔ Kapsayıcı

Google Haritalar'da marka ilişkilendirmesi

Mülk Details Compact Element Ayrıntılar Öğesi Kullanım
(siyah | beyaz | gri) ✔ ✔ Google Haritalar marka ilişkilendirmesi,
Google Haritalar açıklama düğmesi

Google Haritalar Hizmet Şartları, Google Haritalar ilişkilendirmesi için üç marka renginden birini kullanmanızı zorunlu kılar. Özelleştirme değişiklikleri yapıldığında bu ilişkilendirme görünür ve erişilebilir olmalıdır. Daha fazla bilgi için Atıf koşulları başlıklı makaleyi inceleyin.

Açık ve koyu temalar için bağımsız olarak ayarlanabilen üç marka rengi seçeneği sunuyoruz: 

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