नंबर

नंबर फ़ील्ड आपके द्वारा मास्टर ऐडऑन के साथ बनाए गए कस्टम विजेट में एक संख्यात्मक इनपुट जोड़ता है विजेट बिल्डरकॉलम की गिनती, फ़ॉन्ट आकार, प्रति पंक्ति आइटम, स्टार रेटिंग: कुछ भी जो केवल एक संख्या के रूप में समझ में आता है यहां से संबंधित है आप बिल्डर में अनुमत सीमा निर्धारित करते हैं, और संपादकों को एक इनपुट मिलता है जो उन्हें इसके अंदर रखता है।

संख्या उन क्षेत्रों में से एक है जिन्हें आप मुफ्त संस्करण के विजेट बिल्डर में उपयोग कर सकते हैं मुफ्त प्लगइन में एक सीमित विजेट बिल्डर शामिल है, और फ़ील्ड का पूरा सेट आता है मास्टर एडॉन्स प्रो.

संख्या फ़ील्ड क्या करता है #

• एलिमेंटर में आपके विजेट के पैनल में स्पिनर तीर के साथ एक संख्यात्मक इनपुट जोड़ता है।
• संपादकों के माध्यम से क्या प्रवेश कर सकते हैं, इसे सीमित करता है मिन, अधिकतम और कदम.
• HTML, CSS या JS पैनल में आप जहां भी नंबर का टोकन रखते हैं उसे प्रिंट करता है।
• तुलना में काम करता है, इसलिए {% if columns > 2 %} मार्कअप का हिस्सा स्विच कर सकते हैं।

बिल्डर के लिए नया? पढ़ें विजेट बिल्डर अवलोकन सबसे पहले, फिर एक विजेट खुला के साथ वापस आओ।

इससे पहले कि आप शुरू करें #

• एलिमेंटर स्थापित और सक्रिय के साथ वर्डप्रेस।
• एलिमेंटर के लिए मास्टर ऐडऑन स्थापित और सक्रिय हैं। द स्थापना गाइड सेटअप को कवर करता है।
• विजेट बिल्डर में एक विजेट खुला इस गाइड में उदाहरण दो नंबर फ़ील्ड के साथ एक “स्टैट काउंटर” विजेट हैः columns (1 से 4) सामग्री टैब पर और stat_size (20 से 96) स्टाइल टैब पर।

नंबर फ़ील्ड कैसे जोड़ें #

1. को जा मास्टर ऐडऑन > विजेट बिल्डर और अपना विजेट खोलें।
2. टैब पर एक अनुभाग जोड़ें सेटिंग पर है एक लेआउट गिनती फिट बैठता है सामग्री, एक आकार फिट बैठता है शैली.
3. प्रकार number बाईं ओर फ़ील्ड खोज बॉक्स में।
4. खींचना नंबर अनुभाग में इसकी सेटिंग्स खोलने के लिए मैदान पर पेंसिल पर क्लिक करें।

संख्या फ़ील्ड विकल्पों की व्याख्या की गई #

• लेबलः एलिमेंटर में इनपुट के बगल में पाठ, उदाहरण के लिए “कॉलम”।
• नाम: क्षेत्र की विशिष्ट आईडी और इसके टोकन का नाम उदाहरण के लिए, केवल अक्षरों, संख्याओं और अंडरस्कोर का उपयोग करें columns.
• विवरण: एलिमेंट में इनपुट के तहत दिखाया गया एक संकेत बताएं कि संख्या क्या नियंत्रित करती है और, यदि यह मायने रखता है, तो इकाई।
• प्लेसहोल्डर: इनपुट खाली होने पर ग्रे टेक्स्ट दिखाया गया।
• मिन और अधिकतम: इनपुट द्वारा स्वीकार किए जाने वाले निम्नतम और उच्चतम मान।
• चरण: स्पिनर तीर प्रत्येक क्लिक को कितनी दूर ले जाते हैं पूर्ण संख्याओं के लिए १, सम संख्याओं के लिए २, आधे चरणों के लिए ०.५ का उपयोग करें।
• डिफ़ॉल्ट मानः विजेट की एक नई प्रति जिस संख्या से शुरू होती है।

न्यूनतम, अधिकतम और चरण इनपुट तक ही पहुंचते हैं हमारे परीक्षणों में कॉलम फ़ील्ड न्यूनतम १, अधिकतम ४ और चरण १ के साथ एक संख्या इनपुट के रूप में एलिमेंटर में पहुंचे, इसलिए तीर सीमा के सिरों पर रुकते हैं।

सामान्य सेटिंग्स अन्य क्षेत्रों की तरह ही काम करती हैं, जिनमें शामिल हैं शर्तों यदि संख्या केवल तभी दिखाई देनी चाहिए जब कोई अन्य फ़ील्ड सेट हो।

अपने टेम्पलेट में नंबर प्रिंट करें #

टोकन सभी तीन पैनलों में काम करता है स्टेट काउंटर विजेट में, एचटीएमएल एक डेटा विशेषता में मूल्य डालता है और तुलना में इसका उपयोग करता हैः

<div class="stats-grid" data-columns="{{ columns }}">
  ...
</div>
{% if columns > 2 %}
<p class="stats-note">Tip: drop to two columns for a narrower layout.</p>
{% endif %}

