स्लाइडर

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

स्लाइडर फ़ील्ड समर्थन करता है शर्तों प्रत्येक नियंत्रण की तरह, और चूँकि इसका मान संख्यात्मक है, ट्विग-सिंटैक्स टेम्पलेट इंजन आपको तुलनाओं के साथ इस पर शाखा लगाने की सुविधा देता है {% if columns >= 3 %}। दोनों गाइड सेटअप और सीमाओं को कवर करते हैं।

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

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

• एक रेंज स्लाइडर प्रदान करता है एक ड्रैग करने योग्य हैंडल और उसके बगल में एक संख्यात्मक इनपुट के साथ, एलिमेंटर के मूल स्लाइडर नियंत्रणों से मेल खाता है।
• एक यूनिट स्विचर प्रदान करता है जब आप एक से अधिक इकाइयों की अनुमति देते हैं, तो वही नियंत्रण px, %, या em में काम कर सकता है।
• एक आकार और एक इकाई को एक साथ संग्रहीत करता है एक मान के रूप में आपका सीएसएस पैनल डॉट नोटेशन के साथ पढ़ता है।
• उत्तरदायी मूल्यों का समर्थन करता है, उपयोगकर्ताओं को डिवाइस आइकन से प्रति डिवाइस एक अलग आकार सेट करने देता है।
• गतिशील मूल्यों को स्वीकार करता है और सीएसएस पैनल के विकल्प के रूप में एलिमेंट के चयनकर्ता तंत्र के माध्यम से सीएसएस लिख सकते हैं।

विजेट बनाने में नया? पढ़ें विजेट बिल्डर अवलोकन पहला; यह दस्तावेज़ मानता है कि आपके संपादक में पहले से ही एक विजेट खुला है।

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

• वर्डप्रेस साथ तत्व स्थापित और सक्रिय।
• एलिमेंट के लिए मास्टर ऐडऑन स्थापित और सक्रिय प्लगइन के लिए नया? देखना स्थापना गाइड.
• विजेट बिल्डर संपादक में एक कस्टम विजेट खुला हमारा उदाहरण एक टीम कार्ड ग्रिड है जिसका .team-row कंटेनर को कार्डों के बीच उपयोगकर्ता-समायोज्य अंतर की आवश्यकता होती है।

स्लाइडर फ़ील्ड कैसे जोड़ें #

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

इसे नीचे एक अनुभाग में खींचें शैली टैब, जहां आकार नियंत्रण आमतौर पर रहते हैं, हालांकि सामग्री और उन्नत काम भी एक बार जब यह भूमि, क्षेत्र के विकल्प बाईं ओर खुले।

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

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

स्लाइडर को अपने सीएसएस से कनेक्ट करें #

एक स्लाइडर का मान दो कुंजियों के साथ एक सरणी हैः size और unitअपने स्वयं के आउटपुट पर फ़ील्ड नाम प्रिंट करना कुछ भी नहीं है, क्योंकि प्रिंट करने के लिए कोई एकल मूल्य नहीं है सीएसएस पैनल में, हमेशा डॉट नोटेशन के साथ दोनों भागों लिखेंः

.team-row {
  gap: {{ my_gap.size }}{{ my_gap.unit }};
}

पीएक्स चयनित रेंडर के साथ 24 का मान इस प्रकार है gap: 24px;। यूनिट स्विचर को % में बदलें और वही नियम बन जाता है gap: 24%; साँचे को छुए बिना।

सावधान रहें: {{ my_gap }} अपने आप पर एक खाली स्ट्रिंग प्रिंट करता है यदि आपका नियम इस प्रकार प्रस्तुत करता है gap: ; और लेआउट नियंत्रण को अनदेखा करता है, गायब है .size और .unit लगभग हमेशा क्यों हैं एक ही चुप्पी एक नाम बदलने के बाद होती है: बाद में क्षेत्र का नाम बदलें और पुराने टोकन प्रतिपादन करते रहें, बस उनमें कुछ भी नहीं है, इसलिए उसी बैठक में सीएसएस पैनल को अपडेट करें।

चयनकर्ताओं का विकल्प #

