द टैब क्षेत्र पैनल टैब में एक विजेट के नियंत्रण को व्यवस्थित करता है, वही संरचना एलिमेंटर के स्वयं के विजेट सामान्य और होवर राज्य स्टाइल के लिए उपयोग करते हैं मास्टर एडॉन्स के अंदर विजेट बिल्डर, आप टैब को परिभाषित करते हैं, प्रत्येक में चाइल्ड कंट्रोल रखते हैं, और एलिमेंटर पैनल उन्हें फ़ील्ड के एक लंबे स्क्रॉल के बजाय एक कॉम्पैक्ट टैब स्ट्रिप के रूप में प्रस्तुत करता है।
टैब नियंत्रण समर्थन करता है शर्तों हर क्षेत्र की तरह, और उसके बच्चों को पढ़ा जाता है ट्विग-सिंटैक्स टेम्पलेट इंजन तीन-भाग वाले टोकन के साथ, {{ tabs.tab_1.field }}, कोई लूप आवश्यक नहीं है दोनों गाइड विवरण और सीमाओं को कवर करते हैं।
टैब एक संरचनात्मक क्षेत्र है यह अपने स्वयं के कोई मूल्य नहीं रखता है, मूल्यों को बच्चों से संबंधित है, और आपका टेम्पलेट प्रत्येक को एक नेस्टेड पथ के माध्यम से पढ़ता है जो टैब फ़ील्ड, टैब और इसके अंदर के क्षेत्र को नाम देता है कोई लूप नहीं, कोई चाल नहीं, बस पते।
टैब्स फ़ील्ड क्या करता है #
- एक टैब पट्टी प्रस्तुत करता है विजेट के पैनल में, एलिमेंट के नियंत्रण टैब तंत्र पर बनाया गया।
- टैब का एक सेट रखता है, प्रत्येक का अपना नाम, लेबल और बाल नियंत्रणों की सूची है।
- संबंधित राज्यों को एक साथ रखता है, क्लासिक पेयरिंग समान सेटिंग्स के सामान्य और होवर संस्करण हैं।
- नेस्टेड रास्तों के माध्यम से बाल मूल्यों को उजागर करता है आपके टेम्पलेट में: टैब फ़ील्ड का नाम, फिर टैब, फिर फ़ील्ड।
- टैब में समान बच्चे के नाम की अनुमति देता है, इसलिए नॉर्मल और होवर एक-दूसरे को साफ-सुथरा दर्पण दे सकते हैं।
यदि आप अभी बिल्डर के साथ शुरुआत कर रहे हैं, तो पढ़ें विजेट बिल्डर अवलोकन इससे पहले एक।
इससे पहले कि आप शुरू करें #
- वर्डप्रेस साथ तत्व स्थापित और सक्रिय।
- एलिमेंट के लिए मास्टर ऐडऑन स्थापित और सक्रिय प्लगइन के लिए नया? देखना स्थापना गाइड.
- विजेट बिल्डर संपादक में एक कस्टम विजेट खुला हमारा उदाहरण एक टैब फ़ील्ड नामक बटन विजेट है
statesएक सामान्य टैब और एक होवर टैब धारण करना, प्रत्येक का नाम एक रंग फ़ील्ड हैbg.
टैब फ़ील्ड कैसे जोड़ें #
विजेट बिल्डर संपादक में, बाईं ओर फ़ील्ड पैनल को तब तक स्क्रॉल करें जब तक आपको यह न मिल जाए टैब फ़ील्ड, पॉपओवर टॉगल और रिपीटर जैसे अन्य संरचनात्मक क्षेत्रों के साथ सूचीबद्ध है।
इसे नीचे एक अनुभाग में खींचें शैली टैब, जहां राज्य स्टाइल रहता है, फिर टैब को परिभाषित करें और प्रत्येक में बच्चे के नियंत्रण को छोड़ दें जैसे ही यह भूमि के बाईं ओर क्षेत्र के विकल्प खुलते हैं।
टैब फ़ील्ड विकल्प समझाया गया #
- लेबलः एलिमेंट में टैब स्ट्रिप के ऊपर दिखाया गया शीर्षक।
- नाम: उदाहरण के लिए, संपूर्ण टैब समूह, अक्षरों, संख्याओं और केवल अंडरस्कोर के लिए विशिष्ट पहचानकर्ता
states। यह प्रत्येक बच्चे के टेम्पलेट पथ का पहला खंड है। - टैब: टैब की सूची प्रत्येक टैब में एक नाम होता है (उदाहरण के लिए टेम्पलेट पथ में उपयोग किया जाता है)
normal), एक लेबल (पट्टी पर दिखाया गया है, उदाहरण के लिए “Normal”), और बाल नियंत्रण का अपना सेट। - बाल नियंत्रण: प्रत्येक टैब के अंदर फ़ील्ड मान फ़ील्ड प्रकार यहां काम करते हैं, और प्रत्येक अपने स्वयं के विकल्प और मूल्य आकार रखता है।
- विवरण, शो लेबल, सेपरेटर और शर्तें हर जगह की तरह ही डिस्प्ले विकल्प हैं।
नेस्टेड पथों के माध्यम से टैब मान पढ़ें #
टैब्स फ़ील्ड के बच्चों को तीन-भाग वाले डॉट पथ से संबोधित किया जाता है: टैब्स फ़ील्ड का नाम, टैब का नाम, फिर चाइल्ड फ़ील्ड का नाम।
{{ tabsname.tabname.fieldname }}टैब पर कोई लूपिंग नहीं है प्रत्येक मान को ठीक से पढ़ा जाता है जहां आपको इसकी आवश्यकता होती है बटन उदाहरण के लिए, ए states सामान्य और होवर टैब के साथ टैब फ़ील्ड, प्रत्येक में एक है bg रंग क्षेत्र, सीएसएस पैनल में तार इस तरहः
.ma-btn {
background: {{ states.normal.bg }};
}
.ma-btn:hover {
background: {{ states.hover.bg }};
}दोनों टैब में बच्चे को समान नाम देना जानबूझकर और समर्थित है आंतरिक रूप से बिल्डर एक काउंटर के साथ डुप्लिकेट कुंजी को डेडअप करता है, लेकिन टेम्पलेट पथ प्रति-टैब रहता है, इसलिए bg में सामान्य और bg होवर में दो अलग-अलग, साफ-सुथरे संबोधित मूल्य बने रहते हैं प्रतिबिंबित नाम लक्ष्य के लिए पैटर्न हैं: जो कोई भी टेम्पलेट पढ़ता है वह सामान्य और होवर नियमों को केवल एक पथ खंड से भिन्न देखता है।
सावधान रहें: फ्लैट टोकन {{ bg }} कुछ भी नहीं करने का संकल्प करता है, और इसलिए दो-भाग करता है {{ normal.bg }}पथ हमेशा टैब फ़ील्ड के स्वयं के नाम से शुरू होता है जब एक टैब मान खाली प्रिंट करता है, तो पहले खंडों की गणना करें टैब का नाम बदलने से पथ उसी मूक तरीके से टूट जाता है; सीएसएस संकलन करता रहता है, मूल्य बस आना बंद हो जाता है, इसलिए नियम लिखने से पहले टैब नामों पर व्यवस्थित करें।
एलिमेंटर में टैब नियंत्रण का उपयोग करें #
एलिमेंटर में एक पृष्ठ पर अपना कस्टम विजेट जोड़ें (या संपादक को फिर से लोड करें यदि पृष्ठ पहले से ही खुला था) टैब पट्टी आपके टैब लेबल के साथ पैनल में प्रस्तुत करती है, और एक टैब पर क्लिक करने से उसके बच्चे के नियंत्रण का पता चलता है।
एक संपादक पहले टैब पर सामान्य पृष्ठभूमि सेट करता है, होवर पर स्विच करता है, और दूसरा रंग सेट करता है पूर्वावलोकन में बटन को होवर करना संक्रमण को तुरंत दिखाता है, क्योंकि दोनों मान पहले से ही विजेट के सीएसएस नियमों में बैठते हैं।
सामान्य उपयोग के मामले #
- सामान्य और होवर स्टाइलिंग बटन, कार्ड और लिंक के लिए, क्लासिक पेयरिंग।
- सक्रिय और निष्क्रिय अवस्थाएँ टॉगल, फ़िल्टर और नेव आइटम के लिए।
- सेटिंग्स से पहले और बाद में तुलना में या विजेट प्रकट करें।
- हल्के और गहरे रंग के वेरिएंट, संपादकों को दोनों योजनाओं को एक अनुभाग से ट्यून करने देना।
- विषम और यहां तक कि पंक्ति स्टाइल सूची और तालिका विजेट में।
टैब्स क्षेत्र के साथ काम करने के लिए युक्तियाँ #
- पूरे तीन-भाग पथ के साथ मूल्यों को संबोधित करें।
{{ states.hover.bg }}काम करता है;{{ bg }}और{{ hover.bg }}नहीं। - टैब में बच्चों के नाम मिरर करें। समान फ़ील्ड, समान नाम, एक भिन्न पथ खंड; टेम्पलेट पठनीय रहता है और टैब तुलनीय रहते हैं।
- टैब नाम छोटा और लोअरकेस रखें। वे टेम्पलेट पहचानकर्ता हैं, इसलिए
normalऔरhover“Tab 1” और “Tab 2” को हराएं। - राज्यों के लिए टैब, विषयों के लिए अनुभाग का उपयोग करें। एक ही सेटिंग्स के दो प्रकार टैब में हैं; असंबंधित सेटिंग्स अलग-अलग अनुभागों में होती हैं।
- याद रखें कि प्रत्येक बच्चा अपने प्रकार का मूल्य आकार रखता है। टैब के अंदर एक स्लाइडर अभी भी इस प्रकार पढ़ता है
{{ states.normal.gap.size }}{{ states.normal.gap.unit }}.
अक्सर पूछे जाने वाले प्रश्न #
मास्टर एडॉन्स विजेट बिल्डर में टैब्स फ़ील्ड क्या है?
यह एक संरचनात्मक क्षेत्र है जो पैनल टैब में एक विजेट के नियंत्रण को विभाजित करता है, एलिमेंट के नियंत्रण टैब तंत्र पर बनाया गया है प्रत्येक टैब अपने स्वयं के बच्चे नियंत्रण रखता है, और टेम्पलेट्स नेस्टेड पथ के माध्यम से प्रत्येक बच्चे को पढ़ते हैंः {{ tabsname.tabname.fieldname }}.
मैं किसी विशिष्ट टैब से मान कैसे पढ़ूं?
पूर्ण डॉट पथ का उपयोग करें: टैब फ़ील्ड का नाम, टैब का नाम, फिर बच्चे का नाम। एक के लिए states होवर टैब युक्त फ़ील्ड bg, वह है {{ states.hover.bg }}। छोटे रास्ते कुछ भी हल नहीं करते।
क्या मैं अपने टेम्पलेट में टैब पर लूप कर सकता हूं?
नहीं, और आपको इसकी आवश्यकता नहीं है टैब एक सूची रखने के बजाय नियंत्रण को व्यवस्थित करते हैं, इसलिए प्रत्येक मान को सीधे संबोधित किया जाता है जहां मार्कअप या सीएसएस इसका उपयोग करता है, एक पुनरावर्तक के विपरीत जहां लूप के लिए एक पंक्तियों को प्रिंट करता है।
क्या दो टैब में एक ही नाम के फ़ील्ड हो सकते हैं?
हां, और यह अनुशंसित पैटर्न है आंतरिक कुंजी स्वचालित रूप से डेडअप की जाती है, जबकि टेम्पलेट पथ प्रति-टैब रहता है, इसलिए {{ states.normal.bg }} और {{ states.hover.bg }} समान रूप से नामित फ़ील्ड से अलग मान हैं।
मैं सामान्य सामान्य और होवर स्टाइल कैसे बनाऊं?
नाम के दो टैब बनाएं normal और hover मिलान वाले चाइल्ड फ़ील्ड के साथ, फिर सीएसएस पैनल में दोनों नियम लिखें: आधार चयनकर्ता सामान्य मान पढ़ता है और :hover चयनकर्ता होवर मान पढ़ता है।
मेरे टैब फ़ील्ड का टोकन कुछ भी प्रिंट क्यों नहीं करता है?
या तो पथ अधूरा है या एक खंड गलत वर्तनी है टैब्स फ़ील्ड का स्वयं कोई मूल्य नहीं है, इसलिए टोकन को अपने लेबल के बजाय टैब के नाम का उपयोग करते हुए, सभी तीन भागों का नाम देना चाहिए।
लपेटकर #
विजेट बिल्डर टैब्स फ़ील्ड राज्य स्टाइल को एक सुव्यवस्थित पैनल पैटर्न में बदल देता है: परिभाषित करें normal और hover एक बार, बच्चे के नाम दर्पण, और अपने सीएसएस पढ़ता है {{ states.normal.bg }} विरुद्ध {{ states.hover.bg }} कुछ और नहीं बदलने के साथ युग्मित राज्यों के बजाय सामग्री को दोहराने के लिए, द पुनरावर्तक क्षेत्र के लिए पहुंचने के लिए संरचनात्मक भाई है बाकी का अन्वेषण करें मास्टर ऐडऑन विजेट और एक्सटेंशन, और देखें मूल्य निर्धारण पृष्ठ प्रत्येक योजना में क्या शामिल है।
