Studio Editor: डॉकिंग, मार्जिन और पैडिंग के साथ काम करना
11 मिनट
डिवाइसेस की बदलती दुनिया में, अपने एलिमेंट्स की पोजीशन को कंट्रोल करना ज़रूरी है ताकि वे अलग-अलग स्क्रीन साइज पर वैसे ही दिखें जैसा आप चाहते हैं। स्टूडियो एडिटर में, यह सुनिश्चित करने के लिए एलिमेंट्स ऑटोमैटिकली डॉक हो जाते हैं।
यह आपको ब्रेकपॉइंट्स पर पोजीशनिंग की चिंता किए बिना एलिमेंट्स को इधर-उधर मूव करने की आजादी देता है। हालाँकि, आप इंस्पेक्टर पैनल से हमेशा अपनी पसंद के अनुसार पोजीशन, डॉकिंग और मार्जिन सेट कर सकते हैं।
px* (Scale) डॉकिंग, मार्जिन और पैडिंग के लिए डिफॉल्ट मेजरमेंट यूनिट है। आपको जो px* वैल्यू दिखती है, वह आपके मौजूदा कैनवस साइज के हिसाब से पिक्सेल के बराबर है। यह देखने के लिए कि px* वैल्यू ऑटोमैटिक रूप से कैसे स्केल होती है, किसी दूसरे ब्रेकपॉइंट पर स्विच करें।
कैनवस पर एलिमेंट्स को पोजीशन करना
ड्रैग और ड्रॉप का उपयोग करके, आप हर ब्रेकपॉइंट के लिए अलग से सीधे कैनवस पर अपने एलिमेंट की पोजीशन सेट कर सकते हैं। इससे आप यह सुनिश्चित कर सकते हैं कि एलिमेंट हर स्क्रीन पर बिल्कुल सही जगह पर दिखे।
जब तक एलिमेंट एक ही पैरेंट (जैसे सेक्शन, सेल) के अंदर रहता है, आप इसे कहीं भी मूव कर सकते हैं और इससे दूसरे ब्रेकपॉइंट्स पर कोई असर नहीं पड़ता। अगर आप किसी एलिमेंट को दूसरे पैरेंट में मूव (रीपैरेंट) करते हैं, तो यह सभी ब्रेकपॉइंट्स पर लागू होता है।
इंस्पेक्टर में X और Y कोआर्डिनेट्स
आप अपने एलिमेंट के X और Y को-ऑर्डिनेट्स चेक करके मौजूदा कैनवस साइज पर उसकी सटीक पोजीशन देख सकते हैं।
- X: हॉरिजॉन्टल प्लेन, पैरेंट एलिमेंट (जैसे सेक्शन, कंटेनर, स्टैक) के लेफ्ट किनारे से राइट किनारे तक।
- Y: वर्टिकल प्लेन, पैरेंट एलिमेंट के टॉप से बॉटम तक।
नीचे दिए गए उदाहरण में, आप Y के बगल में px* वैल्यू को नेगेटिव होते देख सकते हैं क्योंकि हम बटन को उसके पैरेंट एलिमेंट - सेल - के बाहर मूव कर रहे हैं।
ऑटोमैटिक और मैनुअल डॉकिंग
एडिटर में नया एलिमेंट जोड़ते समय, यह सुनिश्चित करने के लिए कि यह सभी स्क्रीन और डिवाइस पर अपनी जगह पर रहे, इसे ऑटोमैटिक रूप से डॉक किया जाता है। हालाँकि, आप हमेशा ऑटो डॉकिंग को डिसेबल कर सकते हैं और डॉकिंग पॉइंट्स को मैन्युअली चुन सकते हैं।
ज़्यादा जानकारी के लिए नीचे दिए गए किसी टॉपिक पर क्लिक करें।
एडिटर में ऑटोमैटिक डॉकिंग
का इस्तेमाल करके), तो वह किसी भी कोने में ऑटोमैटिकली डॉक नहीं होता है। 
मैन्युअली डॉकिंग एडजस्ट करना
, Bottom 
, Right 
या Left 
।
टिप:
Responsive Checker आपको उन एलिमेंट्स को पहचानने में मदद कर सकता है जिन्हें टॉप के बजाय पैरेंट के बॉटम में डॉक किया जाना चाहिए, क्योंकि इसकी वजह से लाइव साइट पर खाली जगह (गैप्स) दिख सकती है।
एलिमेंट्स को डॉक करते समय मार्जिन का इस्तेमाल करना
मार्जिन एक बफर की तरह काम करते हैं, जो दूसरे एलिमेंट्स के साथ ओवरलैप को रोकते हैं। जब कोई एलिमेंट डॉक किया जाता है, तो मार्जिन एलिमेंट और उसके पैरेंट के किनारों के बीच एक तय दूरी बनाए रखने में मदद करते हैं। आप उन साइड्स पर भी मार्जिन जोड़ सकते हैं जो डॉक नहीं हैं।
मार्जिन बनाने या एडिट करने के लिए:
- संबंधित एलिमेंट को सिलेक्ट करें।
- एडिटर के टॉप राइट में ओपन इंस्पेक्टर आइकन
पर क्लिक करें।
- नीचे स्क्रॉल करके Position पर जाएँ।
- संबंधित मार्जिन (लेफ्ट, राइट, टॉप या बॉटम) के लिए वैल्यू दर्ज करें।
टिप:
Responsive Checker आपको अनावश्यक मार्जिन पहचानने में मदद कर सकता है क्योंकि वे पैरेंट को रिसाइज करने की आपकी क्षमता को सीमित कर सकते हैं।
रिस्पॉन्सिव कंटेनर्स के चारों ओर पैडिंग जोड़ना
किनारों (टॉप, बॉटम या साइड्स) और अंदर के कंटेंट के बीच जगह बनाने के लिए कंटेनर्स में पैडिंग जोड़ें। पैडिंग को सभी प्रकार के रिस्पॉन्सिव कंटेनर्स में जोड़ा जा सकता है, जिसमें बेसिक कंटेनर्स, स्टैक्स, फ्लेक्सबॉक्स, रिपीटर्स, सेल्स, सेक्शन्स और पेज शामिल हैं।
एक बार पैडिंग जोड़ने के बाद, आप इसे ड्रैग और ड्रॉप का उपयोग करके सीधे कैनवस पर एडजस्ट कर सकते हैं। रिस्पॉन्सिव कंटेनर को सिलेक्ट करें और इस ऑप्शन को देखने के लिए पैडिंग पर होवर करें।
पैडिंग जोड़ने के लिए:
- संबंधित एलिमेंट को सिलेक्ट करें।
- एडिटर के टॉप राइट में ओपन इंस्पेक्टर आइकन पर क्लिक करें।
- नीचे स्क्रॉल करके Layout पर जाएँ।
- चुनें कि आप कौन सा पैडिंग एडिट करना चाहते हैं:
- कोई खास साइड
: आइकन पर क्लिक करें और संबंधित साइड (लेफ्ट, राइट, टॉप या बॉटम) के लिए वैल्यू दर्ज करें। - हॉरिजॉन्टल पैडिंग
: लेफ्ट और राइट पैडिंग के लिए वैल्यू दर्ज करें। - वर्टिकल पैडिंग
: टॉप और बॉटम पैडिंग के लिए वैल्यू दर्ज करें।
- कोई खास साइड
एलिमेंट्स को ओवरलैप होने से रोकना
एलिमेंट्स को पोजीशन करते समय, यह सुनिश्चित करना ज़रूरी है कि वे छोटे ब्रेकपॉइंट्स पर एक-दूसरे के ऊपर (ओवरलैप) न आएं। ऐसा होने से रोकने के लिए, नीचे दिए गए हमारे टिप्स देखें।
टॉप पर डॉक करना
लेआउट को व्यवस्थित करने के लिए सेल्स जोड़ना
स्टैक अप्लाई करना
समस्याओं को ठीक करना (Troubleshooting):
अगर आपको अभी एलिमेंट्स के बीच अनचाहे ओवरलैप दिख रहे हैं, तो यह ट्रबलशूटिंग गाइड देखें।
अक्सर पूछे जाने वाले सवाल (FAQs)
ज़्यादा जानकारी के लिए नीचे दिए गए किसी सवाल पर क्लिक करें।
मुझे कैनवस पर मार्जिन और पैडिंग के संकेत क्यों नहीं दिख रहे हैं?
पर क्लिक करें।
क्या मैं मार्जिन और पैडिंग सेट करते समय px* के अलावा अन्य यूनिट्स का इस्तेमाल कर सकता हूँ?
मैं सभी स्क्रीन साइज पर एलिमेंट्स का अलाइनमेंट एक जैसा कैसे रख सकता हूँ?
मैं बड़े गैप या अनचाहे व्हाइट स्पेस को कैसे ठीक कर सकता हूँ, खासकर मोबाइल पर?
अगर मोबाइल या डेस्कटॉप पर कुछ एलिमेंट्स कट रहे हों, तो मुझे क्या करना चाहिए?