Popover API در Baseline قرار می گیرد

یونا کراوتس

این اتفاق می افتد! یکی از ویژگی‌هایی که بیشتر درباره‌اش هیپ شده‌ام به تازگی در تمام مرورگرهای مدرن قرار گرفته است و رسماً بخشی از Baseline 2024 است. و این ویژگی Popover API است. Popover برای ساخت رابط های لایه ای مانند راهنمای ابزار، منوها، UI های آموزشی و موارد دیگر، امکانات اولیه و توسعه دهندگان بسیار جذابی را ارائه می دهد.

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

  • 114
  • 114
  • 125
  • 17

منبع

برخی از نکات برجسته سریع از قابلیت های پاپاور عبارتند از:

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

ایجاد پاپاور

ایجاد پاپاورها کاملاً ساده است. برای استفاده از مقادیر پیش‌فرض، تنها چیزی که نیاز دارید یک button برای راه‌اندازی popover و یک عنصر برای راه‌اندازی است.

  • ابتدا یک ویژگی popover را روی عنصری که قرار است پاپاور باشد تنظیم کنید.
  • سپس، یک id منحصر به فرد روی عنصر popover اضافه کنید.
  • در نهایت، برای اتصال دکمه به پاپاور، popovertarget دکمه را روی مقدار id عنصر popover تنظیم کنید.

این در کد زیر نشان داده شده است:

<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 خالی بدون مقدار مانند 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 در مقابل گفتگوی مودال

ممکن است از خود بپرسید که آیا زمانی که دیالوگ وجود دارد به popover نیاز دارید یا خیر، و پاسخ این است: ممکن است نباشید.

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

عنصر <dialog> معین

  • با dialog.showModal() باز شد.
  • با dialog.close() بسته شد.
  • بقیه صفحه را بی اثر می کند.
  • از رفتار حذف نور پشتیبانی نمی کند.
  • می توانید حالت باز را با ویژگی [open] استایل دهید.
  • از نظر معنایی یک مؤلفه تعاملی را نشان می دهد که تعامل با بقیه صفحه را مسدود می کند.

صفت [popover]

  • می توان با یک فراخوان اعلامی ( popovertarget ) باز کرد.
  • با popovertarget (پاپاور خودکار) یا popovertargetaction=hide (پاپاور دستی) بسته می شود.
  • بقیه صفحه را بی اثر نمی کند.
  • از رفتار حذف نور پشتیبانی می کند.
  • می توانید حالت باز را با کلاس شبه :popover-open استایل دهید.
  • بدون معناشناسی ذاتی.

نتیجه گیری و ادامه مطلب

ویژگی های هیجان انگیز زیادی وجود دارد که popover به این پلتفرم می آورد. برای کسب اطلاعات بیشتر در مورد این API، از جمله اطلاعات بیشتر در مورد دسترسی به ویژگی، و مستندات مربوط به مجموعه ویژگی، در اینجا توصیه می شود برای اطلاعات بیشتر مطالعه کنید: