پاپاورها در همه جای وب هستند. می‌توانید آنها را در منوها، نکات کلیدی و گفتگوها که برای ویژگی‌هایی مانند تنظیمات حساب، ویجت‌های افشا، و پیش‌نمایش کارت محصول استفاده می‌شوند، ببینید. علیرغم اینکه این مؤلفه ها چقدر رایج هستند، ساخت آنها در مرورگرها همچنان به طرز شگفت آوری دست و پا گیر است. برای حل این مشکل، مجموعه جدیدی از APIهای HTML اعلامی برای ساخت پاپاورها به مرورگرها می آیند که اولین آنها Popover API است.
Popover بخشی از Baseline Newly Available است.
پاپاور معمولا با دیالوگ اشتباه گرفته می شود. با این حال برخی از تفاوت های کلیدی در رفتار آنها وجود دارد. یک عنصر dialog که با dialog.showModal باز می شود (یک گفتگوی مودال)، تجربه ای است که برای بستن مدال به تعامل صریح کاربر نیاز دارد. popover از رد کردن نور پشتیبانی می کند. dialog مودال اینطور نیست. یک گفتگوی مودال بقیه صفحه را بی اثر می کند. popover اینطور نیست. در مورد تفاوت ها بیشتر بخوانید .
این مقاله بخشی از مجموعه‌ای است که در مورد چگونگی بهبود وب‌سایت شرکت‌های تجارت الکترونیک با استفاده از ویژگی‌های جدید CSS و UI بحث می‌کند. در این مقاله، نحوه پیاده سازی و بهره مندی توکوپدیا از Popover API را دریابید.
توکوپدیا
استفاده از ویژگی های popover تا 70 درصد خطوط کد را در React کاهش داد. به جای نیاز به مدیریت رویداد در جاوا اسکریپت و استفاده از
React.createPortalبرای انتقال DOM مودال به انتهایdocument.body، می‌توان مودال را بوسیله HTML کنترل کرد. ما همچنین می‌توانیم از@starting-styleبرای متحرک کردن باز و بسته شدن پاپاور استفاده کنیم.- اندی ویهالیم ، مهندس ارشد نرم‌افزار، توکوپدیا .
صفحات جزئیات محصول توکوپدیا (PDP) حاوی چندین تصویر محصول برای هر محصول است. هنگامی که روی تصویر کوچک محصول کلیک می شود، یک مدال برای نمایش تصویر بزرگ شده باز می شود. این یک الگوی رایج است که در وب سایت های تجارت الکترونیک استفاده می شود.
کد
توکوپدیا از React برای توسعه frontend خود استفاده می کند. قبل از پیاده سازی popover API برای این مدال، از یک مدال DOM و یک دکمه استفاده می کردند. دکمه حالت React را تغییر داد تا مودال باز شود. با popover API، آنها یک ویژگی popovertarget را در عنصر مشخص می کنند که popover را با مقداری که همان شناسه عنصر popover است باز می کند.
با این پیاده سازی اساسی، پاپاور کار می کند اما بدون هیچ انیمیشنی ظاهر و ناپدید می شود. برای ایجاد یک انیمیشن ورودی و خروجی صاف برای popover، از :popover-open و @starting-style استفاده کنید و اجازه دهید انیمیشن خصوصیات گسسته ایجاد شود. در مثال کد زیر، popover با استفاده از transform: 'scale()' در داخل و خارج مقیاس می شود.
این مثال کد نحوه پیاده‌سازی انیمیشن‌های ورود و خروج را برای popover API نشان می‌دهد.
<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,
},
});
برای پاسخگویی به مرورگرهایی که از popover API پشتیبانی نمی‌کنند، Tokopedia popover-polyfill را توسط oddbird پیاده‌سازی کرد که تنها 3.2 کیلوبایت با فشرده‌سازی gzip است. آنها از polyfill راضی بودند زیرا به خوبی کار می کرد و باعث رگرسیون عملکرد نشد. به طور کلی، آنها توانستند تا 70٪ خطوط کد را در React با API popover کاهش دهند.
مواردی که باید هنگام استفاده از Popover API در نظر بگیرید
توکوپدیا از React استفاده می‌کند و تیم با جدا کردن مؤلفه پاپاور برای صفحاتی که از آن استفاده نمی‌کنند و سپس تقسیم کد برای محتوای پاپاور به تقسیم کد دست یافتند. به این ترتیب حجم درخواست اولیه خود را کاهش دادند.
ترکیب پاپاورها با موقعیت یابی لنگر CSS ( به زودی در کروم ارائه می شود ) تا آنها را نسبت به عناصر دیگر قرار دهید. این برای مثال برای منوها و نکات ابزار مفید است.
منابع
- معرفی popover API
- تفاوت بین پاپاور و دیالوگ
- آیا می خواهید یک اشکال را گزارش کنید یا یک ویژگی جدید درخواست کنید؟ ما می خواهیم از تو بشنویم .
سایر مقالات این مجموعه را بررسی کنید که در مورد اینکه چگونه شرکت‌های تجارت الکترونیک از استفاده از ویژگی‌های جدید CSS و UI مانند انیمیشن‌های Scroll-driven، popover، کوئری‌های کانتینر و انتخابگر has() سود می‌برند، صحبت کنید.