معرفی popover API

یونا کراوتس

پاپاورها در همه جای وب هستند. می‌توانید آن‌ها را در منوها، نکات کلیدی، و گفتگوها مشاهده کنید، که می‌توانند به صورت تنظیمات حساب، ویجت‌های افشا، و پیش‌نمایش کارت محصول ظاهر شوند. علیرغم اینکه این مؤلفه ها چقدر رایج هستند، ساخت آنها در مرورگرها همچنان به طرز شگفت آوری دست و پا گیر است. برای مدیریت فوکوس، حالت‌های باز و بسته کردن، قلاب‌های قابل دسترسی به اجزا، اتصالات صفحه کلید برای ورود و خروج از تجربه، باید اسکریپت‌نویسی اضافه کنید، و این همه حتی قبل از شروع ساختن عملکرد مفید، منحصربه‌فرد و اصلی پاپاور است.

برای حل این مشکل، مجموعه جدیدی از APIهای اچ‌تی‌ام‌ال برای ساخت پاپ‌اورها به مرورگرها می‌آیند که با API popover در Chromium 114 شروع می‌شود.

ویژگی popover

پشتیبانی مرورگر

  • کروم: 114.
  • لبه: 114.
  • فایرفاکس: 125.
  • سافاری: 17.

منبع

به جای اینکه خودتان همه پیچیدگی ها را مدیریت کنید، می توانید به مرورگر اجازه دهید آن را با ویژگی popover و مجموعه ای از ویژگی های بعدی مدیریت کند. پشتیبانی از پاپاورهای HTML:

  • ارتقاء به لایه بالایی Popover ها در یک لایه جداگانه در بالای بقیه صفحه ظاهر می شوند، بنابراین شما مجبور نیستید با z-index به اطراف بچرخید.
  • قابلیت حذف نور کلیک کردن در خارج از ناحیه پاپاور، پاپاور را بسته و فوکوس را برمی‌گرداند.
  • مدیریت تمرکز پیش‌فرض باز کردن پاپاور باعث می شود که زبانه بعدی در داخل پاپاور متوقف شود.
  • اتصالات صفحه کلید قابل دسترس فشار دادن کلید esc باعث بسته شدن پاپاور و بازگشت فوکوس می شود.
  • اتصالات قابل دسترسی اتصال یک عنصر پاپاور به یک ماشه پاپاور از نظر معنایی.

اکنون می توانید با تمام این ویژگی ها بدون استفاده از جاوا اسکریپت پاپاور بسازید. یک پاپاور اساسی به سه چیز نیاز دارد:

  • یک ویژگی popover در عنصر حاوی popover.
  • یک id روی عنصر حاوی پاپاور.
  • یک popovertarget با مقدار id popover روی عنصری که پاپاور را باز می کند.
<button popovertarget="my-popover"> Open Popover </button>

<div id="my-popover" popover>
  <p>I am a popover with more information.</p>
</div>

اکنون شما یک پاپاور اساسی کاملاً کاربردی دارید.

این پاپ اور می تواند برای انتقال اطلاعات اضافی یا به عنوان یک ویجت افشا استفاده شود.

پیش‌فرض و لغو

به‌طور پیش‌فرض، مانند قطعه کد قبلی، راه‌اندازی پاپ‌اور با popovertarget به این معنی است که دکمه یا عنصری که پاپ‌اور را باز می‌کند، آن را باز و بسته می‌کند. با این حال، می‌توانید با استفاده از popovertargetaction پاپ‌اورهای صریح ایجاد کنید. این عمل تعویض پیش‌فرض را لغو می‌کند. گزینه های popovertargetaction عبارتند از:

popovertargetaction="show" : popover را نشان می دهد. popovertargetaction="hide" : پاپاور را پنهان می کند.

با استفاده از popovertargetaction="hide" ، می توانید یک دکمه "close" در پاپاور ایجاد کنید، مانند قطعه زیر: 

<button popovertarget="my-popover" popovertargetaction="hide">
    <span aria-hidden="true">❌</span>
    <span class="sr-only">Close</span>
</button>

پاپاورهای خودکار در مقابل دستی

استفاده از ویژگی popover به تنهایی در واقع یک میانبر برای popover="auto" است. پس از باز شدن، popover پیش‌فرض سایر پاپ‌اورهای خودکار را مجبور می‌کند، به جز پاپ‌اورهای اجدادی، بسته شوند. می توان آن را از طریق رد کردن نور یا دکمه بستن حذف کرد.

از طرف دیگر، تنظیم popover=manual نوع دیگری از پاپاور ایجاد می کند: پاپاور دستی. اینها هیچ نوع عنصر دیگری را به زور نمی‌بندند و از طریق رد کردن نور بسته نمی‌شوند. شما باید آنها را از طریق یک تایمر یا عمل نزدیک صریح ببندید. انواع پاپاورهای مناسب برای popover=manual عناصری هستند که ظاهر می شوند و ناپدید می شوند، اما نباید بر بقیه صفحه تأثیر بگذارند، مانند اعلان نان تست.

اگر نسخه ی نمایشی بالا را بررسی کنید، می بینید که کلیک کردن در خارج از ناحیه پاپاور، پاپاور را روشن نمی کند. علاوه بر این، اگر پاپاورهای دیگر باز بودند، بسته نمی‌شدند.