स्लाइडर एलिमेंट के चयनकर्ता तंत्र के साथ भी काम करते हैं, जो सीएसएस पैनल के माध्यम से जाने के बजाय आपके लिए सीएसएस लिखता है एक स्लाइडर के लिए, एलिमेंट पूर्ण घोषणा के बजाय एक नंगे मूल्य को इंजेक्ट करता है, इसलिए बिल्डर के सादे चयनकर्ता क्षेत्र अकेले एक प्रयोग करने योग्य नियम का उपयोग करते हुए, एक कस्टम चयनकर्ता प्रविष्टि को पूरी संपत्ति ले जाना पड़ता हैः

'{{WRAPPER}} .team-row' => 'gap: {{SIZE}}{{UNIT}};'

अधिकांश विजेट्स के लिए सीएसएस पैनल टोकन सरल मार्ग है; जब आप चाहते हैं कि एलिमेंटर आउटपुट का प्रबंधन करे तो चयनकर्ता प्रविष्टियों तक पहुंचें।

एलिमेंटर में स्लाइडर नियंत्रण का उपयोग करें #

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

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

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

• ग्रिड और फ्लेक्स अंतराल कार्ड, कॉलम या गैलरी आइटम के बीच।
• तत्व की चौड़ाई और ऊंचाई, जैसे छवि आकार या विभाजक लंबाई, द्रव लेआउट के लिए % विकल्प के साथ।
• सीमा त्रिज्या कार्ड और बटन पर जब एक समान त्रिज्या पर्याप्त हो।
• चिह्न और फ़ॉन्ट आकार जहां एक ईएम इकाई आसपास के पाठ के सापेक्ष चीजों को रखती है।
• रिक्ति ऑफसेट जैसे बैज और उसके कोने के बीच की दूरी।

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

• हमेशा दोनों भागों को प्रिंट करें। {{ my_gap.size }}{{ my_gap.unit }} संपूर्ण कनेक्शन है; नंगे फ़ील्ड का नाम आपको एक खाली स्ट्रिंग देता है।
• मिन, मैक्स और स्टेप को संपत्ति से मिलाएं। 1 के चरणों में 0,100 की सीमा एक अंतराल के अनुरूप होती है; त्रिज्या नियंत्रण के लिए केवल 0,50 की आवश्यकता हो सकती है।
• केवल उन इकाइयों की पेशकश करें जो समझ में आती हैं। केवल पीएक्स नियंत्रण उस नियंत्रण से अधिक स्पष्ट है जहां % टूटे हुए लेआउट उत्पन्न करता है।
• सीएसएस पैनल संरचना में एक फ़ॉलबैक रखें। नियम लिखें ताकि विजेट अभी भी पहली बूंद पर डिफ़ॉल्ट मान पर समझदारी से काम ले सके।
• लेआउट मानों के लिए उत्तरदायी चालू करें। अंतराल और चौड़ाई को लगभग हमेशा एक सख्त मोबाइल सेटिंग की आवश्यकता होती है।
• चयनकर्ता फ़ील्ड पर सीएसएस पैनल टोकन को प्राथमिकता दें। सादा चयनकर्ता फ़ील्ड स्लाइडर्स के लिए केवल एक नंगे मान को इंजेक्ट करता है, जो पूर्ण घोषणा नहीं है।

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

लपेटकर #

विजेट बिल्डर स्लाइडर फ़ील्ड आपके विजेट में किसी भी एकल सीएसएस लंबाई को एक नियंत्रण में बदल देता है जिसे संपादक खींच सकता है: फ़ील्ड का नाम दें, रेंज को बाध्य करें और प्रिंट करें {{ name.size }}{{ name.unit }} सीएसएस पैनल में। यह स्वाभाविक रूप से के साथ जुड़ता है आयाम क्षेत्र जब एक विजेट को एकल मानों के साथ चार-तरफा रिक्ति की आवश्यकता होती है बाकी का अन्वेषण करें मास्टर ऐडऑन विजेट और एक्सटेंशन, और देखें मूल्य निर्धारण पृष्ठ प्रत्येक योजना में क्या शामिल है।