প্ল্যাটফর্ম নির্বাচন করুন: অ্যান্ড্রয়েড আইওএস জাভাস্ক্রিপ্ট

কাস্টম স্টাইলিং

স্থান বিবরণ চাক্ষুষ কাস্টমাইজেশন
ভিজ্যুয়াল কাস্টমাইজেশন উদাহরণ

আপনি এই স্থানগুলির UI কিট উপাদানগুলির রঙ, টাইপোগ্রাফি, ব্যবধান, সীমানা এবং কোণগুলি কাস্টমাইজ করতে পারেন:

Places UI কিট মোটামুটিভাবে মেটেরিয়াল ডিজাইনের (কিছু Google-Maps-নির্দিষ্ট পরিবর্তন সহ) উপর ভিত্তি করে ভিজ্যুয়াল কাস্টমাইজেশনের জন্য একটি ডিজাইন সিস্টেম পদ্ধতির প্রস্তাব দেয়। রঙ এবং টাইপোগ্রাফির জন্য মেটেরিয়াল ডিজাইনের রেফারেন্স দেখুন। ডিফল্টরূপে, শৈলীটি Google মানচিত্রের ভিজ্যুয়াল ডিজাইনের ভাষা মেনে চলে।

স্থান বিবরণ কাস্টমাইজেশন বিকল্প

কম্পোনেন্টের চেহারা ও অনুভূতি placesMaterialColor , placesMaterialFont , placesMaterialShape , এবং placesMaterialTheme থিম স্ট্রাকট দিয়ে কাস্টমাইজ করা হয়েছে।

আপনি নিম্নলিখিত শৈলী কাস্টমাইজ করতে পারেন:

থিম বৈশিষ্ট্য ব্যবহার
রঙ
theme.color.surface ধারক এবং ডায়ালগ ব্যাকগ্রাউন্ড
theme.color.outlineDecorative ধারক সীমানা
theme.color.primary লিঙ্ক, লোডিং সূচক, ওভারভিউ আইকন
theme.color.onSurface শিরোনাম, সংলাপের বিষয়বস্তু
theme.color.onSurfaceVariant স্থান তথ্য
theme.color.secondaryContainer বোতাম ব্যাকগ্রাউন্ড
theme.color.onSecondaryContainer বোতাম পাঠ্য এবং আইকন
theme.color.neutralContainer তারিখ ব্যাজ পর্যালোচনা করুন, স্থানধারক আকার লোড হচ্ছে
theme.color.onNeutralContainer পর্যালোচনার তারিখ, লোডিং ত্রুটি৷
theme.color.positiveContainer উপলব্ধ EV চার্জার ব্যাজ
theme.color.onPositiveContainer উপলব্ধ EV চার্জার ব্যাজ সামগ্রী
theme.color.positive "খুলুন" এখন লেবেল রাখুন
theme.color.negative "বন্ধ" এখন লেবেল রাখুন
theme.color.info অ্যাক্সেসযোগ্য প্রবেশ আইকন
theme.measurement.borderWidthButton মানচিত্র এবং ঠিক আছে বোতাম খুলুন
টাইপোগ্রাফি
theme.font.bodySmall স্থান তথ্য
theme.font.bodyMedium স্থান তথ্য, ডায়ালগ বিষয়বস্তু
theme.font.labelMedium ব্যাজ সামগ্রী
theme.font.labelLarge বোতাম সামগ্রী
theme.font.headlineMedium ডায়ালগ শিরোনাম
theme.font.displaySmall স্থানের নাম
theme.font.titleSmall স্থানের নাম
ব্যবধান
theme.measurement.spacingExtraSmall
theme.measurement.spacingSmall
theme.measurement.spacingMedium
theme.measurement.spacinglarge
theme.measurement.spacingExtraLarge
theme.measurement.spacingTwoExtraLarge
পরিমাপ
borderWidth ধারক
theme.measurement.borderWidthButton
আকৃতি
theme.shape.cornerRadius ধারক
theme.shape.cornerRadiusButton মানচিত্র এবং ঠিক আছে বোতামে খুলুন (বৃত্তাকার আইকন বোতাম বাদ)
theme.shape.cornerRadiusThumbnail থাম্বনেইল ছবি রাখুন
theme.shape.cornerRadiusCollageOuter মিডিয়া কোলাজ
theme.shape.cornerRadiusCard প্লেস কার্ড, ইউজার রিভিউ কার্ড
theme.shape.cornerRadiusDialog Google Maps প্রকাশের ডায়ালগ
গুগল ম্যাপ ব্র্যান্ড অ্যাট্রিবিউশন
attribution.lightModeColor হালকা থিম গুগল ম্যাপ অ্যাট্রিবিউশন এবং ডিসক্লোজার বোতাম (সাদা, ধূসর এবং কালো জন্য enums)
attribution.darkModeColor ডার্ক থিম গুগল ম্যাপ অ্যাট্রিবিউশন এবং ডিসক্লোজার বোতাম (সাদা, ধূসর এবং কালো জন্য enums)

অ্যাট্রিবিউশন রং

বৈশিষ্ট্য
অ্যাট্রিবিউশন

Google Maps-এর পরিষেবার শর্তাবলীর জন্য আপনাকে Google Maps অ্যাট্রিবিউশনের জন্য তিনটি ব্র্যান্ডের রঙের মধ্যে একটি ব্যবহার করতে হবে। কাস্টমাইজেশন পরিবর্তন করা হলে এই অ্যাট্রিবিউশনটি দৃশ্যমান এবং অ্যাক্সেসযোগ্য হতে হবে।

আমরা বেছে নেওয়ার জন্য 3টি ব্র্যান্ডের রঙ অফার করি যা হালকা এবং অন্ধকার থিমের জন্য স্বাধীনভাবে সেট করা যেতে পারে:

  • হালকা থিম: attributionColorLight সাদা, ধূসর এবং কালোর জন্য enums সহ।
  • ডার্ক থিম: attributionColorDark সাদা, ধূসর এবং কালোর জন্য enums সহ গাঢ়।

উদাহরণ

এই ফাংশনটি একটি থিম তৈরি করে যা ডিফল্ট শৈলী বৈশিষ্ট্যগুলিকে ওভাররাইড করে। যে কোনো থিম বৈশিষ্ট্য ওভাররাইড করা হয় না ডিফল্ট শৈলী ব্যবহার করে।

সুইফট

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

প্রতিটি উপাদানের জন্য সম্পূর্ণ উদাহরণ