सीधे कंटेंट पर जाएँ
Toolars
एक्सप्लोर करें

React Native के लिए शैडो

React Native Shadow Generator

iOS शैडो और Android elevation सेट करें, पुराने shadow और नए boxShadow सिंटैक्स की तुलना करें, प्लेटफ़ॉर्म सीमाएँ देखें और तैयार स्टाइल कॉपी करें।

लोकल प्रोसेसिंग

प्रोसेसिंग का विवरण

टूल का इनपुट आपके डिवाइस पर प्रोसेस होता है।

टूल चलाने के लिए संसाधन डाउनलोड हो सकते हैं। खाता सेवाएँ अलग हैं।

ऑफ़लाइन उपयोग तैयार हो रहा है…

गोपनीयता की जानकारी
बग रिपोर्ट करें

टास्क पथ / इनपुट से परिणाम तक

React Native शैडो कैसे बनाएं

  1. 01

    लक्ष्य प्लेटफ़ॉर्म चुनें

    पहले आउटपुट API चुनें: लेगेसी मोड प्लेटफ़ॉर्म के अनुसार iOS शैडो प्रॉपर्टी या Android elevation बनाता है, जबकि boxShadow समर्थित React Native New Architecture वाले Android 9+ के लिए एक बाहरी शैडो बनाता है। लेगेसी मोड में iOS, Android या दोनों चुनें; दोनों डिफ़ॉल्ट है।

  2. 02

    iOS शैडो को आकार दें

    शैडो रंग चुनें, फिर ऑफ़सेट X और ऑफ़सेट Y -100 से 100 px, ओपेसिटी 0.01 के चरणों में 0 से 1, और रेडियस 0 से 100 px सेट करें। रेंज से बाहर के मान अपने आप रेंज पर कस दिए जाते हैं, इसलिए आप बिना टूटा कोड बनाए मुफ़्ती से टाइप कर सकते हैं।

  3. 03

    Android एलिवेशन सेट करें

    एलिवेशन 0 से 24 समायोजित करें। Android शैडो ऑफ़सेट के बजाय एलिवेशन से आते हैं, इसलिए यह मान आउटपुट के Android हिस्से को चलाता है जबकि iOS नंबर उसे अछूता छोड़ते हैं। दोनों मोड में iOS कंट्रोल सक्रिय रहते हैं, ताकि स्निपेट के दोनों हिस्से साथ-साथ ट्यून हों।

  4. 04

    लाइव पूर्वावलोकन जांचें

    लाइव पूर्वावलोकन कार्ड चुने प्लेटफ़ॉर्म का ब्राउज़र box-shadow अनुमान रेंडर करता है, हर बदलाव के साथ अपडेट होता हुआ। नमूना लोड करें एक उठा हुआ नीला (indigo) उदाहरण डालता है, अगर आप सूक्ष्म डिफ़ॉल्ट से मज़बूत शुरुआती बिंदु चाहते हैं।

  5. 05

    बना हुआ कोड कॉपी करें

    StyleSheet स्निपेट को — toolars-react-native-shadow.ts के रूप में सहेजा हुआ — अपने प्रोजेक्ट में ले जाने के लिए कोड कॉपी करें या .ts डाउनलोड करें इस्तेमाल करें। दोबारा शुरू करना हो तो रीसेट डिफ़ॉल्ट शैडो वापस लाता है।

टूल के तथ्य

प्रोसेसिंग
आपके ब्राउज़र में
इनपुट इस डिवाइस से बाहर जाता है
कभी नहीं
रिटेंशन
कुछ भी स्टोर नहीं होता
कीमत
मुफ़्त

आपका इनपुट ब्राउज़र में ही रहता है।

React Native के लिए शैडो अपना सत्यापित लोकल एक्ज़ीक्यूशन पथ इस्तेमाल करता है और कोई छिपा इनपुट या आउटपुट इतिहास नहीं बनाता।

लोकल एक्ज़ीक्यूशन

मौजूदा ब्राउज़र टैब के अंदर चलता है।

कोई छिपी प्रोसेसिंग नहीं

सक्रिय टूल डेटा कभी Toolars दस्तावेज़ रिकॉर्ड नहीं बनता।

खाते की ज़रूरत नहीं

बिना प्रोफ़ाइल बनाए मुख्य वर्कफ़्लो इस्तेमाल करें। साइन इन करने के बाद फ़ेवरिट आपके खाते से सिंक होते हैं।

तुरंत रीसेट

टैब साफ़ करें और सक्रिय कार्य डेटा गायब।

React Native के लिए शैडो कब उपयोगी होता है

क्रॉस-प्लेटफ़ॉर्म स्टाइल

एक ही कॉम्पोनेंट स्टाइल में आने वाली iOS और Android प्रॉपर्टी जनरेट करें।

डिज़ाइन हैंडऑफ़

विज़ुअल शैडो के फ़ैसले को कॉपी-रेडी React Native कोड में बदलें।

तेज़ ट्यूनिंग

लाइव अनुमान के सामने डेप्थ, रंग, ओपेसिटी, रेडियस और ऑफ़सेट समायोजित करें।

React Native के लिए शैडो असल में क्या करता है

