প্লেস UI কিট প্রদর্শন উপাদানগুলি কনফিগার করতে বিভিন্ন সেটিংস এবং কাস্টম CSS বৈশিষ্ট্য সমর্থন করে৷ এই বৈশিষ্ট্যগুলি কীভাবে UI কিটে প্রয়োগ করা যেতে পারে তা দেখতে নীচের কাস্টমাইজেশন টুল এবং CSS বৈশিষ্ট্যের রেফারেন্স টেবিলটি ব্যবহার করুন।
প্লেস ইউআই কিট মোটামুটিভাবে মেটেরিয়াল ডিজাইনের উপর ভিত্তি করে (কিছু Google মানচিত্র-নির্দিষ্ট পরিবর্তন সহ) ভিজ্যুয়াল কাস্টমাইজেশনের জন্য একটি ডিজাইন সিস্টেম পদ্ধতির প্রস্তাব দেয়। রঙ এবং টাইপোগ্রাফির জন্য মেটেরিয়াল ডিজাইনের রেফারেন্স দেখুন। ডিফল্টরূপে, শৈলীটি Google মানচিত্রের ভিজ্যুয়াল ডিজাইনের ভাষা মেনে চলে।
কাস্টমাইজেশন টুল
একটি Places UI কিট উপাদানে কাস্টম কনফিগারেশন কল্পনা করতে এই টুলটি ব্যবহার করুন।
CSS বৈশিষ্ট্য
| সম্পত্তি | বিবরণ কমপ্যাক্ট উপাদান | বিবরণ উপাদান | ব্যবহার |
|---|---|---|---|
| রঙ (সিস্টেম) | |||
--gmp-mat-color-surface | ✔ | ✔ | ধারক এবং ডায়ালগ ব্যাকগ্রাউন্ড |
--gmp-mat-color-on-surface | ✔ | ✔ | শিরোনাম, সংলাপের বিষয়বস্তু |
--gmp-mat-color-on-surface-variant | ✔ | ✔ | স্থান তথ্য |
--gmp-mat-color-primary | ✔ | ✔ | লিঙ্ক, লোডিং সূচক, ওভারভিউ আইকন |
--gmp-mat-color-disabled-surface | ✔ | অপূর্ণ তারকা রেটিং | |
--gmp-mat-color-positive | ✔ | ✔ | "খুলুন" এখন লেবেল রাখুন |
--gmp-mat-color-positive-container | ✔ | উপলব্ধ EV চার্জার ব্যাজ | |
--gmp-mat-color-on-positive-container | ✔ | উপলব্ধ EV চার্জার ব্যাজ সামগ্রী | |
--gmp-mat-color-negative | ✔ | ✔ | "বন্ধ" এখন লেবেল রাখুন |
--gmp-mat-color-info | ✔ | ✔ | অ্যাক্সেসযোগ্য প্রবেশ আইকন |
--gmp-mat-color-secondary-container | ✔ | ✔ | বোতাম ব্যাকগ্রাউন্ড |
--gmp-mat-color-on-secondary-container | ✔ | ✔ | বোতাম পাঠ্য এবং আইকন |
--gmp-mat-color-neutral-container | ✔ | ✔ | তারিখ ব্যাজ পর্যালোচনা করুন, স্থানধারক আকার লোড হচ্ছে |
--gmp-mat-color-on-neutral-container | ✔ | ✔ | পর্যালোচনার তারিখ, লোডিং ত্রুটি৷ |
--gmp-mat-color-outline-decorative | ✔ | ✔ | ধারক সীমানা |
| টাইপোগ্রাফি (সিস্টেম) | |||
--gmp-mat-font-family | ✔ | ✔ | সমস্ত টাইপোগ্রাফির জন্য বেস ফন্ট-পরিবার |
--gmp-mat-font-display-small | ✔ | স্থানের নাম | |
--gmp-mat-font-headline-medium | ✔ | ✔ | ডায়ালগ শিরোনাম |
--gmp-mat-font-title-small | ✔ | স্থানের নাম | |
--gmp-mat-font-body-medium | ✔ | স্থান তথ্য, ডায়ালগ বিষয়বস্তু | |
--gmp-mat-font-body-small | ✔ | স্থান তথ্য | |
--gmp-mat-font-label-large | ✔ | ✔ | বোতাম সামগ্রী |
--gmp-mat-font-label-medium | ✔ | ব্যাজ সামগ্রী | |
| ধারক (উপাদান) | |||
border (অন:হোস্ট) | ✔ | ✔ | ধারক |
border-radius (চালু : হোস্ট) | ✔ | ✔ | ধারক |
গুগল ম্যাপ ব্র্যান্ড অ্যাট্রিবিউশন
| সম্পত্তি | বিবরণ কমপ্যাক্ট উপাদান | বিবরণ উপাদান | ব্যবহার |
|---|---|---|---|
| (কালো | সাদা | ধূসর) | ✔ | ✔ | গুগল ম্যাপ ব্র্যান্ড অ্যাট্রিবিউশন, গুগল ম্যাপ ডিসক্লোজার বোতাম |
Google Maps-এর পরিষেবার শর্তাবলীর জন্য আপনাকে Google Maps অ্যাট্রিবিউশনের জন্য তিনটি ব্র্যান্ডের রঙের একটি ব্যবহার করতে হবে। কাস্টমাইজেশন পরিবর্তন করা হলে এই অ্যাট্রিবিউশনটি দৃশ্যমান এবং অ্যাক্সেসযোগ্য হতে হবে। আরও তথ্যের জন্য অ্যাট্রিবিউশন প্রয়োজনীয়তা দেখুন।
আমরা তিনটি ব্র্যান্ডের রঙের একটি পছন্দ অফার করি যা হালকা এবং গাঢ় থিমের জন্য স্বাধীনভাবে সেট করা যেতে পারে:
- হালকা থিম: সাদা, ধূসর এবং কালোর বৈশিষ্ট্য সহ
PlaceAttributionElement.lightSchemeColor। - গাঢ় থিম: সাদা, ধূসর এবং কালোর বৈশিষ্ট্য সহ
PlaceAttributionElement.darkSchemeColor।
<gmp-place-content-config>
<gmp-place-attribution
light-scheme-color="black"
dark-scheme-color="white"
></gmp-place-attribution>
</gmp-place-content-config>