Places UI Kit'i özelleştirmek için CSS özellikleri

Platform seçin: Android iOS JavaScript

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 bu CSS özellikleri referans tablosunu kullanın.

Farklı özellik gruplarının bir Yer Ayrıntıları öğesinin görünümünü nasıl etkileyeceğini görselleştirmek ve HTML/CSS, Kotlin/XML ve Swift'teki koda erişmek için Özelleştirme aracını kullanın.

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

Places UI Kit, kabaca Materyal Tasarım'a dayalı (Google Haritalar'a özgü bazı değişikliklerle birlikte) görsel özelleştirmeye yönelik bir tasarım sistemi yaklaşımı sunar. Materyal Tasarım'ın Renk ve Yazı biçimi ile ilgili referansına göz atın. Varsayılan olarak stil, Google Haritalar görsel tasarım diline uygundur.

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 ✔ İçi boş 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 ✔ Mevcut EV şarj cihazı rozeti içeriği
--gmp-mat-color-negative ✔ ✔ "Şu anda kapalı" etiketi olan yer
--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 ✔ ✔ İnceleme tarihi rozeti, yükleme yer tutucu şekilleri
--gmp-mat-color-on-neutral-container ✔ ✔ Yorum tarihi, yükleme hatası
--gmp-mat-color-outline-decorative ✔ ✔ Kapsayıcı kenarlığı
--gmp-popular-times-bar-color ✔ Geçerli olmayan saatler için popüler zamanlar histogram çubukları
--gmp-popular-times-bar-current-hour-color ✔ Geçerli saat için popüler saatler histogram çubuğu
--gmp-popular-times-bar-current-hour-live-color ✔ Canlı veriler mevcut olduğunda geçerli saat için popüler saatler histogram çubuğu ve durum metni
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 (:host üzerinde) ✔ ✔ Kapsayıcı
border-radius (:host üzerinde) ✔ ✔ Kapsayıcı

Varsayılan renk şeması

Places UI Kit bileşenleri, varsayılan olarak kullanıcının tercih ettiği renk şemasına otomatik olarak uyum sağlar ve kullanıcının tarayıcısının veya sisteminin açık ya da koyu moda ayarlanıp ayarlanmadığını algılar. Bileşenin görünümü, kullanıcının tercihine uyacak şekilde otomatik olarak ayarlanır.

Açık ve koyu modlarda Places UI Kit öğeleri

Kendi özel stillerinizi uygularken görsel tutarsızlıkları önlemek için değişikliklerinizi hem açık hem de koyu modda test ettiğinizden emin olun. Uygulamanız tek ve sabit bir tema kullanıyorsa otomatik tema geçişi, kullanıcı deneyimini olumsuz etkileyebilir. Örneğin, açık temalı uygulamanızda koyu temalı bir bileşen görünebilir. Bunu önlemek için CSS'de color-scheme değerini ayarlayarak bileşeni her zaman belirli bir temada oluşturulmaya zorlayabilirsiniz.

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şkilendirmesi,
Google Haritalar açıklama düğmesi

Google Haritalar Hizmet Şartları uyarınca, Google Haritalar atfı için üç marka renginden birini kullanmanız gerekir. Özelleştirme değişiklikleri yapıldığında bu atıf görünür ve erişilebilir olmalıdır. Daha fazla bilgi için Atıf koşulları'na bakın.

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

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