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