पॉपओवर, वेब पर हर जगह मौजूद हैं. इन्हें मेन्यू, टॉगलटिप, और डायलॉग में देखा जा सकता है. इनका इस्तेमाल खाता सेटिंग, जानकारी देने वाले विजेट, और प्रॉडक्ट कार्ड की झलक जैसी सुविधाओं के लिए किया जाता है. इन कॉम्पोनेंट का इस्तेमाल किए जाने के बावजूद, इन्हें ब्राउज़र में बनाना अब भी बहुत मुश्किल है. इसे ठीक करने के लिए, पॉपओवर बनाने के लिए डिक्लेरेटिव एचटीएमएल एपीआई का एक नया सेट ब्राउज़र में आ रहा है. इनमें से पहला सेट पॉपओवर एपीआई है.
पॉपओवर, Baseline Newly उपलब्ध का हिस्सा है.
पॉपओवर को आम तौर पर डायलॉग समझ लिया जाता है. हालांकि, उनके काम करने के तरीके
में कुछ अहम फ़र्क़ है. dialog.showModal के साथ खोला गया dialog एलिमेंट (मोडल डायलॉग), एक ऐसा अनुभव है जिसके लिए मॉडल बंद करने के लिए, साफ़ तौर पर उपयोगकर्ता इंटरैक्शन की ज़रूरत होती है. popover पर लाइट खारिज की जा सकती है. मॉडल dialog काम नहीं करता.
मॉडल डायलॉग की वजह से, बाकी पेज बंद हो जाता है. popover में ऐसा नहीं होता.
अंतरों के बारे में ज़्यादा पढ़ें.
यह लेख उस सीरीज़ का हिस्सा है जिसमें बताया गया है कि ई-कॉमर्स कंपनियों ने सीएसएस और यूज़र इंटरफ़ेस (यूआई) की नई सुविधाओं का इस्तेमाल करके, अपनी वेबसाइट को कैसे बेहतर बनाया है. इस लेख में जानें कि Tokopedia ने पॉपओवर एपीआई को कैसे लागू किया और उससे उसे कैसे फ़ायदा मिला.
टोकोपीडिया
'रिऐक्ट' में पॉपओवर एट्रिब्यूट का इस्तेमाल करने पर, कोड की लाइन में 70% तक की कमी आती है. मोडल डीओएम को
document.bodyके आखिर में ले जाने के लिए, JavaScript में इवेंट हैंडलिंग औरReact.createPortalका इस्तेमाल करने के बजाय, मॉडल को नेटिव तौर पर एचटीएमएल से कंट्रोल किया जा सकता है. हम@starting-styleका इस्तेमाल करके, पॉपओवर के खुलने और बंद होने वाले ऐनिमेशन को भी ऐनिमेट कर सकते हैं.—एंडी विहलिम, सीनियर सॉफ़्टवेयर इंजीनियर, टोकोपीडिया.
Tokopedia के प्रॉडक्ट की जानकारी वाले पेजों (पीडीपी) पर, हर प्रॉडक्ट की एक से ज़्यादा इमेज मौजूद होती हैं. जब प्रॉडक्ट के थंबनेल पर क्लिक किया जाता है, तो बड़ी इमेज दिखाने के लिए एक मॉडल खोला जाता है. यह ई-कॉमर्स वेबसाइटों में इस्तेमाल किया जाने वाला एक सामान्य पैटर्न है.
कोड
Tokopedia अपने फ़्रंटएंड डेवलपमेंट के लिए React का इस्तेमाल करता है. इस मॉडल के लिए पॉपओवर एपीआई लागू करने से पहले, उन्होंने एक DOM मॉडल और बटन का इस्तेमाल किया. बटन ने मोडल खोलने के लिए,
प्रतिक्रिया की स्थिति बदल दी है. पॉपओवर एपीआई की मदद से, ये एलिमेंट में
popovertarget एट्रिब्यूट तय करते हैं. इससे पॉपओवर एलिमेंट के आईडी की वैल्यू के साथ पॉपओवर खुलता है.
इस बुनियादी इंप्लीमेंट के साथ, पॉपओवर काम करता है, लेकिन
बिना किसी ऐनिमेशन के दिखता और गायब हो जाता है. पॉपओवर के लिए आसान एंट्री और एग्ज़िट ऐनिमेशन बनाने के लिए, :popover-open और @starting-style का इस्तेमाल करें. साथ ही, अलग प्रॉपर्टी के ऐनिमेशन की अनुमति दें.
नीचे दिए गए कोड के उदाहरण में, पॉपओवर transform: 'scale()' प्रॉपर्टी का इस्तेमाल करके अंदर और बाहर स्केल करता है.
इस कोड का उदाहरण में, पॉपओवर एपीआई के लिए एंट्री और एग्ज़िट ऐनिमेशन लागू करने का तरीका बताया गया है.
<Thumbnail popovertarget="medialightbox" />
<MediaLightbox popover id="medialightbox" />
export const cssModalWrapper = css({
background: NN0,
border: 'none',
borderRadius: '.625rem',
width: 1024,
padding: 24,
'&::backdrop': {
opacity: 0,
transitionProperty: 'opacity, display',
transition: '.25s ease-out',
transitionBehavior: 'allow-discrete',
},
transitionProperty: 'transform, opacity, display',
transition: '.25s ease-out',
transitionBehavior: 'allow-discrete',
'@starting-style': {
transform: 'scale(1)',
opacity: 1,
},
transform: 'scale(0.8)',
opacity: 0,
'&:popover-open': {
'@starting-style': {
transform: 'scale(0.8)',
opacity: 0,
},
transform: 'scale(1)',
opacity: 1,
},
});
पॉपओवर एपीआई के साथ काम न करने वाले ब्राउज़र के लिए, Tokopedia ने ऑडबर्ड का इस्तेमाल करके पॉपओवर-पॉलीफ़िल लागू किया, जो gzip कंप्रेशन के साथ सिर्फ़ 3.2 केबी का है. वे पॉलीफ़िल से संतुष्ट थे, क्योंकि यह अच्छी तरह से काम करता था और परफ़ॉर्मेंस रिग्रेशन पर असर नहीं डालता. कुल मिलाकर, पॉपओवर एपीआई की मदद से React में, कोड की लाइनों में 70% तक की कमी आ सकती थी.
पॉपओवर एपीआई का इस्तेमाल करते समय इन बातों का ध्यान रखें
Tokopedia में 'रिऐक्ट' सुविधा का इस्तेमाल किया गया है. इसकी मदद से, टीम ने कोड को अलग-अलग हिस्सों में बांटने के लिए, ऐसे पेजों के लिए पॉपओवर कॉम्पोनेंट को हॉरिज़ॉन्टल किया जो इसका इस्तेमाल नहीं करते. इसके बाद, पॉपओवर कॉन्टेंट के लिए कोड को बांटा गया. इस तरह, उन्होंने अपने शुरुआती अनुरोध का साइज़ कम कर लिया है.
पॉपओवर को सीएसएस ऐंकर पोज़िशनिंग के साथ मिलाएं (Chrome पर जल्द ही उपलब्ध होगा) ताकि उन्हें दूसरे एलिमेंट के मुकाबले दिखाया जा सके. उदाहरण के लिए, यह मेन्यू और टूलटिप के लिए मददगार होता है.
रिसॉर्स
- पेश है पॉपओवर एपीआई
- पॉपओवर और डायलॉग के बीच का अंतर
- क्या आपको किसी गड़बड़ी की शिकायत करनी है या नई सुविधा के लिए अनुरोध करना है? हम आपकी राय जानना चाहते हैं.
इस सीरीज़ के अन्य लेखों को पढ़ें. इनमें बताया गया है कि ई-कॉमर्स कंपनियों को स्क्रोल से चलने वाले ऐनिमेशन, पॉपओवर, कंटेनर क्वेरी, और has() सिलेक्टर जैसी सीएसएस और यूज़र इंटरफ़ेस (यूआई) की नई सुविधाओं का इस्तेमाल करने से किस तरह फ़ायदा मिला.