द संख्या फ़ील्ड एक कस्टम विजेट के पैनल में एक सादा संख्यात्मक इनपुट जोड़ता है कॉलम की गणना, पिक्सेल चौड़ाई, प्रति स्लाइड आइटम, स्टार रेटिंग: कोई भी सेटिंग जो केवल एक संख्या के रूप में समझ में आती है यहां से संबंधित है मास्टर एडॉन्स के अंदर विजेट बिल्डर, आप अनुमत सीमा को एक बार सेट करते हैं और संपादक को एक इनपुट मिलता है जो केवल इसके भीतर संख्याओं को स्वीकार करता है।
संख्या फ़ील्ड समर्थन करता है शर्तों किसी अन्य क्षेत्र के आधार पर नियंत्रण दिखाने या छिपाने के लिए, और इसका टोकन बिल्डर के माध्यम से प्रस्तुत करता है ट्विग-सिंटैक्स टेम्पलेट इंजन, जहां संख्यात्मक तुलनाएं पसंद हैं {% if price > 0 %} बॉक्स से बाहर काम करें दोनों गाइड सेटअप और सीमाओं को कवर करते हैं।
मान टेम्पलेट टोकन के माध्यम से आपके विजेट से जुड़ता है लिखें {{ your_field_name }} एचटीएमएल, सीएसएस, या जेएस पैनल में और संख्या रेंडर समय पर वहां प्रिंट करती है एक नियंत्रण एक ही समय में मार्कअप, स्टाइल और स्क्रिप्ट व्यवहार को चला सकता है।
संख्या फ़ील्ड क्या करता है #
- ब्राउज़र स्पिनर तीर के साथ, विजेट के एलिमेंटर पैनल में एक संख्यात्मक इनपुट प्रदान करता है।
- के माध्यम से एक सीमा लागू करता है मिन, अधिकतम, और कदम बिल्डर में आपके द्वारा परिभाषित विकल्प।
- आप जहां भी कोई सादा नंबर रखते हैं उसे आउटपुट करता है
{{ token }}HTML, CSS, या JS पैनल में। - तुलना में काम करता है, इसलिए टेम्पलेट के साथ शाखा कर सकते हैं
{% if my_number > 3 %}. - वैकल्पिक वायरिंग के रूप में एलिमेंट के चयनकर्ता तंत्र का समर्थन करता है, मूल्य को सीधे सीएसएस नियम में लिखता है।
बिल्डर के साथ पहले कभी विजेट नहीं बनाया? द विजेट बिल्डर अवलोकन संपादक के माध्यम से ही चलता है और व्यक्तिगत क्षेत्रों में जाने से पहले दस मिनट के लायक है।
इससे पहले कि आप शुरू करें #
- वर्डप्रेस साथ तत्व स्थापित और सक्रिय।
- एलिमेंट के लिए मास्टर ऐडऑन स्थापित और सक्रिय प्लगइन के लिए नया देखें स्थापना गाइड.
- विजेट बिल्डर संपादक में एक कस्टम विजेट खुला हमारा उदाहरण एक क्लाइंट लोगो हिंडोला है जहां एक नंबर फ़ील्ड का नाम दिया गया है
logos_per_slideनियंत्रित करता है कि एक साथ कितने लोगो दिखाई देते हैं।
नंबर फ़ील्ड कैसे जोड़ें #
खींचना नंबर फ़ील्ड पैनल से नीचे एक अनुभाग में फ़ील्ड करें सामग्री या शैली टैब जैसे ही यह लैंड करता है, बिल्डर के बाईं ओर मैदान के विकल्प खुल जाते हैं।
संख्या फ़ील्ड विकल्पों की व्याख्या की गई #
- लेबलः एलिमेंटर में इनपुट के आगे दिखाया गया पाठ, उदाहरण के लिए “Logos प्रति स्लाइड”।
- नाम: आपके टेम्प्लेट जिस विशिष्ट पहचानकर्ता को संदर्भित करते हैं। उदाहरण के लिए, केवल अक्षर, संख्याएँ और अंडरस्कोर
logos_per_slide. - डिफ़ॉल्टः विजेट जिस नंबर से शुरू होता है वह एक ताजा बूंद पर होता है।
- प्लेसहोल्डर: इनपुट खाली होने पर संकेत पाठ दिखाया गया है।
- न्यूनतम/अधिकतम: इनपुट द्वारा स्वीकार किए जाने वाले निम्नतम और उच्चतम मान।
- चरण: उदाहरण के लिए, स्पिनर तीर जिस वृद्धि से चलते हैं
1पूर्ण संख्याओं के लिए या0.5आधे कदम के लिए। - विवरण: नियंत्रण में वैकल्पिक सहायक पाठ।
- लेबल, लेबल ब्लॉक, सेपरेटर दिखाएँः मानक डिस्प्ले टॉगल करता है, साथ ही फ़ील्ड दिखाने की शर्तें केवल तभी होती हैं जब किसी अन्य नियंत्रण का एक निश्चित मान होता है।
नंबर फ़ील्ड को उसके टोकन से कनेक्ट करें #
संख्या फ़ील्ड एक टोकन फ़ील्ड है जहां भी {{ logos_per_slide }} एक पैनल में दिखाई देता है, वर्तमान मूल्य अपनी जगह में प्रिंट करता है सभी तीन पैनल इसे स्वीकार करते हैंः
<!-- HTML panel -->
<div class="logo-track" data-count="{{ logos_per_slide }}">
/* CSS panel */
.logo-track { grid-template-columns: repeat({{ logos_per_slide }}, 1fr); }
.logo-item { min-width: {{ logo_min_width }}px; }
// JS panel
var perSlide = {{ logos_per_slide }};एक चीज़ जो यहाँ चुपचाप विफल हो जाती है: एक खाली फ़ील्ड एक खाली स्ट्रिंग प्रिंट करती है, और repeat(, 1fr) मान्य सीएसएस नहीं है, इसलिए ब्राउज़र शिकायत के बिना पूरे नियम को छोड़ देता है यदि टोकन सीएसएस या जेएस अभिव्यक्ति को खिलाता है, तो एक डिफ़ॉल्ट सेट करें ताकि एक ताजा विजेट कभी भी इसमें छेद के साथ प्रस्तुत न हो।
क्योंकि मूल्य एक संख्या है, तुलना टेम्पलेट तर्क में काम करती है एक हिंडोला अपने नेविगेशन तीर छोड़ सकता है जब सब कुछ पहले से ही एक स्लाइड पर फिट बैठता हैः
{% if logos_per_slide > 4 %}
<button class="logo-nav">→</button>
{% endif %}यह क्षेत्र एलिमेंटर्स का भी समर्थन करता है चयनकर्ताओं एक विकल्प के रूप में तारों ध्यान दें कि संख्या के लिए, एलिमेंटर एक पूर्ण घोषणा के बजाय नंगे मूल्य को इंजेक्ट करता है, इसलिए चयनकर्ताओं की प्रविष्टि को पूरी संपत्ति का उच्चारण करना चाहिए, उदाहरण के लिए width: {{VALUE}}px;.
सावधान रहें: जब टोकन सीएसएस या जेएस अभिव्यक्ति के अंदर उतरता है, तो यूनिट को ब्रेसिज़ के बाहर रखें। width: {{ logo_min_width }}px काम करता है; फ़ील्ड से अपनी इकाई ले जाने की अपेक्षा करना नहीं है, क्योंकि मान एक नंगे नंबर है यदि आपको इकाई चुनने के लिए संपादक की भी आवश्यकता है, तो स्लाइडर फ़ील्ड बेहतर फिट है।
एलिमेंट में नंबर कंट्रोल का उपयोग करें #
एलिमेंटर में एक पृष्ठ पर अपने कस्टम विजेट को ड्रॉप करें (यदि पृष्ठ पहले से ही खुला था तो संपादक को पहले पुनः लोड करें) संख्या फ़ील्ड आपके द्वारा सेट किए गए लेबल के तहत स्पिनर तीर के साथ एक छोटे इनपुट के रूप में दिखाई देता है एक मान टाइप करें या तीर पर क्लिक करें पूर्वावलोकन लाइव अपडेट करता है, और न्यूनतम/अधिकतम सीमा के बाहर के मान इनपुट द्वारा ही अस्वीकार कर दिए जाते हैं।
सामान्य उपयोग के मामले #
- कॉलम और आइटम मायने रखता है सीएसएस ग्रिड या फ्लेक्स नियम में मुद्रित।
- हिंडोला सेटिंग्स जैसे कि प्रति दृश्य स्लाइड या ऑटोप्ले विलंब, जेएस पैनल द्वारा पढ़ा गया।
- पिक्सेल और प्रतिशत मान जहां एक इकाई विजेट द्वारा तय की जाती है, जैसे एक निश्चित इकाई की चौड़ाई या अंतराल।
- रेटिंग और स्कोर कि टेम्प्लेट की तुलना थ्रेसहोल्ड से की जाती है।
- सीमाएं जैसे “शो अधिक से अधिक एन पोस्टएस”, विजेट की स्क्रिप्ट में पारित हो गया।
संख्या फ़ील्ड के साथ काम करने के लिए युक्तियाँ #
- मिन और मैक्स सेट करें। 0 या 40 की कॉलम गिनती अधिकांश लेआउट को तोड़ देगी; बिल्डर में इनपुट को बाउंड करना टेम्पलेट में गार्ड करने की तुलना में सस्ता है।
- मूल्य के अर्थ के लिए मैच चरण। पूरे आइटम मिलते हैं
1; अपारदर्शिता-शैली मान मिलते हैं0.1. - एक समझदार डिफ़ॉल्ट भेजें तो विजेट सही ढंग से प्रस्तुत करता है पल यह गिरा दिया है।
- संख्याओं के विरुद्ध तुलना करें, लेबल के विरुद्ध नहीं।
{% if logos_per_slide > 4 %}मान्य टेम्पलेट तर्क है; इसके विपरीत, यहां तुलना करने के लिए कोई विकल्प लेबल नहीं है फ़ील्ड चुनें. - चयनकर्ताओं की प्रविष्टियों में पूर्ण घोषणाएँ। यदि आप टोकन के बजाय चयनकर्ता विकल्प के माध्यम से फ़ील्ड को वायर करते हैं, तो पूरी संपत्ति लिखें, क्योंकि एलिमेंटर संख्या के लिए केवल नंगे मान को इंजेक्ट करता है।
अक्सर पूछे जाने वाले प्रश्न #
मास्टर एडॉन्स विजेट बिल्डर में नंबर फ़ील्ड क्या है?
संख्या फ़ील्ड एक कस्टम एलिमेंटर विजेट के पैनल में एक संख्यात्मक इनपुट जोड़ता है, जिसमें न्यूनतम, अधिकतम, चरण, डिफ़ॉल्ट और प्लेसहोल्डर विकल्प होते हैं इसका मान एक के माध्यम से प्रिंट होता है {{ token }} विजेट के HTML, CSS, या JS पैनल और टेम्प्लेट लॉजिक में इसकी तुलना ऑपरेटरों से की जा सकती है > और ==.
क्या मैं सीएसएस पैनल में नंबर फ़ील्ड के मान का उपयोग कर सकता हूं?
हाँ। उदाहरण के लिए, टोकन को किसी भी नियम के अंदर रखें grid-template-columns: repeat({{ columns }}, 1fr); या width: {{ box_width }}px;। इकाई को स्वयं लिखना याद रखें, क्योंकि फ़ील्ड केवल संख्या संग्रहीत करती है।
मैं जावास्क्रिप्ट में मूल्य कैसे पढ़ूं?
जेएस पैनल में सीधे टोकन प्रिंट करेंः var perSlide = {{ logos_per_slide }};। नंबर चलने से पहले स्क्रिप्ट में प्रस्तुत किया जाता है, इसलिए किसी DOM लुकअप की आवश्यकता नहीं होती है।
क्या टेम्पलेट मूल्य पर शाखा कर सकता है?
हाँ। सशर्त तुलना स्वीकार करते हैंः {% if my_number > 3 %} ... {% endif %}के साथ-साथ <, >=, <=, ==, और !=। यह नेविगेशन, बैज या सीमा से नीचे अतिरिक्त मार्कअप छिपाने के लिए उपयोगी है।
यदि उपयोगकर्ता मिन और मैक्स के बाहर कोई मान टाइप करता है तो क्या होगा?
इनपुट रेंज को लागू करता है, इसलिए आउट-ऑफ-रेंज मान टेम्पलेट तक नहीं पहुंचते हैं विजेट के लेआउट को बरकरार रखने के लिए बिल्डर में मिन और मैक्स सेट करें।
मुझे नंबर के बजाय स्लाइडर का उपयोग कब करना चाहिए?
स्लाइडर फ़ील्ड का उपयोग करें जब संपादक को इकाई (पीएक्स,%, ईएम) भी चुनना चाहिए या एक सीमा के भीतर एक हैंडल खींचें; इसका मान एक आकार और एक इकाई दोनों को वहन करता है जब एक नंगे नंबर पर्याप्त होता है और आप टेम्पलेट में इकाई को नियंत्रित करते हैं तो संख्या का उपयोग करें।
लपेटकर #
विजेट बिल्डर नंबर फ़ील्ड सटीक काम करता है: एक बाउंडेड न्यूमेरिक इनपुट, एक टोकन, और जहां भी विजेट को इसकी आवश्यकता होती है, वहां मूल्य भूमि, मार्कअप, शैलियों या स्क्रिप्ट के साथ इसे जोड़ दें स्विचर फ़ील्ड चालू/बंद व्यवहार के लिए और पुनरावर्तक क्षेत्र जब गिनती एक सेटिंग के बजाय वास्तविक वस्तुओं से आनी चाहिए बाकी का अन्वेषण करें मास्टर ऐडऑन विजेट और एक्सटेंशन, और देखें मूल्य निर्धारण पृष्ठ प्रत्येक योजना में क्या शामिल है।