सीएसएस पैनल वह जगह है जहां एक संख्या क्षेत्र आमतौर पर अपने रखने के लिए कमाता है इकाई को ब्रेसिज़ के बाहर रखो, क्योंकि क्षेत्र एक नंगे नंबर को संग्रहीत करता हैः

.stats-grid { grid-template-columns: repeat({{ columns }}, 1fr); }
.stat-value { font-size: {{ stat_size }}px; }

उदाहरण के लिए, जेएस पैनल में भी यही टोकन काम करता है var perRow = {{ columns }};.

प्रत्येक संख्या फ़ील्ड को एक डिफ़ॉल्ट मान दें #

एक खाली फ़ील्ड कुछ भी प्रिंट नहीं करता है, और वह चुपचाप इसके चारों ओर नियम को तोड़ देता है कॉलम फ़ील्ड साफ़ होने के साथ, हमारा सीएसएस बन गया repeat(, 1fr), जो ब्राउज़र गिर जाते हैं, और ग्रिड वापस एक कॉलम में गिर जाता है। द {% if columns > 2 %} चेक ने एक ही समय में मिलान बंद कर दिया पैनल में कुछ भी आपको चेतावनी नहीं देता है।

इसलिए सीएसएस या जावास्क्रिप्ट को फीड करने वाले किसी भी नंबर फ़ील्ड पर एक डिफ़ॉल्ट मान सेट करें, और यदि संपादक इसे साफ़ कर सकते हैं तो अपने टेम्पलेट में यथासंभव खाली मान का इलाज करें।

चयनकर्ता को नंबर फ़ील्ड पर खाली छोड़ दें #

चयनकर्ता बॉक्स इस क्षेत्र के लिए अजीब व्यवहार करता है, और हमारे परीक्षणों में इसने एक साथ दो समस्याएं पैदा कींः

• इसने बिना किसी संपत्ति के नाम के नियम में नंगे नंबर को लिखा, इसलिए इससे कोई उपयोगी सीएसएस नहीं निकला।
• जब एक चयनकर्ता भर गया, तो फ़ील्ड का डिफ़ॉल्ट मान टोकन तक पहुंचना बंद हो गया। एक विजेट जिसे किसी ने छुआ नहीं था, प्रस्तुत किया गया font-size:px सामने के छोर पर चयनकर्ता को साफ़ करने से इसे ठीक किया गया, और वही अछूता विजेट प्रस्तुत किया गया font-size:44px.

इसके बजाय सीएसएस पैनल में टोकन प्रिंट करें, जैसा कि ऊपर दिखाया गया है कि डिफ़ॉल्ट काम करता रहता है और आपको संपत्ति और इकाई को स्वयं लिखने देता है।

एलिमेंट में नंबर कंट्रोल का उपयोग करें #

विजेट को किसी पृष्ठ पर जोड़ें, या संपादक को फिर से लोड करें यदि पृष्ठ पहले से ही खुला था प्रत्येक संख्या फ़ील्ड अपने लेबल के तहत एक छोटे इनपुट के रूप में दिखाता है, उस टैब पर जहां आपने इसे रखा था एक मान टाइप करें या तीर का उपयोग करें, और पूर्वावलोकन अपडेट।

यहां चार कॉलम पर और दो कॉलम पर एक ही विजेट है जिसमें बड़ी संख्या का आकार हैः

सामान्य उपयोग के मामले #

• ग्रिड और हिंडोले में कॉलम या आइटम की गिनती होती है।
• फ़ॉन्ट आकार, रिक्ति मान और पिक्सेल में चौड़ाई।
• स्टार रेटिंग, समीक्षा स्कोर और प्रतिशत।
• स्क्रिप्ट पढ़ने की गणना और गति करता है, जैसे प्रति स्लाइड आइटम या ऑटोप्ले विलंब।

संख्या फ़ील्ड के साथ काम करने के लिए युक्तियाँ #

• हमेशा एक डिफ़ॉल्ट मान सेट करें। यह एक कार्यशील विजेट और चुपचाप टूटे हुए नियम के बीच का अंतर है।
• मिन और मैक्स को सेट करें कि डिज़ाइन क्या ले सकता है। चार स्तंभों के लिए निर्मित ग्रिड को 12 को स्वीकार नहीं करना चाहिए।
• इकाई को लेबल या विवरण में रखें, जैसे कि “Number साइज़” “in पिक्सेल” के साथ, क्योंकि फ़ील्ड एक सादा संख्या संग्रहीत करता है।
• यूनिट को टोकन के बाहर रखें सीएसएस मेंः {{ stat_size }}px, ब्रेसिज़ के अंदर नहीं।
• इसके बजाय इकाइयों के साथ एक स्लाइडर चाहते हैं? द स्लाइडर फील्ड एक प्रो फ़ील्ड है जो संपादकों को ड्रैग हैंडल देता है।

अक्सर पूछे जाने वाले प्रश्न #

लपेटकर #

एक नंबर फ़ील्ड जोड़ें, न्यूनतम, अधिकतम, चरण और एक डिफ़ॉल्ट मान सेट करें, फिर टोकन प्रिंट करें जहां आपको इसकी आवश्यकता है और इकाई को स्वयं जोड़ें चयनकर्ता को खाली छोड़ दें ताकि डिफ़ॉल्ट काम करता रहे इकाई विकल्पों के साथ ड्रैग हैंडल के लिए, देखें स्लाइडर फील्ड, और जाँच करें मूल्य निर्धारण प्रत्येक योजना में क्या शामिल है।