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

Una Kravets

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

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

• ارتقاء به لایه بالایی پاپاورها در لایه بالایی بالای بقیه صفحه ظاهر می شوند، بنابراین نیازی نیست با 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="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 به تنهایی معنایی را ارائه نمی دهد. و در حالی که اکنون می‌توانید با استفاده از پاپ‌اور، تجربیاتی شبیه به گفتگو بسازید، چند تفاوت کلیدی بین این دو وجود دارد:

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

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

• معناشناسی و صفت popover: چه زمانی از چه چیزی استفاده کنیم؟ توسط Hidde de Vries
• در مورد دسترسی پاپاور: کارهایی که مرورگر توسط Hidde de Vries انجام می دهد و انجام نمی دهد
• مستندات MDN در مورد پاپاور