Places UI Kit में, डिसप्ले एलिमेंट को कॉन्फ़िगर करने के लिए कई सेटिंग और कस्टम सीएसएस प्रॉपर्टी होती हैं. इस सीएसएस प्रॉपर्टी रेफ़रंस टेबल का इस्तेमाल करके देखें कि इन प्रॉपर्टी को यूज़र इंटरफ़ेस (यूआई) किट पर कैसे लागू किया जा सकता है.
कस्टमाइज़ेशन टूल का इस्तेमाल करके देखें कि प्रॉपर्टी के अलग-अलग सेट, जगह की जानकारी वाले एलिमेंट की स्टाइल पर कैसा असर डालेंगे. साथ ही, एचटीएमएल/सीएसएस, Kotlin/XML, और Swift में कोड ऐक्सेस करें.
जगहों की जानकारी देने वाली यूआई किट, विज़ुअल कस्टमाइज़ेशन के लिए डिज़ाइन सिस्टम का इस्तेमाल करती है. यह सिस्टम, मटीरियल डिज़ाइन पर आधारित है. हालांकि, इसमें Google Maps के हिसाब से कुछ बदलाव किए गए हैं. Material Design के रेफ़रंस में Color और Typography देखें. डिफ़ॉल्ट रूप से, स्टाइल Google Maps के विज़ुअल डिज़ाइन की भाषा के मुताबिक होती है.
सीएसएस प्रॉपर्टी
| प्रॉपर्टी | 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 |
✔ | ईवी चार्जर के लिए उपलब्ध बैज | |
--gmp-mat-color-on-positive-container |
✔ | ईवी चार्जर के बैज के लिए उपलब्ध कॉन्टेंट | |
--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 (on :host) |
✔ | ✔ | कंटेनर |
border-radius (on :host) |
✔ | ✔ | कंटेनर |
डिफ़ॉल्ट कलर स्कीम
डिफ़ॉल्ट रूप से, Places UI Kit के कॉम्पोनेंट, उपयोगकर्ता की पसंद के हिसाब से कलर स्कीम के साथ अपने-आप काम करते हैं. इससे यह पता चलता है कि उपयोगकर्ता ने अपने ब्राउज़र या सिस्टम को लाइट या डार्क मोड पर सेट किया है या नहीं. उपयोगकर्ता की पसंद के हिसाब से, कॉम्पोनेंट का लुक अपने-आप बदल जाएगा.
अपनी कस्टम स्टाइल लागू करते समय, पक्का करें कि आपने हल्के और गहरे, दोनों मोड में बदलावों की जांच की हो. इससे विज़ुअल में अंतर नहीं आएगा. अगर आपके ऐप्लिकेशन में एक ही थीम का इस्तेमाल किया जाता है, तो थीम के अपने-आप बदलने की सुविधा से उपयोगकर्ता अनुभव खराब हो सकता है. उदाहरण के लिए, गहरे रंग वाली थीम वाला कोई कॉम्पोनेंट, हल्के रंग वाली थीम वाले आपके ऐप्लिकेशन में दिख सकता है. ऐसा होने से रोकने के लिए, कॉम्पोनेंट को हमेशा किसी खास थीम में रेंडर करने के लिए मजबूर किया जा सकता है. इसके लिए, सीएसएस में color-scheme सेट करें.
Google Maps पर ब्रैंड एट्रिब्यूशन
| प्रॉपर्टी | Details Compact Element | जानकारी वाला एलिमेंट | इस्तेमाल |
|---|---|---|---|
| (black | white | gray) | ✔ | ✔ | Google Maps पर ब्रैंड एट्रिब्यूशन, Google Maps पर जानकारी ज़ाहिर करने वाला बटन |
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>