डिज़ाइन फ़ाइल में ऐसा कार्ड दिखता है जो ठीक-ठीक तैरता है, और अब उसे दो बार अस्तित्व में आना है: एक बार iOS शैडो प्रॉपर्टी के रूप में, एक बार Android एलिवेशन के रूप में। React Native शैडो जनरेटर लाइव अनुमान के सामने लुक डायल करने और सटीक StyleSheet ब्लॉक कॉपी करने देता है, हर अंदाज़े पर नंबर हाथ से ट्यून करने और ऐप दोबारा कंपाइल करने के बजाय। लेगेसी दोनों मोड एक ही स्निपेट में iOS शैडो प्रॉपर्टी और Android elevation जोड़ता है; अंतिम रंग और रूप हर डिवाइस पर अलग से जाँचें।

आम सवाल

जनरेटर कौन सा कोड बनाता है?
एक TypeScript स्निपेट जो react-native से StyleSheet इम्पोर्ट करता है और एकल card नियम वाला styles ऑब्जेक्ट एक्सपोर्ट करता है। iOS के लिए यह shadowColor, width और height वाला shadowOffset, shadowOpacity और shadowRadius देता है; Android के लिए elevation (सिर्फ़-Android मोड में shadowColor भी); दोनों में iOS प्रॉपर्टी और elevation साथ आते हैं।
डिफ़ॉल्ट मान क्या हैं?
डिफ़ॉल्ट शैडो दोनों प्लेटफ़ॉर्म को टारगेट करता है, रंग #111827, ऑफ़सेट X पर 0, ऑफ़सेट Y पर 8 px, ओपेसिटी पर 0.24, रेडियस पर 16 px और एलिवेशन पर 8 — ठीक वही जो वर्कस्पेस पहली बार खुलने पर दिखता है। रीसेट इन्हीं मानों पर लौटता है, और नमूना लोड करें ज़्यादा ऑफ़सेट व रेडियस पर मज़बूत नीला (indigo) प्रीसेट लाता है।
कौन से रंग फ़ॉर्मैट स्वीकार होते हैं?
छह-अंकीय hex मान जैसे #111827। जो मान्य hex रंग नहीं है वह आउटपुट तोड़ने के बजाय डिफ़ॉल्ट पर लौट जाता है, और मान्य मान बने हुए कोड में बड़े अक्षरों में नॉर्मलाइज़ होते हैं।
क्या पूर्वावलोकन ठीक वही है जो डिवाइस दिखाएगा?
नहीं, और पूर्वावलोकन कार्ड यह कहता भी है: ब्राउज़र चुने प्लेटफ़ॉर्म का box-shadow अनुमान रेंडर करता है, जो सेटिंग्स की तुलना के लिए काफ़ी है लेकिन पिक्सल-परफ़ेक्ट मेल नहीं। iOS और दोनों मोड में यह आपके ऑफ़सेट, रेडियस, रंग और ओपेसिटी की नकल करता है; Android मोड में यह एलिवेशन उठान का दिखावा करता है, क्योंकि ब्राउज़र में एलिवेशन की अवधारणा नहीं है। अंतिम लुक हमेशा असली डिवाइस या एमुलेटर पर पुष्ट करें।
कौन सी मान रेंज स्वीकार होती हैं?
ऑफ़सेट X और ऑफ़सेट Y -100 से 100 px, ओपेसिटी 0.01 के चरणों में 0 से 1, रेडियस 0 से 100 px, और एलिवेशन 0 से 24। रेंज से बाहर की एंट्री टूटा कोड बनाने के बजाय नज़दीकी मान्य मान पर कस दी जाती हैं।
क्या मेरी सेटिंग्स अपलोड या स्टोर होती हैं?
नहीं। कोड इस टैब में लोकल रूप से बनता है, कोई शैडो सेटिंग स्टोर या कहीं नहीं भेजी जाती, और किसी खाते की ज़रूरत नहीं।
नया boxShadow मोड कब चुनना चाहिए?
इसे तब इस्तेमाल करें जब आपका ऐप React Native न्यू आर्किटेक्चर इस्तेमाल करता हो और आपका Android लक्ष्य 9 या बाद का हो। यह मोड बिना elevation के एक outset शैडो एक्सपोर्ट करता है। पुराने सेटअप के लिए लिगेसी प्लेटफ़ॉर्म प्रॉपर्टी पर बने रहें। ब्लर रेडियस और लिगेसी शैडो रेडियस पिक्सल-समान माइग्रेशन नहीं हैं; बनी हुई स्टाइल अपने नेटिव ऐप में जांचें।

संबंधित काम, कोई बंद गली नहीं।

पूरे इंडेक्स पर लौटे बिना किसी दूसरे केंद्रित वर्कस्पेस में जाएँ।

URL कार्यक्षेत्र

URL Workbench

हस्ताक्षरित लिंक सुरक्षित रखकर URL सूची साफ़ करें। हर पंक्ति का कारण, भागों की तुलना और Sitemap निर्यात देखें।

एडिट करें

JSON खोज और विस्तार

JSON Explorer

JSONPath से खोजें, फ़ील्ड निकालें और JSON Pointer रिकॉर्ड वापस बनाएँ; बड़ी संख्याओं की सटीकता सुरक्षित रहती है।

जाँचें

JSON Schema जाँच

JSON Schema Validator

Draft 7 या 2020-12 की स्थानीय जाँच और त्रुटि पथ देखें; कई नमूनों से स्कीमा बनाएँ।

जाँचें

HTML प्रकाशन तैयारी

HTML Publishing

चिपकाए HTML को प्रकाशन के लिए साफ़ करें। सूची, लिंक और तालिका का अर्थ बनाए रखते हुए सुरक्षित पूर्वावलोकन देखें।

प्रकाशित करें