Pilih platform: Android iOS JavaScript

Gaya visual kustom

Penyesuaian visual detail tempat
Contoh penyesuaian visual

Anda dapat menyesuaikan warna, tipografi, jarak, batas, dan sudut komponen kit UI Places ini:

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.

Opsi penyesuaian detail tempat

Tampilan dan nuansa komponen disesuaikan dengan struct placesMaterialColor, placesMaterialFont, placesMaterialShape, dan placesMaterialTheme.

Anda dapat menyesuaikan gaya berikut:

Atribut tema Penggunaan
Warna
theme.color.surface Latar belakang penampung dan dialog
theme.color.outlineDecorative Batas container
theme.color.primary Link, indikator pemuatan, ikon ringkasan
theme.color.onSurface Judul, konten dialog
theme.color.onSurfaceVariant Informasi tempat
theme.color.secondaryContainer Latar tombol
theme.color.onSecondaryContainer Teks dan ikon tombol
theme.color.neutralContainer Meninjau badge tanggal, memuat bentuk placeholder
theme.color.onNeutralContainer Tanggal ulasan, error saat memuat
theme.color.positiveContainer Badge pengisi daya EV yang tersedia
theme.color.onPositiveContainer Konten badge pengisi daya EV yang tersedia
theme.color.positive Label "Buka" untuk tempat
theme.color.negative Label "Tutup" untuk tempat
theme.color.info Ikon pintu masuk khusus difabel
theme.measurement.borderWidthButton Tombol Buka di peta dan Oke
   
Tipografi
theme.font.bodySmall Informasi tempat
theme.font.bodyMedium Informasi tempat, konten dialog
theme.font.labelMedium Konten badge
theme.font.labelLarge Konten tombol
theme.font.headlineMedium Judul dialog
theme.font.displaySmall Nama tempat
theme.font.titleSmall Nama tempat
   
Spasi
theme.measurement.spacingExtraSmall
theme.measurement.spacingSmall
theme.measurement.spacingMedium
theme.measurement.spacinglarge
theme.measurement.spacingExtraLarge
theme.measurement.spacingTwoExtraLarge
   
Pengukuran
borderWidth Penampung
theme.measurement.borderWidthButton
   
Bentuk
theme.shape.cornerRadius Penampung
theme.shape.cornerRadiusButton Tombol Buka di Maps dan Oke (tidak termasuk tombol ikon bulat)
theme.shape.cornerRadiusThumbnail Tempatkan gambar thumbnail
theme.shape.cornerRadiusCollageOuter Kolase media
theme.shape.cornerRadiusCard Kartu tempat, Kartu ulasan pengguna
theme.shape.cornerRadiusDialog Dialog pengungkapan Google Maps
   
Atribusi Merek Google Maps
attribution.lightModeColor Tombol atribusi dan pengungkapan Google Maps tema terang (enum untuk putih, abu-abu, dan hitam)
attribution.darkModeColor Tombol atribusi dan pengungkapan Google Maps dengan tema gelap (enum untuk warna putih, abu-abu, dan hitam)

Warna atribusi

atribusi
Atribusi

Persyaratan layanan Google Maps mengharuskan Anda menggunakan salah satu dari tiga warna merek untuk atribusi Google Maps. Atribusi ini harus terlihat dan dapat diakses saat perubahan penyesuaian telah dilakukan.

Kami menawarkan 3 warna merek yang dapat dipilih dan ditetapkan secara terpisah untuk tema terang dan gelap:

  • Tema terang: attributionColorLight dengan enum untuk putih, abu-abu, dan hitam.
  • Tema gelap: attributionColorDark dengan enum untuk putih, abu-abu, dan hitam.

Contoh

Fungsi ini membuat tema yang menggantikan atribut gaya default. Atribut tema yang tidak diganti akan menggunakan gaya default.

Swift

  // Same for compact and full
func makeTemplateTheme(colorScheme: ColorScheme) -> PlacesMaterialTheme {
  var theme = PlacesMaterialTheme()
  var color = PlacesMaterialColor()
  color.surface = (colorScheme == .dark ? .blue : .gray)
  color.buttonBorder = (colorScheme == .dark ? .pink : .orange)
  color.outlineDecorative = (colorScheme == .dark ? .white : .black)
  color.onSurface = (colorScheme == .dark ? .yellow : .red)
  color.onSurfaceVariant = (colorScheme == .dark ? .white : .blue)
  color.onSecondaryContainer = (colorScheme == .dark ? .white : .red)
  color.secondaryContainer = (colorScheme == .dark ? .green : .purple)
  color.positive = (colorScheme == .dark ? .yellow : .red)
  color.primary = (colorScheme == .dark ? .yellow : .purple)
  color.info = (colorScheme == .dark ? .yellow : .purple)
  var shape = PlacesMaterialShape()
  shape.cornerRadius = 10
  var font = PlacesMaterialFont()
  font.labelLarge = .system(size: UIFontMetrics.default.scaledValue(for: 18))
  font.headlineMedium = .system(size: UIFontMetrics.default.scaledValue(for: 15))
  font.bodyLarge = .system(size: UIFontMetrics.default.scaledValue(for: 15))
  font.bodyMedium = .system(size: UIFontMetrics.default.scaledValue(for: 12))
  font.bodySmall = .system(size: UIFontMetrics.default.scaledValue(for: 11))
  var attribution = PlacesMaterialAttribution()
  attribution.lightModeColor = .black
  attribution.darkModeColor = .white
  theme.measurement.borderWidthButton = 1
  theme.color = color
  theme.shape = shape
  theme.font = font
  theme.attribution = attribution
  return theme
}

Contoh lengkap untuk setiap komponen