Places UI Kit Özel Stili

Yerler kullanıcı arayüzü paketi, 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 Özelleştirme aracını ve aşağıdaki CSS özellikleri referans tablosunu kullanın.

Yerler kullanıcı arayüzü kitinin öğeleriyle eşlenen CSS özellikleri

Yerler kullanıcı arayüzü paketi, görsel özelleştirme için kabaca Materyal Tasarım'a dayalı bir tasarım sistemi yaklaşımı sunar (Google Haritalar'a özgü bazı değişikliklerle). Materyal Tasarım'ın renk ve yazı biçimi ile ilgili referanslarına bakın. Stil, varsayılan olarak Google Haritalar görsel tasarım diline uyar.

Özelleştirme aracı

Bir Places kullanıcı arayüzü kitinde özel yapılandırmaları görselleştirmek için bu aracı kullanın.

CSS özellikleri

Mülk Ayrıntılar Kompakt Öğesi 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 ✔ Kullanılabilir EV şarj cihazı rozeti
--gmp-mat-color-on-positive-container ✔ Kullanılabilir EV şarj cihazı rozet içeriği
--gmp-mat-color-negative ✔ ✔ "Kapalı" etiketi artık yer için kullanılabilir
--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, yükleme yer tutucu şekillerini inceleyin
--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 yazı tipleri 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 (:host üzerinde) ✔ ✔ Kapsayıcı
border-radius (:host üzerinde) ✔ ✔ Kapsayıcı

Google Haritalar marka ilişkilendirmesi

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

Google Haritalar'ın hizmet şartları, Google Haritalar ilişkilendirmesi için üç marka renginden birini kullanmanızı zorunlu kılar. Bu ilişkilendirme, özelleştirme değişiklikleri yapıldığında görünür ve erişilebilir olmalıdır. Daha fazla bilgi için İlişkilendirme koşullarına göz atın.

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>