जगहों की जानकारी देने वाली यूआई किट में, डिसप्ले एलिमेंट को कॉन्फ़िगर करने के लिए कई तरह की सेटिंग और कस्टम सीएसएस प्रॉपर्टी इस्तेमाल की जा सकती हैं. इस सीएसएस प्रॉपर्टी रेफ़रंस टेबल का इस्तेमाल करके देखें कि इन प्रॉपर्टी को यूज़र इंटरफ़ेस (यूआई) किट पर कैसे लागू किया जा सकता है.
पसंद के मुताबिक बनाने वाले टूल का इस्तेमाल करके देखें कि प्रॉपर्टी के अलग-अलग सेट, जगह की जानकारी वाले एलिमेंट के दिखने के तरीके पर कैसे असर डालेंगे. साथ ही, एचटीएमएल/सीएसएस, Kotlin/एक्सएमएल, और Swift में कोड को ऐक्सेस करें.
जगहों की जानकारी देने वाली यूआई किट, विज़ुअल को पसंद के मुताबिक बनाने के लिए डिज़ाइन सिस्टम का तरीका उपलब्ध कराती है. यह तरीका, काफ़ी हद तक मटीरियल डिज़ाइन पर आधारित है. हालांकि, इसमें Google Maps के हिसाब से कुछ बदलाव किए गए हैं. रंग और टाइपोग्राफ़ी के लिए, मटीरियल डिज़ाइन का रेफ़रंस देखें. डिफ़ॉल्ट रूप से, स्टाइल Google Maps की विज़ुअल डिज़ाइन लैंग्वेज के मुताबिक होती है.
सीएसएस प्रॉपर्टी
| प्रॉपर्टी | जानकारी वाला कॉम्पैक्ट एलिमेंट | जानकारी वाला एलिमेंट | इस्तेमाल |
|---|---|---|---|
| रंग (सिस्टम) | |||
--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-popular-times-bar-color |
✔ | मौजूदा समय के अलावा, अन्य समय के लिए लोकप्रिय समय के हिस्टोग्राम बार | |
--gmp-popular-times-bar-current-hour-color |
✔ | मौजूदा घंटे के लिए, लोकप्रिय समय का हिस्टोग्राम बार | |
--gmp-popular-times-bar-current-hour-live-color |
✔ | लाइव डेटा उपलब्ध होने पर, मौजूदा घंटे के लिए लोकप्रिय समय का हिस्टोग्राम बार और स्टेटस टेक्स्ट | |
| टाइपोग्राफ़ी (सिस्टम) | |||
--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 पर) |
✔ | ✔ | कंटेनर |
डिफ़ॉल्ट कलर स्कीम
डिफ़ॉल्ट रूप से, जगहों की जानकारी देने वाली यूआई किट के कॉम्पोनेंट, उपयोगकर्ता की पसंदीदा कलर स्कीम के हिसाब से अपने-आप अडजस्ट हो जाते हैं. इसके लिए, यह पता लगाया जाता है कि उपयोगकर्ता ने अपने ब्राउज़र या सिस्टम को हल्के या गहरे रंग वाले मोड पर सेट किया है या नहीं. उपयोगकर्ता की पसंद के हिसाब से, कॉम्पोनेंट का लुक अपने-आप अडजस्ट हो जाएगा.
पसंद के मुताबिक स्टाइल लागू करते समय, पक्का करें कि आपने लाइट और गहरे रंग वाले मोड, दोनों में अपने बदलावों की जांच की हो. इससे, विज़ुअल में होने वाली गड़बड़ियों से बचा जा सकता है. अगर आपका ऐप्लिकेशन एक ही थीम का इस्तेमाल करता है, तो थीम अपने-आप बदलने की सुविधा से उपयोगकर्ता का अनुभव खराब हो सकता है. उदाहरण के लिए, गहरे रंग वाली थीम का कॉम्पोनेंट, हल्के रंग वाली थीम के ऐप्लिकेशन में दिख सकता है. ऐसा होने से रोकने के लिए, कॉम्पोनेंट को किसी खास थीम में रेंडर करने के लिए मजबूर किया जा सकता है. इसके लिए, सीएसएस में color-scheme सेट करें.
Google Maps ब्रैंड एट्रिब्यूशन
| प्रॉपर्टी | जानकारी वाला कॉम्पैक्ट एलिमेंट | जानकारी वाला एलिमेंट | इस्तेमाल |
|---|---|---|---|
| (black | white | gray) | ✔ | ✔ | 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>