टेलविंड में सूची शैली प्रकार कैसे सेट करें

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

यह आलेख टेलविंड में सूची शैली प्रकार सेट करने की प्रक्रिया प्रदान करेगा।

टेलविंड में सूची शैली प्रकार कैसे सेट करें?

टेलविंड तीन डिफ़ॉल्ट सूची शैली प्रकार प्रदान करता है। इनका उपयोग ' प्रदान करने के लिए किया जाता है निशान सूची आइटम के लिए शैली। तीन डिफ़ॉल्ट सूची शैली प्रकार वर्गों का वर्णन इस प्रकार किया गया है:

• सूची-डिस्क: यह वर्ग सूची मार्कर के रूप में गोल बुलेट बिंदु प्रदान करेगा।
• सूची-दशमलव: यह वर्ग सूची मार्कर के रूप में दशमलव संख्याएँ प्रदान करेगा।
• सूची-कोई नहीं: यह वर्ग आइटम से किसी भी सूची मार्कर को हटा देगा।

सूची शैली प्रकारों का उपयोग करने का सिंटैक्स इस प्रकार है:

बेहतर समझ के लिए, नीचे दिया गया प्रदर्शन आइटमों को सूचीबद्ध करने के लिए अलग-अलग मार्कर शैलियाँ प्रदान करने के लिए ऊपर-परिभाषित वाक्यविन्यास का उपयोग करेगा। इस उदाहरण में, तीन सूची तत्व बनाए जाएंगे और टेलविंड में डिफ़ॉल्ट सूची शैली कक्षाओं का उपयोग करके विभिन्न मार्कर शैलियों के साथ प्रदान किए जाएंगे:

उपरोक्त कोड की व्याख्या इस प्रकार है:

• ए ' <पी> 'तत्व' के साथ बनाया गया है एक्स्ट्रा लार्ज 'फ़ॉन्ट आकार और एक' बोल्ड ' फ़ॉन्ट वजन। तत्व की पाठ्य सामग्री को 'का उपयोग करके केंद्र में रखा गया है' पाठ-केंद्र ' कक्षा।
• एक लाइन ब्रेक के बाद, एक '
  ' तत्व बनाया गया है और ' के साथ प्रदान किया गया है मोड़ना ' कक्षा। यह एक कंटेनर बनाएगा जो चाइल्ड आइटम को क्षैतिज रूप से संरेखित करेगा।
• “ औचित्य-केंद्र कक्षा वस्तुओं को कंटेनर के केंद्र में रखेगी।
• “ स्पेस-x-{आकार} 'वर्ग वस्तुओं के बीच क्षैतिज स्थान प्रदान करता है।
• “ बीजी-{रंग}-{संख्या} क्लास कंटेनर की पृष्ठभूमि को निर्दिष्ट रंग में सेट करता है।
• “ गोलाकार-एल.जी क्लास कंटेनर के कोनों को गोल बनाता है।
• “ एमएक्स-4 क्लास फ्लेक्स कंटेनर को क्षैतिज मार्जिन प्रदान करता है।
• “ पी 2 क्लास फ्लेक्स कंटेनर को पैडिंग प्रदान करता है।
• इसके बाद, तीन सूची तत्व बनाए जाते हैं और 'का उपयोग करके विभिन्न सूची शैली प्रकार प्रदान किए जाते हैं' सूची-{प्रकार} ' कक्षा।

आउटपुट:

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

टेलविंड में राज्य वेरिएंट के साथ सूची शैली वर्ग का उपयोग करना

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

यहां 'होवर' स्थिति के साथ सूची शैली प्रकार का उपयोग करने का एक उदाहरण दिया गया है, जहां उपयोगकर्ता सूची ब्लॉक पर होवर करके मार्कर शैली को बदल सकता है:

उपरोक्त कोड में, सूची 'के साथ प्रदान की गई है सूची-डिस्क 'डिफ़ॉल्ट सूची शैली प्रकार के रूप में वर्ग। हालाँकि, 'का उपयोग करते हुए होवर: सूची-दशमलव 'क्लास, जब उपयोगकर्ता सूची ब्लॉक पर माउस कर्सर घुमाएगा तो सूची शैली प्रकार बदल जाएगा।

आउटपुट:

नीचे दिए गए आउटपुट से पता चलता है कि जब कर्सर सूची ब्लॉक पर घूमता है तो सूची प्रकार की शैली बुलेटेड सूची से क्रमांकित सूची में बदल जाती है।

टेलविंड में ब्रेकप्वाइंट के साथ सूची शैली वर्ग का उपयोग करना

ब्रेकप्वाइंट का उपयोग विभिन्न स्क्रीन आकारों के लिए लेआउट के रिस्पॉन्सिव डिज़ाइनिंग के लिए किया जाता है। टेलविंड द्वारा प्रदान किए गए पांच डिफ़ॉल्ट ब्रेकप्वाइंट sm, md, lg, xl और 2xl हैं। ब्रेकप्वाइंट के साथ सूची प्रकार शैली वर्ग प्रदान करने के लिए निम्नलिखित सिंटैक्स का उपयोग किया जाता है:

यहां सूची शैली प्रकार को ' के साथ उपयोग करने का एक उदाहरण दिया गया है एमडी ” ब्रेकप्वाइंट, जहां स्क्रीन का आकार “एमडी” ब्रेकप्वाइंट तक पहुंचने पर मार्कर शैली बदल जाएगी:

उपरोक्त कोड में, सूची 'के साथ प्रदान की गई है सूची-डिस्क 'डिफ़ॉल्ट शैली के रूप में वर्ग। हालाँकि, 'का उपयोग करते हुए एमडी: सूची-दशमलव 'वर्ग' सूची शैली प्रकार 'एमडी' स्क्रीन आकार के लिए बदल जाएगा।

आउटपुट:

जैसा कि आप नीचे दिए गए आउटपुट में देख सकते हैं, स्क्रीन का आकार ' तक पहुंचने पर सूची शैली प्रकार डिस्क से दशमलव में बदल जाता है एमडी “ब्रेकप्वाइंट.

यह सब टेलविंड में सूची शैली प्रकार सेट करने के बारे में है।

निष्कर्ष

टेलविंड किसी तत्व की लिस्टिंग शैली को बदलने के लिए तीन पूर्व-निर्धारित सूची शैली प्रकार कक्षाएं प्रदान करता है। “ सूची-डिस्क क्लास आइटमों को सूचीबद्ध करने के लिए बुलेट पॉइंट प्रदान करता है। “ सूची-दशमलव 'वर्ग वस्तुओं को सूचीबद्ध करने के लिए संख्याएँ प्रदान करता है। “ सूची-कोई नहीं क्लास एक सूची बनाती है जो किसी भी आइटम मार्कर का उपयोग नहीं करती है। इस आलेख में टेलविंड में सूची शैली प्रकार सेट करने की प्रक्रिया प्रदान की गई है।