Popover، Menu و Tooltip

روی Popover API بومی مرورگر ساخته شده‌اند: لایه بالا (top layer)، بستن با کلیک بیرون و Esc و بازگشت فوکوس را خود مرورگر انجام می‌دهد. Bana فقط جای‌گذاری هوشمند (با جابه‌جایی خودکار بالا/پایین و هم‌ترازی منطقی برای RTL) و ناوبری صفحه‌کلید را اضافه می‌کند.

Popover

ارسال سریع

سفارش‌های ثبت‌شده تا ساعت ۱۴ همان روز ارسال می‌شوند.

کد

<button ui="secondary" popovertarget="pop-info">اطلاعات ارسال</button>
<div id="pop-info" popover ui="popover">
  <header>ارسال سریع</header>
  <p>سفارش‌های ثبت‌شده تا ساعت ۱۴ همان روز ارسال می‌شوند.</p>
  <button ui="primary small" popovertarget="pop-info" popovertargetaction="hide">متوجه شدم</button>
</div>

موقعیت پیش‌فرض زیر دکمه و هم‌تراز با ابتدای خط است (در RTL راست). تغییر: data-side="top" و data-align="end|center". رویدادها: bana:popover-open و bana:popover-close.

Menu (الگوی Menu Button)

کد

<button ui="secondary" popovertarget="menu-actions">عملیات <bana-icon name="chevron-down"></bana-icon></button>
<div id="menu-actions" popover ui="menu">
  <button>ویرایش</button>
  <button>کپی لینک</button>
  <hr>
  <button ui="danger">حذف</button>
</div>

کلیدها: ↓↑ (روی دکمه، منو را باز می‌کنند)، Home، End، حروف برای جست‌وجوی سریع، Esc برای بستن. انتخاب یک مورد رویداد bana:menu-select می‌فرستد و منو را می‌بندد. موردهای role="menuitemcheckbox" و menuitemradio باز می‌مانند.

Tooltip

کد

<div ui="cluster">
  <button ui="icon" aria-label="ذخیره" data-tooltip="ذخیره (Ctrl+S)"><bana-icon name="check"></bana-icon></button>
  <button ui="secondary" data-tooltip="فقط توضیح تکمیلی" data-tooltip-side="bottom">راهنما</button>
</div>

Tooltip برای لمس مناسب نیست.فقط توضیح تکمیلی بگذارید و هرگز اطلاعات ضروری یا کنترل داخلش نگذارید؛ در دستگاه‌های لمسی دیده نمی‌شود.

ویرایش این صفحه در GitHub