প্লেস 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 (চালু : হোস্ট) | ✔ | ✔ | ধারক |
ডিফল্ট রঙের স্কিম
ডিফল্টরূপে, স্থান UI কিট উপাদানগুলি স্বয়ংক্রিয়ভাবে ব্যবহারকারীর পছন্দের রঙের স্কিমের সাথে খাপ খাইয়ে নেয়, ব্যবহারকারীর ব্রাউজার বা সিস্টেম হালকা বা অন্ধকার মোডে সেট করা আছে কিনা তা সনাক্ত করে। উপাদানটির উপস্থিতি স্বয়ংক্রিয়ভাবে ব্যবহারকারীর পছন্দের সাথে মেলে।
আপনার নিজস্ব কাস্টম শৈলী প্রয়োগ করার সময়, আপনি চাক্ষুষ অসঙ্গতি রোধ করতে হালকা এবং অন্ধকার উভয় মোডে আপনার পরিবর্তনগুলি পরীক্ষা করেছেন তা নিশ্চিত করুন। যদি আপনার অ্যাপ্লিকেশন একটি একক, স্থির থিম ব্যবহার করে, তাহলে স্বয়ংক্রিয় থিম স্যুইচিং একটি দুর্বল ব্যবহারকারীর অভিজ্ঞতার দিকে নিয়ে যেতে পারে। উদাহরণস্বরূপ, আপনার হালকা-থিমযুক্ত অ্যাপে একটি গাঢ়-থিমযুক্ত উপাদান উপস্থিত হতে পারে। এটি প্রতিরোধ করার জন্য, আপনি CSS-এ color-scheme সেট করে উপাদানটিকে সর্বদা একটি নির্দিষ্ট থিমে রেন্ডার করতে বাধ্য করতে পারেন।
গুগল ম্যাপ ব্র্যান্ড অ্যাট্রিবিউশন
| সম্পত্তি | বিবরণ কমপ্যাক্ট উপাদান | বিবরণ উপাদান | ব্যবহার |
|---|---|---|---|
| (কালো | সাদা | ধূসর) | ✔ | ✔ | গুগল ম্যাপ ব্র্যান্ড অ্যাট্রিবিউশন, গুগল ম্যাপ ডিসক্লোজার বোতাম |
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>