पॉपओवर एपीआई को बेसलाइन में दिखाया गया है

Una Kravets

समय आ गया है! मैं जिस सुविधा को लेकर सबसे ज़्यादा उत्साहित हूं उसमें से एक सुविधा सभी मॉडर्न ब्राउज़र पर उपलब्ध है. यह आधिकारिक तौर पर बेसलाइन 2024 का हिस्सा है. यह सुविधा है पॉपओवर एपीआई. पॉपओवर की मदद से, आपको कई ज़रूरी टूल और डेवलपर सुविधाएं मिलती हैं. इनकी मदद से, कई लेयर वाले इंटरफ़ेस बनाए जा सकते हैं, जैसे कि टूलटिप, मेन्यू, पढ़ाने के लिए यूज़र इंटरफ़ेस (यूआई).

पॉपओवर की सुविधाओं की कुछ खास बातें ये हैं:

• सबसे ऊपरी लेयर पर प्रमोशन करें. पॉपओवर, पेज के बाकी हिस्से के ऊपर सबसे ऊपरी लेयर में दिखेंगे, ताकि आपको z-index बार-बार खेलने की ज़रूरत न पड़े.
• रोशनी को हटाने की सुविधा. पॉपओवर वाली जगह के बाहर क्लिक करने पर, पॉपओवर बंद हो जाएगा और फ़ोकस वापस आ जाएगा.
• डिफ़ॉल्ट फ़ोकस मैनेजमेंट. पॉपओवर खोलने पर अगला टैब पॉपओवर के अंदर रुक जाता है.
• कीबोर्ड की बाइंडिंग ऐक्सेस की जा सकती हैं. esc बटन दबाने या डबल टॉगल करने से पॉपओवर बंद हो जाएगा और फ़ोकस वापस आ जाएगा.
• कॉम्पोनेंट बाइंडिंग को ऐक्सेस करना. पॉपओवर एलिमेंट को मतलब के हिसाब से पॉपओवर ट्रिगर से जोड़ना.

पॉपओवर बनाना

पॉपओवर बनाना बहुत आसान है. डिफ़ॉल्ट वैल्यू का इस्तेमाल करने के लिए, आपको पॉपओवर को ट्रिगर करने के लिए सिर्फ़ button और ट्रिगर करने के लिए एक एलिमेंट की ज़रूरत होगी.

• सबसे पहले, उस एलिमेंट पर popover एट्रिब्यूट सेट करें जो पॉपओवर होगा.
• इसके बाद, पॉपओवर एलिमेंट पर एक यूनीक id जोड़ें.
• आखिर में, बटन को पॉपओवर से कनेक्ट करने के लिए, बटन की popovertargetको पॉपओवर एलिमेंट की id वैल्यू पर सेट करें.

इसे नीचे दिए गए कोड में दिखाया गया है:

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p><p>I am a popover with more information. Hit <kbd>esc</kbd> or click away to close me.<p></p>
</div>

पॉपओवर पर ज़्यादा बारीकी से कंट्रोल करने के लिए, अलग-अलग तरह के पॉपओवर सेट किए जा सकते हैं. जैसे, बिना किसी वैल्यू वाले popover एट्रिब्यूट का इस्तेमाल करना, popover="auto" के बराबर होता है. auto वैल्यू की मदद से, रोशनी को खारिज किया जा सकता है और दूसरे पॉपओवर अपने-आप बंद हो जाते हैं. popover="manual" का इस्तेमाल करें और आपको इसमें 'बंद करें' बटन जोड़ना होगा. मैन्युअल पॉपओवर की मदद से, अन्य पॉपओवर बंद नहीं होते. इसके अलावा, यूज़र इंटरफ़ेस (यूआई) में जाकर, पॉपओवर को खारिज करने की सुविधा उपयोगकर्ताओं को नहीं मिलती है. इन चीज़ों का इस्तेमाल करके मैन्युअल पॉपओवर बनाया जा सकता है:

<button popovertarget="my-popover" class="trigger-btn"> Open Popover </button>

<div id="my-popover" popover=manual>
  <p>I am a popover with more information. Hit the close button or toggle to close me.<p>
  <button class="close-btn" popovertarget="my-popover" popovertargetaction="hide">
    <span aria-hidden="true">❌</span>
    <span class="sr-only">Close</span>
  </button>
</div>

पॉपओवर बनाम मोडल डायलॉग

आप सोच रहे होंगे कि क्या डायलॉग मौजूद होने पर आपको पॉपओवर की ज़रूरत होगी और इसका जवाब है: शायद आप न हों.

ध्यान दें कि पॉपओवर एट्रिब्यूट में, खुद से कोई सिमेंटिक्स नहीं दिया जाता है. अब पॉपओवर का इस्तेमाल करके, मॉडल डायलॉग जैसे अनुभव बनाए जा सकते हैं. हालांकि, इन दोनों के बीच कुछ मुख्य अंतर हैं:

निष्कर्ष और आगे की रीडिंग

popover के प्लैटफ़ॉर्म में कई शानदार सुविधाएं हैं. अगर आपको इस एपीआई के बारे में ज़्यादा जानना है. इसमें, सुविधा के बारे में सुलभता सुविधाओं के बारे में ज़्यादा जानकारी, और सुविधा के सेट से जुड़े दस्तावेज़ शामिल हैं. ज़्यादा जानकारी के लिए यहां कुछ लेख दिए गए हैं:

• सिमैंटिक और पॉपओवर एट्रिब्यूट: हिदे दे वीज़ की किताब, इसमें कब इस्तेमाल करना चाहिए?
• पॉपओवर की सुलभता पर: ब्राउज़र, Hidde de Vries की मदद से क्या करता है और क्या नहीं
• पॉपओवर पर एमडीएन दस्तावेज़