टैब विजेट ऐसे डेटा को व्यवस्थित करने के लिए <devsite-selector> कस्टम एलिमेंट का इस्तेमाल करता है, जो अलग-अलग फ़ॉर्मैट (जैसे कि JSON, YAML, या एक्सएमएल).
सामान्य इस्तेमाल
नीचे दिए गए उदाहरण में एचटीएमएल का इस्तेमाल करके तीन टैब सेक्शन को रेंडर करने के लिए
<devsite-selector> कस्टम एलिमेंट का इस्तेमाल किया गया है.
टैब 1 का शीर्षक
टैब 1 कॉन्टेंट
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
semper tortor nec ctum sagitis. Nunc Massa ipsum, mollis non neque sed, vulputate disnissim odio.
टैब 2 का शीर्षक
टैब 2 कॉन्टेंट
Curabitur semper torc nec ctum sagittis. Nunc Massa ipsum, mollis
non neque sed, vulputate disnissim odio. Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
टैब 3 का शीर्षक
टैब 3 कॉन्टेंट
Nunc Massa ipsum, mollis non neque sed, vulputate disnissim odio. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper
tortor nec ctum sagitis.
नीचे दिए गए उदाहरण में, तीन टैब रेंडर करने के लिए मार्कडाउन सिंटैक्स का इस्तेमाल किया गया है.
टैब 1 का शीर्षक
टैब 1 कॉन्टेंट
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper
टॉर्क नेक डिक्टम स्क्रिप्ट्स. Nunc Massa ipsum, mollis non neque sed,
vulputate disnissim odio.
टैब 2 का शीर्षक
टैब 2 कॉन्टेंट
Curabitur semper torc nec ctum sagittis. Nunc Massa ipsum, mollis non-need sed, vulputate disnissim odio. Lorem ipsum dolor sit amet,
conconteturtur adipiscing elit.
टैब 3 का शीर्षक
टैब 3 कॉन्टेंट
Nunc Massa ipsum, mollis non neque sed, vulputate disnissim odio. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tortor
nec डिक्टम सैगिटिस.
ओवरफ़्लो मेन्यू वाला टैब विजेट
नीचे दिए गए उदाहरण में, <devsite-selector> कस्टम एलिमेंट का इस्तेमाल किया गया है. हालांकि, इसमें स्क्रीन पर फ़िट करने के लिए कई टैब हैं. साथ ही, ये ज़्यादा ड्रॉप-डाउन मेन्यू में अपने-आप भर जाते हैं.
सेब
सेब से जुड़ा कॉन्टेंट
एप्रिकॉट
राजकुमारों के बारे में सामग्री
एवाकाडो
एवोकाडो की जानकारी
अंजीर
अंजीर के बारे में सामग्री
अंगूर
अंगूर के बारे में कॉन्टेंट
किविफ़्रूइट
कीवीफ़्रूट के बारे में कॉन्टेंट
नींबू
नींबू से संबंधित सामग्री
नींबू के टुकड़े
नींबू के बारे में कॉन्टेंट
आम
आम के बारे में जानकारी
पीच
पीच के बारे में जानकारी
नीचे दिए गए उदाहरण में, एक जैसे ओवरफ़्लो मेन्यू को रेंडर करने के लिए मार्कडाउन सिंटैक्स का इस्तेमाल किया गया है.
सेब
सेब से जुड़ा कॉन्टेंट
एप्रिकॉट
राजकुमारों के बारे में सामग्री
एवाकाडो
एवोकाडो की जानकारी
अंजीर
अंजीर के बारे में सामग्री
अंगूर
अंगूर के बारे में कॉन्टेंट
किविफ़्रूइट
कीवीफ़्रूट के बारे में कॉन्टेंट
नींबू
नींबू से संबंधित सामग्री
नींबू के टुकड़े
नींबू के बारे में कॉन्टेंट
आम
आम के बारे में जानकारी
पीच
पीच के बारे में जानकारी
कई टैब विजेट में डुप्लीकेट टैब नाम
किसी टैब पर क्लिक करने से पेज पर मौजूद दूसरे सभी टैब पर असर होता है. इसमें एक ही तरह के सिंटैक्स वाले टेक्स्ट होते हैं. उदाहरण के लिए, नीचे दिए गए विजेट में Apple या ऐप्रिकॉट पर क्लिक करने से पिछले सेक्शन के दूसरे विजेट पर भी असर पड़ता है, क्योंकि वे दोनों मार्कडाउन की मदद से बनाए गए हैं.
सेब
सेब के बारे में ज़्यादा जानकारी!
एप्रिकॉट
यह ऐप्लिकेशन 'प् ऊपर' सुविधा के बारे में है.
टैब विजेट को पसंद के मुताबिक बनाना
हालांकि, आप मार्कडाउन की मदद से टैब विजेट बना सकते हैं, लेकिन कस्टम एट्रिब्यूट असाइन करने के लिए आपको एचटीएमएल सिंटैक्स का इस्तेमाल करना होगा.
टैब में रैप किया गया टेक्स्ट
जिस टेक्स्ट को DevSite से सेट किए गए टैब की ज़्यादा से ज़्यादा चौड़ाई पार की गई है उसे क्लिप बनाकर एलिप्स के साथ जोड़ा जाता है. नीचे दिया गया उदाहरण, दूसरे टैब में टेक्स्ट को रैप करने के लिए,
<devsite-selector> कस्टम एलिमेंट में two-line-tab क्लास का इस्तेमाल करता है.
यह एक लंबा लेबल है, जो रैप नहीं होता है
यह लेबल किसी और लाइन पर रैप नहीं होता.
यह लेबल, दूसरी लाइन पर रैप हो जाता है
इस टैब के लिए लेबल, दूसरी लाइन पर रैप हो जाता है.
छोटे लेबल वाले टैब में टेक्स्ट रैप करना
नीचे दिया गया उदाहरण two-line-tab को पहली लाइन पर सेट करता है. साथ ही, <devsite-selector> कस्टम एलिमेंट में tab-label को दूसरी लाइन पर सेट करता है, ताकि दो लाइन के टैब की दूसरी लाइन पर छोटा लेबल दिखाया जा सके चुनें.
Swift
इस टैब में Swift लेबल है.
Java
दो लाइन वाले इस टैब में, Java लेबल के नीचे एक छोटा Android लेबल होता है.
Kotlin
दो लाइन वाले इस टैब में, Kotlin लेबल के नीचे एक छोटा Android लेबल होता है.
Java
इस टैब में Java लेबल होता है.
किसी खास टैब से सीधे लिंक करना
नीचे दिया गया उदाहरण, <devsite-selector> कस्टम एलिमेंट में id बताकर, एक खास टैब को सीधे लिंक करके खोलता है.
कोबोल
यह टैब डिफ़ॉल्ट है, लेकिन आप #cobol ऐंकर का इस्तेमाल कर सकते हैं.
Fortran
#fortran लिंक को अपने लिंक में जोड़कर, आप सीधे इस टैब से लिंक करेंगे.
Haskell
यह टैब, आपके लिंक में #haskell ऐंकर इस्तेमाल करेगा.
एक ही टैब में खोले गए सभी विजेट का लिंक बनाना
नीचे दिया गया लिंक, क्वेरी पैरामीटर को जोड़ता है?tab=Apricots इस पेज के यूआरएल पर ले जाएं और पेज कोएप्रिकॉट सभी सिलेक्टर पर टैब खुला है:
https://www.devsitetest.how/integration-tests/Widgetets/tabs?tab=ऐप्रिकॉट