برای بررسی تفاوت ها:

پاپوور با popover=auto :

  • وقتی باز شد، پاپاورهای دیگر را به زور ببندید.
  • می تواند نور را رد کند.

پاپوور با popover=manual :

  • هیچ نوع عنصر دیگری را به زور نبندید.
  • نور رد نکنید. آنها را با استفاده از ضامن یا عمل بستن ببندید.

پاپاورهای یک ظاهر طراحی شده

تا اینجا شما در مورد پاپاورهای اساسی در HTML یاد گرفته اید. اما برخی از ویژگی های ظاهری خوب نیز وجود دارد که با popover همراه است. یکی از آن ها قابلیت استایل دادن ::backdrop است.

در پاپاورهای auto ، این لایه مستقیماً زیر لایه بالایی (محل زندگی پاپاور) است که بالای بقیه صفحه قرار دارد. در مثال زیر، ::backdrop یک رنگ نیمه شفاف داده شده است: 

#size-guide::backdrop {
  background: rgb(190 190 190 / 50%);
}

تفاوت بین popover و dialog

توجه به این نکته مهم است که ویژگی popover به تنهایی معنایی را ارائه نمی دهد. و در حالی که اکنون می‌توانید با استفاده از popover="auto" تجربیاتی شبیه به گفتگو بسازید، چند تفاوت کلیدی بین این دو وجود دارد:

یک عنصر dialog که با dialog.showModal باز می شود (یک گفتگوی مودال)، تجربه ای است که برای بستن مدال به تعامل صریح کاربر نیاز دارد. popover از رد کردن نور پشتیبانی می کند. dialog مودال اینطور نیست. یک گفتگوی مودال بقیه صفحه را بی اثر می کند . popover اینطور نیست.

دمو فوق یک گفتگوی معنایی با رفتار پاپاور است. این بدان معنی است که بقیه صفحه بی اثر نیست و popover گفتگو رفتار رد کردن نور را دریافت می کند. می توانید این گفتگو را با رفتار popover با استفاده از کد زیر بسازید:

<button popovertarget="candle-01">
  Quick Shop
</button>
<dialog popover id="candle-01">
  <button class="close-btn" popovertarget="candle-01" popovertargetaction="hide">...</button>
  <div class="product-preview-container">
    ...
  </div>
</dialog>

به زودی

ورود و خروج تعاملی

توانایی متحرک سازی ویژگی های مجزا، از جمله متحرک سازی به و از display: none و متحرک سازی به و از لایه بالایی هنوز در مرورگرها موجود نیست. با این حال، آنها برای نسخه آینده Chromium برنامه ریزی شده اند، که این نسخه را از نزدیک دنبال می کند.

با توانایی متحرک سازی خصوصیات گسسته، و با استفاده از :popover-open و @starting-style ، می‌توانید سبک‌های قبل و بعد از تغییر را تنظیم کنید تا هنگام باز و بسته کردن پاپ‌اورها، انتقال صاف را فعال کنید. مثال قبلی را در نظر بگیرید. متحرک سازی آن در داخل و خارج بسیار روان تر به نظر می رسد و از تجربه کاربر روان تری پشتیبانی می کند:

موقعیت لنگر

زمانی که می‌خواهید یک هشدار، مودال یا اعلان را بر اساس درگاه دید قرار دهید، پاپاورها عالی هستند. اما پاپاورها برای منوها، راهنمای ابزار و سایر عناصری که باید نسبت به سایر عناصر قرار گیرند نیز مفید هستند. اینجاست که لنگر CSS وارد می شود.

نسخه نمایشی منوی شعاعی زیر از API پاپاور به همراه موقعیت‌یابی لنگر CSS استفاده می‌کند تا اطمینان حاصل کند که #menu-items پاپاور همیشه به ماشه تغییر دهنده آن، دکمه #menu-toggle متصل می‌شوند.

راه‌اندازی لنگرها مشابه راه‌اندازی پاپ‌اور است:

<button id="menu-toggle" popovertarget="menu-items">
  Open Menu
</button>
<ul id="menu-items" popover anchor="menu-toggle">
  <li class="item">...</li>
  <li class="item">...</li>
</ul>

شما یک لنگر را با دادن یک id به آن تنظیم می‌کنید (در این مثال، #menu-toggle )، و سپس anchor="menu-toggle" برای اتصال دو عنصر استفاده می‌کنید. اکنون می توانید anchor() برای استایل دادن به popover استفاده کنید. یک منوی پاپ‌اور مرکزی که به خط پایه ضامن لنگر متصل است، ممکن است به صورت زیر استایل شود: 

#menu-items {
  bottom: anchor(bottom);
  left: anchor(center);
  translate: -50% 0;
}

اکنون یک منوی پاپاور کاملاً کاربردی دارید که به دکمه جابجایی متصل است و همه ویژگی های داخلی پاپاور را دارد، بدون نیاز به جاوا اسکریپت!

نتیجه گیری

Popover API اولین گام از مجموعه ای از قابلیت های جدید است که مدیریت ساخت برنامه های وب را آسان تر و به طور پیش فرض در دسترس تر می کند. من هیجان زده هستم که ببینم شما چگونه از پاپاور استفاده می کنید!

خواندن اضافی