Places UI Kit-এ ডিসপ্লে এলিমেন্ট কনফিগার করার জন্য বিভিন্ন ধরনের সেটিংস ও কাস্টম CSS প্রপার্টি ব্যবহার করা যায়। এই CSS প্রপার্টি রেফারেন্স টেবিল ব্যবহার করে দেখুন কীভাবে এইসব প্রপার্টি UI কিটে প্রয়োগ করা যায়।
কাস্টমাইজেশন টুল ব্যবহার করে দেখুন যে বিভিন্ন প্রপার্টি কীভাবে Places Details এলিমেন্টের চেহারাকে প্রভাবিত করবে এবং HTML/CSS, Kotlin/XML ও Swift-এ কোড অ্যাক্সেস করুন।
Places UI Kit, ভিজ্যুয়াল কাস্টমাইজেশনের জন্য ডিজাইন সিস্টেম অ্যাপ্রোচ অফার করে যা মোটামুটি মেটেরিয়াল ডিজাইন-এর উপর ভিত্তি করে তৈরি (কিছু Google Maps-নির্দিষ্ট পরিবর্তন সহ)। রঙ এবং টাইপোগ্রাফি-এর জন্য মেটেরিয়াল ডিজাইনের রেফারেন্স দেখুন। ডিফল্ট হিসেবে, স্টাইলটি Google Maps ভিজ্যুয়াল ডিজাইন ল্যাঙ্গুয়েজ মেনে চলে।
CSS প্রপার্টি
| প্রপার্টি | Details Compact Element | বিবরণ এলিমেন্ট | ব্যবহার |
|---|---|---|---|
| রঙ (সিস্টেম) | |||
--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 (:host-এ) |
✔ | ✔ | কন্টেনার |
border-radius (:host-এ) |
✔ | ✔ | কন্টেনার |
ডিফল্ট রঙের স্কিম
ডিফল্ট হিসেবে, Places UI Kit কম্পোনেন্ট অটোমেটিক ব্যবহারকারীর পছন্দের রঙের স্কিমের সাথে মানিয়ে নেয়, ব্যবহারকারীর ব্রাউজার বা সিস্টেম লাইট বা ডার্ক মোডে সেট করা আছে কিনা তা শনাক্ত করে। ব্যবহারকারীর পছন্দের সাথে ম্যাচ করার জন্য কম্পোনেন্টের উপস্থিতি অটোমেটিক অ্যাডজাস্ট হয়ে যাবে।
আপনার নিজস্ব কাস্টম স্টাইল প্রয়োগ করার সময়, ভিজ্যুয়াল অসঙ্গতি এড়াতে লাইট এবং ডার্ক উভয় মোডে আপনার পরিবর্তনগুলি পরীক্ষা করে দেখুন। আপনার অ্যাপ্লিকেশন যদি একটি, নির্দিষ্ট থিম ব্যবহার করে, তাহলে
অটোমেটিক থিম পরিবর্তন করার ফলে ব্যবহারকারীর অভিজ্ঞতা খারাপ হতে পারে। যেমন, আপনার লাইট-থিমযুক্ত অ্যাপে ডার্ক-থিমযুক্ত কম্পোনেন্ট
দেখা যেতে পারে। এটি আটকাতে, CSS-এ color-scheme সেট করে আপনি কম্পোনেন্টকে
সবসময় নির্দিষ্ট থিমে রেন্ডার করতে বাধ্য করতে পারেন।
Google Maps ব্র্যান্ড অ্যাট্রিবিউশন
| প্রপার্টি | Details Compact Element | বিবরণ এলিমেন্ট | ব্যবহার |
|---|---|---|---|
| (কালো | সাদা | ধূসর) | ✔ | ✔ | Google Maps ব্র্যান্ড অ্যাট্রিবিউশন, Google Maps ডিসক্লোজার বোতাম |
Google Maps-এর পরিষেবার শর্তাবলী অনুযায়ী আপনাকে Google Maps অ্যাট্রিবিউশনের জন্য তিনটি ব্র্যান্ড রঙের মধ্যে একটি ব্যবহার করতে হবে। কাস্টমাইজেশন সংক্রান্ত পরিবর্তন করা হলে, এই অ্যাট্রিবিউশন অবশ্যই দৃশ্যমান ও অ্যাক্সেসযোগ্য হতে হবে। আরও তথ্যের জন্য অ্যাট্রিবিউশন প্রয়োজনীয়তা দেখুন।
আমরা তিনটি ব্র্যান্ড রঙের বিকল্প অফার করি যা লাইট ও ডার্ক থিমের জন্য আলাদাভাবে সেট করা যেতে পারে:
- লাইট থিম: সাদা, ধূসর ও কালো রঙের অ্যাট্রিবিউট সহ
PlaceAttributionElement.lightSchemeColor। - ডার্ক থিম: সাদা, ধূসর ও কালো রঙের অ্যাট্রিবিউট সহ
PlaceAttributionElement.darkSchemeColor।
<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>