द आयाम क्षेत्र एलिमेंट के उन्नत टैब से परिचित चार-इनपुट रिक्ति नियंत्रण एक कस्टम विजेट देता है: एक लिंक आइकन के साथ शीर्ष, दाएं, नीचे और बाएं मान जो उन्हें सिंक में रखता है मास्टर एडॉन्स के अंदर विजेट बिल्डर, यह वह क्षेत्र है जिस पर आप पहुंचते हैं जब भी पैडिंग, मार्जिन, या प्रति-कोने की सीमा त्रिज्या आपकी स्टाइलशीट में हार्ड-कोड के बजाय पैनल से संपादन योग्य होनी चाहिए।
प्रत्येक विजेट बिल्डर नियंत्रण की तरह, आयाम समर्थन करता है शर्तों, इसलिए आप रिक्ति विकल्प केवल तभी प्रकट कर सकते हैं जब वे लागू होते हैं बिल्डर भर में टोकन आउटपुट के माध्यम से चलता है ट्विग-सिंटैक्स टेम्पलेट इंजन; दोनों मार्गदर्शिकाएँ विवरण और सीमाओं को कवर करती हैं।
मूल्य यह स्टोर सभी चार पक्षों प्लस इकाई ले जाता है, और अपने सीएसएस पैनल नाम से प्रत्येक टुकड़ा प्रिंट है कि वर्तनी सही हो रही है पूरी चाल है, और वहाँ एक व्यवहार विशिष्ट इस क्षेत्र के लिए आप इसे तार से पहले जानने के लायक है: बिल्डर के सादे चयनकर्ता क्षेत्र एक आयाम नियंत्रण के लिए कुछ भी नहीं करता है।
आयाम फ़ील्ड क्या करता है #
- चार-इनपुट नियंत्रण प्रदान करता है ऊपर, दाएं, नीचे और बाएं के लिए, लिंक आइकन के साथ जो सभी पक्षों के लिए एक मान को प्रतिबिंबित करता है।
- स्टोर हर पक्ष प्लस इकाई एक ही मान में आपका सीएसएस डॉट नोटेशन के साथ पढ़ता है।
- एक यूनिट स्विचर प्रदान करता है आपके द्वारा अनुमति दी गई इकाइयों में, जैसे कि पीएक्स, % और ईएम।
- सीमित कर सकते हैं जो पक्ष दिखाते हैं अनुमत आयाम विकल्प के माध्यम से, केवल क्षैतिज या केवल ऊर्ध्वाधर इनपुट तक।
- उत्तरदायी मूल्यों का समर्थन करता है इसलिए प्रत्येक ब्रेकप्वाइंट अपनी दूरी बनाए रखता है।
यदि आपने पहले विजेट नहीं बनाया है, तो विजेट बिल्डर अवलोकन बुनियादी बातों को शामिल करता है; वहाँ से शुरू करो।
इससे पहले कि आप शुरू करें #
- वर्डप्रेस साथ तत्व स्थापित और सक्रिय।
- एलिमेंट के लिए मास्टर ऐडऑन स्थापित और सक्रिय प्लगइन के लिए नया? देखना स्थापना गाइड.
- विजेट बिल्डर संपादक में एक कस्टम विजेट खुला हमारा उदाहरण एक मूल्य निर्धारण कार्ड विजेट है जिसका
.price-cardबॉक्स को संपादकों को आंतरिक पैडिंग सेट करने देना चाहिए।
आयाम फ़ील्ड कैसे जोड़ें #
विजेट बिल्डर संपादक के बाईं ओर फ़ील्ड पैनल खोलें और ढूंढें आयाम फ़ील्ड, स्लाइडर जैसे अन्य सीएसएस-मूल्य फ़ील्ड के साथ सूचीबद्ध है।
इसे नीचे एक अनुभाग में खींचें शैली टैब, रिक्ति नियंत्रण के लिए सामान्य घर एक बार जब यह भूमि, बाईं ओर क्षेत्र के विकल्प खुले।
आयाम फ़ील्ड विकल्पों की व्याख्या की गई #
- लेबलः एलिमेंटर में नियंत्रण के बगल में पाठ, उदाहरण के लिए “कार्ड पैडिंग”।
- नाम: उदाहरण के लिए, आपका सीएसएस केवल अक्षरों, संख्याओं और अंडरस्कोर को संदर्भित करने वाले विशिष्ट पहचानकर्ता को संदर्भित करता है
pad. - डिफ़ॉल्टः प्रारंभिक मान, ऊपर, दाएं, नीचे, बाएं, इकाई को पकड़ना, और क्या पक्ष जुड़े हुए शुरू होते हैं।
- आकार इकाइयाँ: उपयोगकर्ता जिन इकाइयों के बीच स्विच कर सकता है, जैसे कि पीएक्स, % और ईएम।
- अनुमत आयामः कौन से इनपुट दिखाई देते हैं। “All” चार भुजाएँ दिखाता है; “horizontal” केवल बाएँ और दाएँ दिखाता है; “vertical” केवल ऊपर और नीचे दिखाता है; एक कस्टम सूची विशिष्ट पक्षों को चुनती है।
- उत्तरदायी: डिवाइस आइकन जोड़ता है ताकि डेस्कटॉप, टैबलेट और मोबाइल अलग-अलग मान रखें।
- विवरण, शो लेबल, सेपरेटर और शर्तें यहां हर दूसरे क्षेत्र की तरह ही काम करती हैं।
आयाम मान को अपने सीएसएस से कनेक्ट करें #
संग्रहीत मान कुंजियों के साथ एक सरणी है top, right, bottom, left, unit, और isLinkedसीएसएस पैनल में, सभी चार पक्षों को बाहर वर्तनी और प्रत्येक के बाद इकाई को दोहराएंः
.price-card {
padding: {{ pad.top }}{{ pad.unit }} {{ pad.right }}{{ pad.unit }} {{ pad.bottom }}{{ pad.unit }} {{ pad.left }}{{ pad.unit }};
}प्रत्येक तरफ 24 और चयनित पीएक्स के साथ, नियम इस प्रकार प्रस्तुत होता है padding: 24px 24px 24px 24px;पैनल में पक्षों को अनलिंक करें और प्रत्येक टोकन अपनी संख्या वहन करता है एक ही पैटर्न कवर करता है margin और, प्रति कोने अगल-बगल, border-radiusएक सीएसएस विचित्र याद रखने योग्य अगर आप एक इकाई के रूप में% की पेशकश: प्रतिशत पैडिंग तत्व की चौड़ाई के खिलाफ हल, यहां तक कि ऊपर और नीचे के लिए, और संपादकों कि उम्मीद नहीं होगी।
बाहर देखो: बिल्डर के चयनकर्ता क्षेत्र एक आयाम नियंत्रण के लिए कोई डिफ़ॉल्ट सीएसएस संपत्ति का उत्सर्जन करता है, इसलिए इसे भरने से कुछ भी नहीं होता है ऊपर के रूप में सीएसएस पैनल में पक्षों को लिखें, या पूर्ण चयनकर्ता प्रविष्टियों को परिभाषित करें जिसमें पूरी संपत्ति शामिल है; सादा चयनकर्ता विकल्प इस क्षेत्र के लिए शॉर्टकट नहीं है।
एलिमेंटर में आयाम नियंत्रण का उपयोग करें #
एलिमेंटर में एक पृष्ठ पर अपने कस्टम विजेट को छोड़ दें, या संपादक को फिर से लोड करें यदि पृष्ठ पहले से ही खुला था, तो नए नियंत्रण कभी भी बासी संपादक टैब में दिखाई नहीं देते हैं नियंत्रण चार इनपुट, यूनिट स्विचर और इसके कोने में लिंक आइकन के साथ दिखाई देता है।
लिंक आइकन सक्रिय होने के दौरान किसी भी इनपुट में टाइप करें और सभी चार पक्ष एक साथ अपडेट करें आइकन को अनलिंक करने के लिए क्लिक करें और प्रत्येक पक्ष अपना स्वयं का मूल्य लेता है, जो कि आप असममित पैडिंग प्राप्त करते हैं जैसे कि नीचे की तुलना में एक लंबा उत्तरदायी पर, डिवाइस आइकन प्रति ब्रेकपॉइंट अलग रिक्ति संग्रहीत करता है।
सामान्य उपयोग के मामले #
- कार्ड और बॉक्स पैडिंग, कस्टम विजेट में एकल सबसे आम रिक्ति नियंत्रण।
- अनुभाग और रैपर मार्जिन इसलिए संपादक ब्लॉकों के बीच ऊर्ध्वाधर लय को ट्यून कर सकते हैं।
- प्रति-कोने की सीमा त्रिज्या, चार मानों को भुजाओं के बजाय कोनों के रूप में उपयोग करना।
- बटन पैडिंग, अक्सर क्षैतिज तक सीमित अनुमत आयामों के साथ।
- मीडिया ऑफसेट, मार्जिन मानों के साथ किसी छवि या बैज को धक्का देना।
आयाम क्षेत्र के साथ काम करने के लिए युक्तियाँ #
- हर पक्ष और इकाई का उच्चारण करें। सीएसएस पैनल कनेक्शन चार टोकन और चार यूनिट टोकन है; एक नंगे
{{ pad }}प्रिंट कुछ भी प्रयोग करने योग्य नहीं है। - सादा चयनकर्ता फ़ील्ड छोड़ें। यह आयाम के लिए कोई संपत्ति उत्सर्जित नहीं करता है सीएसएस पैनल, या एक पूर्ण चयनकर्ता प्रविष्टि, कार्य मार्ग है।
- जब संपत्ति इसके लिए कॉल करे तो पक्षों को सीमित करें। एक क्षैतिज-केवल नियंत्रण एक बटन पैडिंग फ़ील्ड को ईमानदार रखता है।
- एक लिंक्ड डिफ़ॉल्ट सेट करें। समान, जुड़े हुए पक्षों से शुरू करने से संपादकों को एक समझदार आधार रेखा और सोचने के लिए एक इनपुट मिलता है।
- अपनी स्टाइलशीट में बेस स्पेसिंग रखें। विजेट को पहली बूंद पर ठीक दिखना चाहिए; फिर नियंत्रण वहां से समायोजित हो जाता है।
- पैडिंग और मार्जिन के लिए उत्तरदायी चालू करें। डेस्कटॉप रिक्ति शायद ही कभी फोन स्क्रीन के साथ संपर्क से बचती है।
अक्सर पूछे जाने वाले प्रश्न #
मास्टर एडॉन्स विजेट बिल्डर में आयाम फ़ील्ड क्या है?
यह एक कस्टम विजेट में एलिमेंटर के चार-तरफा रिक्ति नियंत्रण को जोड़ता है: एक लिंक टॉगल और एक यूनिट स्विचर के साथ शीर्ष, दाएं, नीचे और बाएं इनपुट मूल्य सभी चार पक्षों को स्टोर करता है और यूनिट, और आपका विजेट सीएसएस प्रत्येक टुकड़े को डॉट नोटेशन के साथ प्रिंट करता है, जैसे {{ pad.top }}{{ pad.unit }}.
मैं सीएसएस टैब में आयाम मान कैसे प्रिंट करूं?
सभी चार पक्ष टोकन के साथ संपत्ति लिखें, प्रत्येक के बाद इकाई को दोहराएंः padding: {{ pad.top }}{{ pad.unit }} {{ pad.right }}{{ pad.unit }} {{ pad.bottom }}{{ pad.unit }} {{ pad.left }}{{ pad.unit }};। नियम तब से नियंत्रण को ट्रैक करता है।
चयनकर्ता विकल्प मेरे आयाम फ़ील्ड के लिए कुछ क्यों नहीं करता?
डिज़ाइन के अनुसार, बिल्डर सादे चयनकर्ता फ़ील्ड के माध्यम से आयामों के लिए कोई डिफ़ॉल्ट सीएसएस संपत्ति उत्सर्जित नहीं करता है, क्योंकि इंजेक्ट करने के लिए कोई एकल मान नहीं है। इसके बजाय सीएसएस पैनल टोकन का उपयोग करें, या पूर्ण चयनकर्ता प्रविष्टियों को परिभाषित करें जिनमें पूर्ण घोषणा शामिल है।
क्या मैं केवल बाएँ और दाएँ इनपुट दिखा सकता हूँ?
हाँ। “horizontal” के लिए अनुमत आयाम सेट करें और केवल बाएँ और दाएँ इनपुट प्रस्तुत करें। “Vertical” ऊपर और नीचे के लिए भी ऐसा ही करता है, और एक कस्टम सूची किसी भी विशिष्ट पक्ष को चुन सकती है।
नियंत्रण पर लिंक आइकन क्या करता है?
लिंक करते समय, एक पक्ष को संपादित करना सभी चार को एक ही संख्या लिखता है, और संग्रहीत मूल्य रिकॉर्ड जो राज्य को जोड़ता है अनलिंकिंग प्रत्येक पक्ष को अपनी संख्या रखने देता है, जो चार सीएसएस टोकन स्वतंत्र रूप से प्रिंट करते हैं।
क्या आयाम क्षेत्र सीमा-त्रिज्या के लिए काम करता है?
हाँ। सीमा त्रिज्या नियंत्रण द्वारा प्रदान किए गए समान क्रम में चार मान लेती है, इसलिए border-radius: {{ rad.top }}{{ rad.unit }} {{ rad.right }}{{ rad.unit }} {{ rad.bottom }}{{ rad.unit }} {{ rad.left }}{{ rad.unit }}; प्रत्येक इनपुट को एक कोने में मैप करता है।
लपेटकर #
विजेट बिल्डर आयाम क्षेत्र पैडिंग, मार्जिन और त्रिज्या निर्णयों को आपकी स्टाइलशीट से बाहर और पैनल में ले जाता है: एक नियंत्रण, चार पक्ष, एक इकाई, सभी सीएसएस टैब में नाम से मुद्रित होते हैं, सीएसएस टैब के बगल में इसका उपयोग करें स्लाइडर फील्ड, जो एकल-मूल्य लंबाई को कवर करता है, चार-तरफा नियंत्रण के लिए ओवरकिल होगा। बाकी का अन्वेषण करें मास्टर ऐडऑन विजेट और एक्सटेंशन, और देखें मूल्य निर्धारण पृष्ठ प्रत्येक योजना में क्या शामिल है।
