Places UI Kit में कई तरह की सेटिंग और कस्टम सीएसएस प्रॉपर्टी होती हैं. इनकी मदद से, डिसप्ले एलिमेंट को कॉन्फ़िगर किया जा सकता है. इन प्रॉपर्टी को यूज़र इंटरफ़ेस (यूआई) किट में कैसे लागू किया जा सकता है, यह जानने के लिए पसंद के मुताबिक बनाने वाले टूल और यहां दी गई सीएसएस प्रॉपर्टी रेफ़रंस टेबल का इस्तेमाल करें.
Places यूज़र इंटरफ़ेस (यूआई) किट, विज़ुअल को पसंद के मुताबिक बनाने के लिए डिज़ाइन सिस्टम का तरीका उपलब्ध कराती है. यह तरीका, मटीरियल डिज़ाइन पर आधारित है. इसमें Google Maps के हिसाब से कुछ बदलाव भी किए गए हैं. रंग और टाइपोग्राफ़ी के लिए, Material Design का रेफ़रंस देखें. डिफ़ॉल्ट रूप से, स्टाइल में Google Maps की विज़ुअल डिज़ाइन लैंग्वेज का इस्तेमाल होता है.
कस्टमाइज़ेशन टूल
Places UI Kit एलिमेंट में कस्टम कॉन्फ़िगरेशन को विज़ुअलाइज़ करने के लिए, इस टूल का इस्तेमाल करें.
सीएसएस प्रॉपर्टी
| प्रॉपर्टी | जानकारी वाला कॉम्पैक्ट एलिमेंट | ज़्यादा जानकारी वाला एलिमेंट | इस्तेमाल |
|---|---|---|---|
| रंग (सिस्टम) | |||
--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 (:host पर) |
✔ | ✔ | कंटेनर |
border-radius (:host पर) |
✔ | ✔ | कंटेनर |
Google Maps ब्रैंड एट्रिब्यूशन
| प्रॉपर्टी | जानकारी वाला कॉम्पैक्ट एलिमेंट | ज़्यादा जानकारी वाला एलिमेंट | इस्तेमाल |
|---|---|---|---|
| (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>