मिलो <विवरण>

मैं अद्भुत <details> तत्व के बारे में बात करना चाहता हूं और सरल से लेकर पागल तक इसके उपयोग के कुछ उदाहरण दिखाता हूं।

आप एक ऐसे घटक के लेआउट मॉडल से परिचित हैं जो अपनी स्थिति को दृश्य से छिपे में बदल सकता है:

 .component { display:none; } .component.open { display:block; } 

 toggleButton.onclick = () => component.classList.toggle('open') 

अब इसे भूल जाओ। एक आइटम है जो बॉक्स से बाहर कर सकता है। मिलो - <details>

HTML <details> तत्व का उपयोग छिपी (अतिरिक्त) जानकारी प्रकट करने के लिए किया जाता है।

मूल आवेदन

सबसे पहले, आइए देखें कि यह तत्व कैसे काम करता है:

कृपया ध्यान दें कि उदाहरण बिना किसी अतिरिक्त शैली या जावास्क्रिप्ट के काम करता है। सभी कार्यक्षमता ब्राउज़र में ही बनाई गई हैं।

डिफ़ॉल्ट रूप से, दृश्यमान पाठ आपके सिस्टम की भाषा सेटिंग्स पर निर्भर करता है, लेकिन आप इसे <summary> तत्व को <details> जोड़कर बदल सकते हैं:

Html में एक तत्व की स्थिति को बदलने के लिए आपको बस open विशेषता जोड़ने की आवश्यकता है

 <!--  -  --> <details open> ... </details> <!--  -  --> <details> ... </details> 

और जावास्क्रिप्ट का उपयोग करके राज्य का प्रबंधन करने के लिए, एक विशेष एपीआई प्रदान किया जाता है:

 const details = document.querySelector('details') details.open = true //   details.open = false //   

पहुँच के बारे में कुछ शब्द

<summary> तत्व ध्यान देने योग्य है। यही है, कीबोर्ड से पृष्ठ के चारों ओर घूमना आपको इस तत्व के लिए मिलेगा। लेकिन सामग्री केवल तभी ध्यान में आ सकती है यदि <details> खुला है, अर्थात, ध्यान केंद्रित करने पर अदृश्य तत्वों पर कभी भी गिरावट नहीं आएगी।

आमतौर पर, स्क्रीन रीडर <details> और <summary> के मानक उपयोग के साथ अच्छा कर सकते हैं। कार्यक्रम और ब्राउज़र के आधार पर विज्ञापन में कुछ भिन्नताएँ होती हैं। अधिक जानकारी ।

उपयोग के उदाहरण

अगला, मैं बूटस्ट्रैप प्रलेखन से कुछ घटकों को लगभग दोहराऊंगा, लेकिन बहुत कम या कोई जावास्क्रिप्ट के साथ।

मार्कर बदलें

पहली चीज जिसकी आपको आवश्यकता हो सकती है वह है मार्कर की उपस्थिति को बदलना। यह बहुत सरलता से किया जाता है:

 summary::-webkit-details-marker { /*   */ } 

या आप मानक मार्कर को छिपा सकते हैं और अपने स्वयं के कार्यान्वयन कर सकते हैं

 /*    Chrome */ details summary::-webkit-details-marker { display: none } /*    Firefox */ details > summary { list-style: none; } /*       */ details summary:before { content: '\f0fe'; font-family: "Font Awesome 5 free"; margin-right: 7px; } /*       */ details[open] summary:before { content: '\f146'; } 

घटक को संक्षिप्त करें

यहां सब कुछ सरल है। बुनियादी कार्यक्षमता समान है। केवल उपस्थिति को थोड़ा बदलना आवश्यक है:

एकॉर्डियन घटक

चलो पिछले उदाहरण को दोहराते हैं, <summary> की उपस्थिति को थोड़ा बदलें और समझौते प्राप्त करें:

लेकिन, जैसा कि आप देख सकते हैं, एक तत्व दूसरे के खुलने पर बंद नहीं होता है। इसे प्राप्त करने के लिए, हमें जावास्क्रिप्ट की कुछ पंक्तियों की आवश्यकता है। आपको <details> तत्वों में से एक पर खुली विशेषता की उपस्थिति को ट्रैक करने और इसे बाकी हिस्सों से हटाने की आवश्यकता है:

पॉपओवर घटक

यह कार्यान्वयन संक्षिप्त घटक के समान है, इस अंतर के साथ कि <details> सामग्री की पूर्ण स्थिति है और सामग्री को ओवरलैप करता है।

ड्रॉपडाउन घटक

मूल रूप से, यह वही पॉपओवर घटक है। केवल उपस्थिति अलग है।

एक ही उदाहरण, केवल एक अलग बटन के साथ

लेकिन ड्रॉपडाउन घटक में एक और महत्वपूर्ण अंतर है: इसके बाहर क्लिक करने पर इसे छिपाया जाना चाहिए। इसे फिर से लागू करने के लिए, आपको जावास्क्रिप्ट की कुछ पंक्तियों को लिखना होगा।

 //      document.body.onclick = () => { //    <details> document.body.querySelectorAll('details.dropdown[open]') //      .forEach(e => e.open = false) } 

मोडल घटक

और अंत में, एक मोडल विंडो का एक उदाहरण।

सामान्य तौर पर, इस घटक को लागू करने के लिए <details> सबसे अच्छा विकल्प नहीं है। बहुत अधिक उपयुक्त तत्व है - <dialog> , लेकिन इसमें बहुत खराब ब्राउज़र समर्थन है।

संदर्भ

क्या मैं विवरण और सारांश तत्वों का उपयोग कर सकता हूं
MDN विवरण तत्व
W3C विवरण तत्व

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